overlay needs to be .load() twice

overlay needs to be .load() twice

Hi All
 
I'm new here, my knowledge of JQuery is limited. Any help is appreciated.
 
I'm using jquery.tools.min.js, overlay version 1.0.4, expose version 1.0.3. I know these are old but I have no choice on this.
 
Here's code that demonstrates the problem:
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
     <title>jQuery Tools standalone demo</title>
     
     <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
     <script src="jquery.tools.min.js" type="text/javascript"></script>




  4.  <style>
     #popup-content{
  5.   /* overlay is hidden before loading */
      display:none;
  6.   /* standard decorations */
      width:400px;
      border:10px solid #666;

  7.   /* for modern browsers use semi-transparent color on the border. nice! */
      border:10px solid rgba(82, 82, 82, 0.698);
  8.   /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
      -moz-border-radius:8px;
      -webkit-border-radius:8px;
     }


  9.  #popup-content div {
      padding:10px;
      border:1px solid #3B5998;
      background-color:#fff;
      font-family:"lucida grande",tahoma,verdana,arial,sans-serif
     }




  10.  
     </style>
    </head>

  11. <body>
  12. <!--[if IE]>
       <style type="text/css">
       .facebox {
           background:transparent;
           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333);
           zoom: 1;
        }
        </style>
    <![endif]-->







  13. <!-- facebook dialog -->
  14. <div id="popup-content">
  15.  <div>
      <h1>Popup</h1>
      <p>
       <button class="close"> Close </button>
      </p>
     </div>




  16. </div>
    <div onclick="showOverlay();" >click</div>
  17. <script type="text/javascript">
     jQuery.noConflict();
     
     jQuery(document).ready( function(){
      jQuery("#popup-content").overlay().load();  //why is this necessary?
     });
     function showOverlay() {
      jQuery("#popup-content").overlay().onBeforeLoad = function(){jQuery("#popup-content").overlay().getBackgroundImage().expose({api: true,color: '#000000'}).load()};
      jQuery("#popup-content").overlay().onClose = function(){jQuery("#popup-content").overlay().getBackgroundImage().expose().close()};
      jQuery("#popup-content").overlay().load();
     }
    </script>










  18.  

  19. </body>
  20. </html>


The issue is:
It is necessary to call jQuery("#popup-content").overlay().load(); once on document load, otherwise the popup will not display. There are no script errors.
If I move that line to into the function ( showOverlay ), it does not work (which is very strange).
 
Now, I can live with having to call load() twice. But I have a scenario where this code has been inserted into a rather extensive jsp page. Despite my best efforts, the overlay will simply not display. I'm not sure why.
 
Any pointers on the best way to overcome this issue will be very much appreciated.
 
(BTW, doing this using the 'rel' attribute is not an option either, it needs to be triggered as demonstrated from a function call)
Please find the older version of jquery.tools.min.js attached.
 
Bottom line, I don't care for the technique, I just need a way to get the popup to well... popup on a function call.
 
 
Thanks Very Much
J