$(function()
{

  var hideDelay = 500;  
  var showDelay = 700;  
  var currentID;
  var hideTimer = null;
  var showTimer = null;

  var container = $('<div id="topicPopupContainer"><div id="topicPopupContent"></div>');

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

  $('.topicPopup').live('mouseover', function()
  {
    var currentID = $(this).attr('id');
	var currentHref = $(this).attr('href');

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

	if (showTimer)
       clearTimeout(showTimer);
   	showTimer = setTimeout(function()
   	{
      if (currentID == '')
          return;

      if (hideTimer)
          clearTimeout(hideTimer);

	  if (showTimer)
		  clearTimeout(showTimer);
		
      $('#topicPopupContent').html('&nbsp;');

	  if(undefined!==window.aj) {
		window.aj.abort(); 
		window.aj = null; 		
	  } 
	  
      $('#topicPopupContent').html('<span><img src="/img/ajax-loader-on-white.gif"> Bitte haben Sie einen Moment Geduld.</span>');
	  postObject = new Object; 
	  postObject.id = currentID;
	  postObject.href = currentHref;
	  aj = $.post('/ajax/getTopicSnippet', postObject, 
		function(data){
			if ((data.valid) && (data.id == currentID))
			{
				$('#topicPopupContent').html(data.snippet);
			}
			else
			{
				$('#topicPopupContent').html('<span>Leider ist ein unbekannter Fehler aufgetreten.</span>');
			}
		}, "json" );
			
      container.css('display', 'block');
 	}, showDelay);
  });
 
  $('.topicPopup').live('mouseout', function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
		  clearTimeout(showTimer);
      hideTimer = setTimeout(function()
      {
          container.css('display', 'none');
      }, hideDelay);
  });
 
  $('#topicPopupContainer').mouseover(function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
		  clearTimeout(showTimer);
  });

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

});