Custom preview function not showing current ckeditor content

So rather than the default preview function I want to create my own that is a little fancier - perhaps a lightbox of the proper dimensions for the page being created, etc. For started I tried the following which just opens a pop up window, which I thought would work, but when you click my new preview button it shows the content of the textarea/editor when the page was loaded rather than the current (changed) content. Any ideas what I'm doing wrong?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>

<script type="text/javascript">
    $(document).ready( function() {
        $('#previewButton').click( function () {
            var contents = $('#editor1').val();
            var mywin = window.open("", "ckeditor_preview", "location=0,status=0,scrollbars=0,width=500,height=500");

            $(mywin.document.body).html(contents);
        });

        $('#editor1').ckeditor();      
    });
</script>

<textarea id="editor1" cols="5" rows="5">
Contents...
</textarea>

<button id="previewButton">Preview</button>