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

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

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

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

      if (id_users == '')
          return;

      if (hideTimer)
          clearTimeout(hideTimer);

      var pos = $(this).offset();
      var width = $(this).width();
      container.css({
          left: (pos.left) + 'px',
          top: pos.top - 155 + 'px'
      });

      $('#userinfoContent').html('&nbsp;');

      $.ajax({
          type: 'POST',
          url: '/ajax/getuserinfo/',
		  dataType: "json",
          data: 'id_users=' + id_users,
          success: function(json)
          {
              if (json.id_users > 0) {
                  $('#userinfoContent').html(json.data.profile_image+'<br /><span class="author_name">'+json.data.author_name+'</span><br />'+json.data.text);
              } else {
                  $('#userinfoContent').html('<span>Page ' +id_users + ' did not return a valid result for person. Please have your administrator check the error log.</span>');
              }
          }
      });

      container.css('display', 'block');
  });

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