$(function()
{
  var hideDelay = 500;  
  var hideTimer = null;

  // One instance that's reused to show info for the current person
  var container = $('<div id="personPopupContainer">'
      + '<div id="personPopupContent"></div>'
      + '<div id="personPopupPin"></div></div>');

  $('body').append(container);

  $('.jq_personPopupTrigger').live('mouseover', function()
  {
      var URL = $(this).attr('rel');

     if (hideTimer)
          clearTimeout(hideTimer);
      
      $('#personPopupContent').html('&nbsp;');

      var pos = $(this).offset();
      var width = $(this).width();
      
      $.ajax({
          type: 'GET',
          url: '/'+URL,
          success: function(data)
          {
            $('#personPopupContent').html(data);
            var container_width = $(container).width();
            var container_height = $(container).height();

            container.css({
                left: (pos.left + 40) + 'px',
                top: (pos.top - container_height + 17) + 'px'
            });
            
            container.css('display', 'block');
          }
      });
      
  });

  $('.jq_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);
  });
});