$j(document).ready(function(){
	$j(".productHover").each(function(){	
		//grab product id
		var splitID = $j(this).attr("href").split("id=");
		var prodID = splitID[1];		
		//when the link is hovered, the container appears
		$j(this).mouseenter(function(){
			//cache
			if ($j(this).hasClass("already-active")) {
				var theContainer = $j("." + prodID);
				theContainer.fadeIn(300);
			} else {
				//create a container for info
				$j(this).addClass("already-active");
				$j("body").append("<div class='productInfoBox " + prodID + "'>\n\t<p>Please wait... loading product info.</p>\n</div>");
				//determine where the container will be positioned
				var theContainer = $j("." + prodID);		
				//load product info into container
				
				if ($j(this).hasClass("no-image")) {
					theContainer.addClass("no-image").load("/store/products/display.do?id=" + prodID + " .productDescription, .productPrice, .was-price, .productSalePrice, .productNumber, .sorrySoldOut", function(){theContainer.find("p").remove();});
				} else {
					theContainer.load("/store/products/display.do?id=" + prodID + " .productDescription, .productPrice, .was-price, .productSalePrice, .productNumber, .sorrySoldOut, .viewable", function(){theContainer.find("p").remove();});
				}
				
				
				//determine the positioning of the container		
				var position = $j(this).offset();
				var xPosition = parseFloat(position.left);
				var yPosition = parseFloat(position.top);
				var width = parseFloat($j(this).width());
				var x = parseFloat($j(this).attr("data-x"));
				var xOffset = (width + xPosition) + x;
				var negOffset = (xPosition - 300) - x;
				var y = parseFloat($j(this).attr("data-y"));
				if ($j(this).hasClass("hoverLeft")) {
					theContainer.css({
					left: negOffset + "px",
					top: y + yPosition + "px"
					});
				} else {
					theContainer.css({
					left: xOffset + "px",
					top: y + yPosition + "px"
					});
				}
				//hide the container
				theContainer.hide();
				theContainer.fadeIn(300);
			}
		})
		//and when it is un-hovered, it disappears
		.mouseleave(function(){
			var theContainer = $j("." +prodID);
			theContainer.fadeOut(300);
		});		
	});
});