$.fn.codaPopup = function () {
	$('.bubblePopupInfo').each(function () {
		if(this.id.indexOf('%') == -1) {
			var distance = 0;
			var time = 100;
			var hideDelay = 100;
			var hideDelayTimer = null;
			var beingShown = false;
			var shown = false;
			var info = $('#' + this.id + ' .popup').css('opacity', 0);
			var trigger = $('#trigger_' + this.id);
	        $([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({
	                    bottom: 20,
						left: -20,
	                    display: 'block'
	                }).animate({
	                    bottom: '=' + 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({
	                    bottom: '-=' + distance + 'px',
	                    opacity: 0
	                }, time, 'swing', function () {
	                    shown = false;
	                    info.css('display', 'none');
	                });
	
	            }, hideDelay);
	            return false;
	        });
		}
    });
}

$.fn.codaPopupCustom = function (element, afterEvent) {
	$('#' + element).each(function () {
		var distance = 10;
		var time = 250;
		var hideDelay = 2000;
		var hideDelayTimer = null;
		var beingShown = false;
		var shown = false;
		var info = $('#' + this.id + ' .popup').css('opacity', 0);
		var trigger = $('.' + info.attr('id'));
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		if (beingShown || shown) {
			// don't trigger the animation again
			return;
		} else {
			// reset position of info box
			beingShown = true;
			info.css({
				bottom: 20,
				left: -57,
				display: 'block'
			}).animate({
				bottom: '-=' + distance + 'px',
				opacity: 1
			}, time, 'swing', function() {
				beingShown = false;
				shown = true;
			});
		}
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		hideDelayTimer = setTimeout(function () {
			hideDelayTimer = null;
			info.animate({
				bottom: '-=' + distance + 'px',
				opacity: 0
			}, time, 'swing', function () {
				shown = false;
				info.css('display', 'none');
			});
		}, hideDelay);
		$([trigger.get(0), info.get(0)]).unbind(afterEvent);
		return false;
    });
}

$.fn.codaPopupSize = function () {
	$('.popupSize').each(function() {
		var size = $(this).html();
		var attr = size.split('x');
		var distance = 0;
		var time = 100;
		var hideDelay = 100;
		var hideDelayTimer = null;
		var beingShown = false;
		var shown = false;
		var info = $('#popup_size_' + size + ' .popup');
		if(info.length == 0) {
			var content = '<div class="bubblePopupInfo" id="popup_size_' + size + '"><table class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td><table class="popup-contents"><tbody><tr><td><div class="popupSizeFrame" style="width:' + attr[0] + 'px;height:' + attr[1] + 'px;"><div style="margin-top:' + parseInt(attr[1] / 2 - 5) + 'px;">' + size + '</div></div></td></tr></tbody></table></td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img width="30" height="29" alt="popup tail" src="' + webPath + 'templates/default/images/bubble-tail2.png"/></td><td id="bottomright" class="corner"></td></tr></tbody></table></div>';
			$(this).after(content);
			info = $('#popup_size_' + size + ' .popup');
		}
		info.css('opacity', 0);
		var trigger = $(this);
		$([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({
					bottom: 5,
					left: 0,
					display: 'block'
				}).animate({
					bottom: '=' + 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({
					bottom: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					shown = false;
					info.css('display', 'none');
				});

			}, hideDelay);
			return false;
		});
	});
}