/*************************************************************************/
/**************** tooltips - home and product pages **********************/

$(document).ready(function() {
	$('<div class="product-tooltip-top"></div>').insertAfter(".product-tooltip ul");
	$('<div class="product-tooltip-bottom"></div>').insertAfter(".product-tooltip-top");
	$('.product-tooltip ul').each(function() {
		$(this).appendTo($(this).next(".product-tooltip-top"));
	});
	$('.product-tooltip-top').each(function() {
		$(this).css({height:$(this).height()+6});
	});

	var tooltipHeight = 155;
	$(".shape-bottle").hover(function() {
		var $elem = $("#"+$(this).attr("id").replace("shape","tooltip"));
		$elem.tooltipFadeIn(tooltipHeight);
	}, function() {
		var $elem = $("#"+$(this).attr("id").replace("shape","tooltip"));
		$elem.tooltipFadeOut(tooltipHeight);
	});

	$('#content #item a').hover(function() {
		var $elem = $(this).next('.product-tooltip');
		$elem.css({top:$(this).offset().top - 4,left:$(this).offset().left - 92});
		$elem.tooltipFadeIn($elem.children().height() + 12);
	}, function() {
		var $elem = $(this).next('.product-tooltip');
		$elem.tooltipFadeOut(tooltipHeight);
	});

	$.fn.tooltipFadeIn = function(elementHeight) {
		/*
			What this is doing:
			It looks for a custom attribute, csstop, which is the restart point for the element. This prevents the element from moving away from this starting point.
			If it's undefined, we need to set it. First, the current CSS value for top is increased by the amount of the passed-in elementHeight.
			This is done so that the style sheet just needs to contain the top for the exact place, so that debugging is easier.
			(For example, you can set the height and opacity to the end-animation values so you can see just where they'll end up, and let this function do all the "heavy lifting").
			Then, this value is set to the custom csstop attribute. If it's already set, then the top is reset to this stored value.
			Then after that, it animates the image back out to the height and top specified by the passed in elementHeight value.
		*/
		if($(this).attr("csstop") == undefined) {
			$(this).css({top:parseInt($(this).css("top").replace("px","")) + elementHeight});
			$(this).attr("csstop",$(this).css("top"));
		} else {
			$(this).css("top",$(this).attr("csstop"));
		}

		if(!$.browser.msie) {
			$(this).css({opacity:0});
		}

		$(this).animate({height:elementHeight+"px",top:"-="+elementHeight},{duration:250,queue:false});
		if(!$.browser.msie) {
			$(this).delay(50).animate({opacity:"1"},250);
		}
	}

	$.fn.tooltipFadeOut = function(elementHeight) {
		if(!$.browser.msie) {
			$(this).animate({opacity:"0"},{duration:250,queue:false});
		}
		$(this).delay(50).animate({height:"0px",top:"+="+elementHeight},250);
	}
});