var hideTimer = null;

$(function()
{
  // One instance that's reused to show info for the current person
  /*
	var container = $('<div id="personPopupContainer">'
      + '   <div id="personPopupContent"></div>'
			+ '</div>');
	*/
	var container = $('<div id="personPopupContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
      + '<tr>'
      + '   <td class="corner topLeft"></td>'
      + '   <td class="top"></td>'
      + '   <td class="corner topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left">&nbsp;</td>'
      + '   <td><div id="personPopupContent"></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);

  $('.personPopupTrigger').live('click', function()
  {
  		var artist = $(this).attr('artist')
	
			if (hideTimer)
          clearTimeout(hideTimer);
					
      var pos = $(this).offset();
      var width = $(this).width();
      container.css({
          left: (pos.left + width) + 'px',
          top: pos.top - 5 + 'px'
      });

      $('#personPopupContent').html('&nbsp;');
			
      $.ajax({
          type: 'GET',
          url: artist + '.html',
          //data: 'page=' + pageID + '&guid=' + currentID,
          success: function(data)
          {
						$('#personPopupContent').html(data);
          }
      });
      container.css('display', 'block');
  });
});

function closePopup()
{
  var hideDelay = 500;  

	if (hideTimer)
			clearTimeout(hideTimer);
					
	setTimeout(function()
  {
		$('#personPopupContainer').css('display', 'none');
	}, hideDelay);
}