$(document).ready(function($){
	
	var hideDelay = 500;  
  var ID;
  var hideTimer = null;
	
  
  //tooltip with image
  var container2 = $('<div id="PopupContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" class="personPopupPopup">'
      + '<tr>'
      + '   <td class="corner topLeft"></td>'
      + '   <td class="top"></td>'
      + '   <td class="corner topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left"></td>'
      + '   <td><div id="PopupContent"></div></td>'
      + '   <td class="right"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="corner bottomLeft"></td>'
      + '   <td class="bottom"></td>'
      + '   <td class="corner bottomRight"></td>'
      + '</tr>'
      + '</table>'
      + '</div>');

  $('body').append(container2);
  $('#PopupContainer td').css("border", "none");
  
  $('.PopupTrigger').bind('mouseover', function()
  {

      ID = $(this).attr('id');

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

      if (hideTimer)
          clearTimeout(hideTimer);

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

      $('#PopupContent').html('<center><img src="http://localhost/php/templates/trooper/images/loading.gif" width="150" style="border:none" /></center>');

      $.ajax({
          type: 'GET',
          url: 'http://localhost/php/modules/tooltip.php',
          data: 'id=' + ID,
          success: function(data)
          {  
          		$('#PopupContent').html(data);
          }
      });

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

  $('.PopupTrigger').bind('mouseout', function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          container2.css('display', 'none');
      }, hideDelay);
  });
  
  // Allow mouse over of details without hiding details
  $('#PopupContainer').mouseover(function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
  });

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

  

});