$(function()
{

    
  var hideDelay = 500;
  var hideTimer = null;

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

  $('#siteContainer').append(container);

  $('.personPopupTriggerHeren').live('mouseover', function()
  {
        container.css('display', 'none');
      // format of 'rel' tag: pageid,personguid
      var id = $(this).attr('rel');

      // If no guid in url rel tag, don't popup blank
      if (id == '')
          return;

      if (hideTimer)
          clearTimeout(hideTimer);

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

      $('#personPopupContainer').css({
          left: (pos.left + width) +12 + 'px'
      });

      $('.arrow').css({
          top: pos.top +20+ 'px'
      });

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

      $.ajax({
          type: 'GET',
          url: 'index.php?page=heren&id=' + id,
          success: function(data)
          {
              $('#personPopupContainer').html(data);
              $(container).fadeIn("fast");
          }
      });
        
      

  });

    $('.personPopupTriggerDames').live('mouseover', function()
  {
    container.css('display', 'none');
      // format of 'rel' tag: pageid,personguid
      var id = $(this).attr('rel');

      // If no guid in url rel tag, don't popup blank
      if (id == '')
          return;

      if (hideTimer)
          clearTimeout(hideTimer);

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

      $('#personPopupContainer').css({
          left: (pos.left + width) +12 + 'px'
      });

      $('.arrow').css({
          top: pos.top +20+ 'px'
      });

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

      $.ajax({
          type: 'GET',
          url: 'index.php?page=dames&id=' + id,
          success: function(data)
          {
              $('#personPopupContainer').html(data);
              $(container).fadeIn("fast");
          }
      });
        $(container).fadeIn("fast");


  });

    $('.personPopupTriggerDames').live('mouseout', function()
  {
      
      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          $(container).fadeOut("fast");
      }, hideDelay);
  });

  $('.personPopupTriggerHeren').live('mouseout', function()
  {

      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          $(container).fadeOut("fast");
      }, 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);
  });
});