$(function()
{
  var appearDelay = 300;
  var hideDelay = 200;  
  var currentID;
  var rollMemType;
  var rollDir;
  var appearTimer = null;
  var hideTimer = null;
  var vOffset = 180;
  var lOffset = 228; //offset when popping left

  // One instance that's reused to show info for the current person
  var container = $('<div id="vpGameRollContainer">'
	  + '<div class="theTop"></div>'
	  + '<div class="theMid">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" class="vpGameRollPopup">'
      + '<tr>'
      + '   <td class="nub">&nbsp;</td>'
      + '   <td><div id="vpGameRollContent"></div></td>'
	  + '   <td class="nubR">&nbsp;</td>'
      + '</tr>'
      + '</table>'
	  + '</div>'
	  + '<div class="theBottom"></div>'
      + '</div>');

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

  $('.vpGameRollTrigger').live('mouseover', function()
  {
      // format of 'rel' tag: pageid,personguid
	  container.css('display', 'none');
      var settings = $(this).attr('rel').split(',');
      var pageID = settings[0];
      currentID = settings[0];
	  rollMemType = settings[1];
	  rollDir = settings[2];

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

      if (hideTimer)
          clearTimeout(hideTimer);

      var pos = $(this).offset();
      var width = $(this).width();
	  if(rollDir == "L"){
		  container.css({
			  left: (pos.left - lOffset) + 'px',
			  top: pos.top - 5 - vOffset + 'px'
		  });
		  $('#vpGameRollContainer').removeClass('hasLnub');	
		  $('#vpGameRollContainer').addClass('hasRnub');
	  } else {
		  container.css({
			  left: (pos.left + width) + 'px',
			  top: pos.top - 5 - vOffset + 'px'
		  });
		  
		  $('#vpGameRollContainer').addClass('hasLnub');	
		  $('#vpGameRollContainer').removeClass('hasRnub');
	  }

      $('#vpGameRollContent').html('&nbsp;');
	
	  if (appearTimer) clearTimeout(appearTimer);
	  appearTimer = setTimeout(function()
      {

		  $.ajax({
			  type: 'GET',
			  url: '/play_games/roll/',
			  cache: true,
			  data: 'page=' + pageID + '&gid=' + currentID + '&memType=' + rollMemType,
			  success: function(data)
			  {
				  // Verify that we're pointed to a page that returned the expected results.
				  if (data.indexOf('vpGameRollResult') < 0)
				  {
					  $('#vpGameRollContent').html('<span >Please try again.</span>');
				  }
	
				  // Verify requested person is this person since we could have multiple ajax
				  // requests out if the server is taking a while.
				  if (data.indexOf('game_'+currentID+'_') > 0)
				  {                  
					  var text = $(data).html();
					  $('#vpGameRollContent').html(text);
				  }
			  }
		  });
		  
	
		  container.css('display', 'block');
		  }, appearDelay);
  });

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

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

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