var ptrlock;
$(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="itemPopupContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="itemPopupPopup">'
      + '<tr>'
      + '   <td class="corner topLeft"></td>'
      + '   <td class="top"></td>'
      + '   <td class="corner topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left">&nbsp;</td>'
      + '   <td id="popup"><div id="itemPopupContent"></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);

  $('.GL_PRODUCT').live('mouseover', function()
  {
      // format of 'rel' tag: pageid,personguid
      var productId = $(this).attr('rel');
 
      // If no guid in url rel tag, don't popup blank
      if (productId == '')
          return;

      if (hideTimer)
          clearTimeout(hideTimer);

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

      $('#itemPopupContent').html('Lade...');
      if (ptrlock) {
          ptrlock.abort();
          ptrlock=null;
          }
      ptrlock = $.getJSON('http://gearlist.outdoorseiten.net/product/ShortJSON?id='+productId+"&callback=?",
          function(data)
          {
              $('#itemPopupContent').html(data.html);
              $("#itemPopupContent").css("width","auto");
              $("#itemPopupContent").css("height","auto");
              $("#itemPopupContainer").css("width","auto");
              $("#itemPopupContent").css("background-color","white");
              container.css('display', 'block');
          }
      );
  });

  $('.GL_PRODUCT').live('mouseout', function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          container.css('display', 'none');
      }, hideDelay);
  });

  // Allow mouse over of details without hiding details
  $('#itemPopupContainer').mouseover(function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
  });

  // Hide after mouseout
  $('#itemPopupContainer').mouseout(function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          container.css('display', 'none');
      }, hideDelay);
  });
});