$(document).ready(function() {
	$('.bubbleInfo').each(function () {
	var distance = 10;
	var time = 250;
	var hideDelay = 500;

	var hideDelayTimer = null;

	var beingShown = false;
	var shown = false;
	var trigger = $('.trigger', this);
	var info = $('.popup', this).css('opacity', 0);


	$([trigger.get(0), info.get(0)]).mouseover(function () {
		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: -250,
				left: -90,
				display: 'block'
			}).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;
		});
	});
});