$(function()  
{  
  var hideDelay = 500;    
  var hideTimer = null;  
  
  // 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);  
  
  $('a#show_rules').live('click', function()  
  {  
      // format of 'rel' tag: pageid,personguid  
      var page = $(this).attr('rel');  
  
      if (hideTimer)  
          clearTimeout(hideTimer);  
  
      var pos = $(this).offset();  
      var width = $(this).width();  
      container.css({  
          left: (pos.left + width) + 'px',  
          top: pos.top - 300 + 'px'  
      });  
  
      $('#personPopupContent').html('<iframe src="' + page + '" style="border: 1px solid #000; width:400px; height: 400px;"></iframe>');  
  
      container.css('display', 'block');
      
      return false;  
  });  
  
  $('.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);  
  });  
});