I need the help of the experts on here.

My code is fine and dandy and works great a single time once the "Open" button is clicked. Once I select date it closes just fine. However, when I go to re-open it again for a second time the width and height are out of scope and the ui dialog looks different. I am wondering what I am doing wrong here?

```
<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
    <link   href="jq/jquery-ui.css"         type="text/css" rel="stylesheet" />
    <script src="jq/jquery.min.js"          type="text/javascript"> </script>
    <script src="jq/jquery-ui.min.js"       type="text/javascript"> </script>

<script type="text/javascript">
var z; 

function opendd() {

  $('#dd').dialog({  
       autoOpen:   true, 
       modal:      true, 
       overlay:    { opacity: 0.5, background: 'black'}, 
       title:      'Select the date:', 
       height:     215,  
       width:      234, 
       draggable:  false,  
       resizable:  false 

   });//end of dialog_atip 

  $("#B1").click(function(){  
        callback(); 
  }); 

  $('#d1').datepicker({ 
     onSelect:function(){ 
                    z = $(this).val(); 
                    alert(z); 
                    $("#dd").dialog("close"); 
     } 
  }); 

}//end of function

function callback() {  
    alert(z); 
} 
</script>

</head>

<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>

</div>
<input type="button" value="CallbackValue" name="B1" id="B1"> 

</body>

</html>

```

Much thanks and appreciation for all your help and support in advance.

Jay