var zindex = 30;
function getZIndex() {
	if(zindex > 80) zindex = 30;
	else zindex++;
	return zindex;
}


$(document).ready(function () {
	
	$('a.bubbleInfo').click(function() {return false;});
	
	$('a.bubbleScreenshot').each(function (i, e) {
		var span = $(this).children("span");
		//url = encodeURIComponent(url);
		if(span.length > 0) {
			var url = span.html();
			
			var info = $('<img src="screenshot.php?url='+url+'" alt="" id="bubble'+i+'" class="bubble" />');
			info.css({opacity: 0, width: '120px', height: '90px'});
			info.appendTo("body");

			//infos animation
			var distance = 10;
			var time = 250;
			var hideDelay = 500;

			var hideDelayTimer = null;

			var beingShown = false;
			var shown = false;

			$(this).mouseover(function (e) {

				if (hideDelayTimer) clearTimeout(hideDelayTimer);
				if (beingShown || shown) {
					// don't trigger the animation again
					return;
				} else {
					// reset position of info box
					beingShown = true;

					info.css({
						top: e.pageY-90,
						left: e.pageX + $(this).width(),
						display: 'block',
						zIndex: getZIndex()
					}).animate({
						top: '-=' + distance + 'px',
						opacity: 1
					}, time, 'swing', function() {
						beingShown = false;
						shown = true;
					});
				}
				return false;
			}).mouseout(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;
			});
		}
	});
	
});