$(function()  
{  
  var hideDelay = 100;    
  var currentID;  
  var hideTimer = 500;  
  
  // One instance that's reused to show info for the current person  
  var container = $('<div id="personPopupContainer">'  
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'  
      + '<tr>'  
      + '   <td class="corner topLeft"></td>'  
      + '   <td class="top"></td>'  
      + '   <td class="corner topRight"></td>'  
      + '</tr>'  
      + '<tr>'  
      + '   <td class="left">&nbsp;</td>'  
      + '   <td><div id="personPopupContent"></div></td>'  
      + '   <td class="right">&nbsp;</td>'  
      + '</tr>'  
      + '<tr>'  
      + '   <td class="corner bottomLeft">&nbsp;</td>'  
      + '   <td class="bottom">&nbsp;</td>'  
      + '   <td class="corner bottomRight"></td>'  
      + '</tr>'  
      + '</table>'  
      + '</div>');  
  
  $('body').append(container);  
  
  $('.personPopupTrigger').live('mouseover', function()  
  {  
      // format of 'rel' tag: pageid,personguid  
      var pageID = $(this).attr('rel');
  
      // If no guid in url rel tag, don't popup blank  
      if (pageID == '')  
          return;  
  
      if (hideTimer)  
          clearTimeout(hideTimer);  
  
      var pos = $(this).offset();  
      var width = $(this).width();  
      container.css({  
          left: (pos.left + width + 14) + 'px',  
          top: pos.top - 5 + 'px'  
      });  
  
      $('#personPopupContent').html('&nbsp;');  
  
      $.ajax({  
          type: 'GET',  
          url: 'modules/php/tooltip.php',  
          data: 'page=' + pageID,  
          success: function(data)  
          {
              var text = $(data).html();
				  
              $('#personPopupContent').html(text);  
          }  
      });  
  
      container.css('display', 'block');  
  });  
  
  $('.personPopupTrigger').live('mouseout', function()  
  {  
      if (hideTimer)  
          clearTimeout(hideTimer);  
      hideTimer = setTimeout(function()  
      {  
          container.css('display', 'none');  
      }, hideDelay);  
  });  
  
  // Allow mouse over of details without hiding details  
  $('#personPopupContainer').mouseover(function()  
  {  
      if (hideTimer)  
          clearTimeout(hideTimer);  
  });  
  
  // Hide after mouseout  
  $('#personPopupContainer').mouseout(function()  
  {  
      if (hideTimer)  
          clearTimeout(hideTimer);  
      hideTimer = setTimeout(function()  
      {  
          container.css('display', 'none');  
      }, hideDelay);  
  });  
});