jQuery not closing my popup on click

jQuery not closing my popup on click

Hi All

I am testing a Popup window using jQuery but I am not able close it. Can any one help me in closing this popup. 
This my HTML Code
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  3. <script>
  4. $(document).ready(function() {
  5. //Put in the DIV id you want to display
  6. launchWindow('#dialog1');
  7. //if close button is clicked
  8. $('.window #close').click(function () {
  9. $('#mask').hide();
  10. $('.window').hide();
  11. });
  12. //if mask is clicked
  13. $('#mask').click(function () {
  14. $(this).hide();
  15. $('.window').hide();
  16. });
  17. $(window).resize(function () {
  18.   var box = $('#boxes .window');
  19.         //Get the screen height and width
  20.         var maskHeight = $(document).height();
  21.         var maskWidth = $(window).width();
  22.         //Set height and width to mask to fill up the whole screen
  23.         $('#mask').css({'width':maskWidth,'height':maskHeight});
  24.         //Get the window height and width
  25.         var winH = $(window).height();
  26.         var winW = $(window).width();
  27.         //Set the popup window to center
  28.         box.css('top',  winH/2 - box.height()/2);
  29.         box.css('left', winW/2 - box.width()/2);
  30. });
  31. });

  33. function launchWindow(id) {
  34. //Get the screen height and width
  35. var maskHeight = $(document).height();
  36. var maskWidth = $(window).width();
  37. //Set heigth and width to mask to fill up the whole screen
  38. $('#mask').css({'width':maskWidth,'height':maskHeight});
  39. //transition effect
  40. $('#mask').fadeIn(1000);
  41. $('#mask').fadeTo("slow",0.8);
  42. //Get the window height and width
  43. var winH = $(window).height();
  44. var winW = $(window).width();
  45. //Set the popup window to center
  46. $(id).css('top',  winH/2-$(id).height());
  47. $(id).css('left', winW/2-$(id).width()/2);
  48. //transition effect
  49. $(id).fadeIn(2000); 
  50. }
  51. </script>

  54. </head>

  56. <body>
  57. <!-- Start of Login Dialog -->  
  58. <div id="boxes">
  59. <div id="dialog1" class="window">
  60. <div class="d-header">
  61.         <div style="padding-top:50px;padding-left:115px;">
  62.         <img src="jquery-modal-window-queness/images/dapl-representative-small.jpg" width="151" height="100" />
  63.         </div>
  64.   <input type="text" value="Enter Phone No." onclick="this.value=''"/><br/>
  65.   <input type="text" value="Enter eMail ID" onclick="this.value=''"/>  <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  66.             <font color="#FF9F38">Please give us your details and our representative will contact with you.</font>
  67.   </div>
  68. <input type="image" alt="Close" title="Close" src="jquery-modal-window-queness/images/x.png" class="close"/>
  69. </div>
  70. </div>    
  71. <div id="mask"></div>
  72. <!-- End of Login Dialog -->  

Now When I click on on the masked area Pop disappear but when I click on the image x.png Popup doesn't go away.
I need some hint or guidance.

Thank you all.