How to combine UI Dialog with UI Tabs in jQuery?

Question

So I'm trying to combine the Dialog with the Tabs UI components form jQuery UI am I'm almost there but I cannot seem to move the dialog close button from the Dialog UI titlebar into the Tabs UI.

I tried to move the existant Dialog UI titlebar close button to the Tabs UI bar but that presented lots of problems and the button moved on mouse hover. I tried to create buttons with the close icon in the Tabs UI bar but this is proving to be difficult to position the button on the far right side, with the look and feel of a button (with the close icon on it).

The problem is that the Tabs UI bar only accepts <li> because it's a <ul>. If I want to add something else there, I need to enclose it in <li> and that's causing lots of problems or I'm failing to see the easy solution.

Can anyone help me out?

Here's my current code:

<script type="text/javascript">
    $(document).ready(function() {
        $('#dialog-movie-info').dialog({
            draggable: false,
            resizable: false,
            show: 'fade',
            hide: 'fade',
            modal: true,
            height: 370,
            width: 650,
            position: ['center', 35],
            open: function() {
                //$('.ui-dialog-titlebar-close').appendTo('#ui-tab-dialog-close');
                $(this).parent().children('.ui-dialog-titlebar').remove();
                $('#tabs-movie').tabs();
            },
            close: function() {
                $(this).find('#tab-info').children().remove();
                $(this).dialog('destroy');
            }
        });
    }
</script>
<div id="dialog-movie-info" class="ui-helper-hidden">
  <div id="tabs-movie">
    <ul>
      <li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li>
      <li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li>
    </ul>
    <div id="tab-info">
      <em>Info tab...</em>
    </div>
    <div id="tab-cast">
      <em>Cast tab...</em>
    </div>
  </div>
</div>

Answer 1

I find a solution that works great for me:

Javascript:

$(document).ready(function() {
    $('#tabs-movie').tabs();

    $('#dialog-movie-info').dialog({
        closeOnEscape: false,
        draggable: false,
        resizable: false,
        autoOpen: false,
        open: function() {
            $(this).find('.ui-dialog-titlebar-close').blur();
        }
    }).parent().find('.ui-dialog-titlebar-close').prependTo('#tabs-movie').closest('.ui-dialog').children('.ui-dialog-titlebar').remove();
});

HTML:

<div id="dialog-movie-info">
  <div id="tabs-movie">
    <ul>
      <li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li>
      <li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li>
    </ul>
    <div id="tab-info"></div>
    <div id="tab-cast">
      <em>Cast Tab!</em>
    </div>
  </div>
</div>

CSS:

#tabs-movie {
    border: none;
    padding: 0;
}