questions about jquery dialog plug-in

Question

I am trying to customize a dialog window (without a theme). First, I want to display a custom "close X" button. Second, a user should be able to drag and resize the dialog. Finally, I would like to position the dialog in the top center of the window. However, I am having some problems and need some help.

I have the following:

<style>
.ui-dialog { position: absolute; margin-left:750px; min-width:350px; margin-top:60px;  overflow:hidden;  }
.ui-dialog .ui-dialog-titlebar { padding:0; position: relative;  }
.ui-dialog .ui-dialog-title { float:left; margin:0px; } 
.ui-dialog .ui-dialog-titlebar-close { position:absolute; right:3.5em; top:50%; margin-top:12px; margin-left:-30px; padding: 1px; height: 12px; }
.ui-dialog .ui-dialog-titlebar-close span { display:block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em;  }
.ui-dialog .ui-dialog-content { padding: .5em 1em; background: none; overflow: auto; zoom: 1; width:auto; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } 
.ui-draggable .ui-dialog-titlebar { cursor: move; }
</style>
<div id="add-cnote" style="display:none;">
 <div class="popup-container">
  <div class="popup-header">
   <span class="popup-header-text">Add Customer Note</span>
  </div>
 <div class="popup-content" style="padding:10px;">
  <form id="addNote" name="addNote" action="" method="post">
   <textarea rows="5" cols="64" id="notes" name="notes" class="input"></textarea>
   <br /><br />      
   <input type="submit" value="Save" name="subBtn" id="form-submit" />
  </form>
 </div> 
</div>
</div>

and I call this with:

$('a[name=openDialog]').click(function() {
  $("#add-cnote").dialog({closeText:'close'}, {resizable:true}); 
  $("#add-cnote").dialog( "option", "modal", true );
  $("#add-cnote").dialog( "option", "draggable", true );
});

I couldn't insert a custom X image to the closeText. If I don't make a title in the outer div, the drag cursor disappears. I used margin-left and min-width for ui-dialog css, which are hard coded numbers. This doesn't help with the positioning. I also tried the following.

Any ideas?

thanks in advance.