$(function(){		   
	   $("body").append('<table id="dpop"  class="bubblepopup">'+
		'<tbody><tr>'+
			'<td id="bubbletopleft" class="bubblecorner"></td>'+
			'<td class="bubbletop"></td>'+
			'<td id="bubbletopright" class="bubblecorner"></td>'+
		'</tr>'+
		'<tr>'+
			'<td class="bubbleleft"></td>'+
			'<td style="margin: 0;padding: 0;">'+
	'<div id="bubblecontent"></div>'+
			'</td>'+
			'<td class="bubbleright"></td>'+
		'</tr>'+
		'<tr>'+
			'<td class="bubblecorner" id="bubblebottomleft"></td>'+
			'<td class="bubblebottom" height="29"></td>'+
			'<td id="bubblebottomright" class="bubblecorner"></td>'+
		'</tr>'+
	 '</tbody></table>'); 


		var distance = 20;
		var time = 250;
		var hideDelay = 500;

		var hideDelayTimer = null;
		var beingShown = false;
		var shown = false;
		var trigger = $('.bubble', this);
		var info = $('#dpop', this).css('opacity', 0);

		$('#dpop').hover(function(){
			if (hideDelayTimer) clearTimeout(hideDelayTimer);								  
		},function(){
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				info.animate({
					top: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					shown = false;
					info.css('display', 'none');
				});

			}, hideDelay);			
		});
		
		$('.bubble').hover(function (e) {
			if (hideDelayTimer) clearTimeout(hideDelayTimer);											
			if (beingShown && shown==$(this).attr('bubble')) { // trigger again?
				return false;
			} else {
				beingShown = true;
			
				$('#bubblecontent').html($(this).attr('bubble'));
				var objectX = (e.pageX);
				var objectY = (e.pageY-($("#bubblecontent").height()/2));
			
				var scrollTop = $(document).scrollTop();
				var scrollLeft = $(document).scrollLeft();
				
				var posX = (scrollLeft+objectX) - $('#dpop').outerWidth() - $('.bubble').outerWidth();
				var posY = (scrollTop+objectY) - $('.bubble').outerHeight() + distance;
				
				
				info.css({
					 top: posY,
					 left: posX,
					 display: 'block'
				 }).animate({
					top: '-=' + distance + 'px',
					opacity: 1
				 }, time, 'swing', function() {
					 beingShown = false;
					 shown = $(this).attr('bubble');
				 });				

			}

			return false;
		},function() {
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				info.animate({
					top: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					shown = false;
					info.css('display', 'none');
				});

			}, hideDelay);

			return false;
		});
		
  });