$(document).ready(function() {
	initProducts();
});

/* initProducts
Description: Initializes Products for products.php
*/
function initProducts()
{
	//Show hidden Javascript enabled content
	$(".yesScript").css("display", "block");
	
	//Create box for hover text	
	var div = document.createElement('div');
	$(div).css("position","absolute");
	$(div).css("width","400px");
	$(div).css("padding","10px");
	$(div).attr("class", "ui-widget ui-widget-content ui-corner-all");
	$(div).css("visibility","hidden");
	$("body").append(div);
	
			
	//Border fade in and fade out on hover
	$("#products span a").hover(
		function () {
			$(this).children().fadeIn();
			$(div).html($(this).parent("span").children("p").eq(0).html());
			$(div).css("visibility","visible");
		}, 
		function () {
			$(this).children().fadeOut("fast");
			//Show Description
			$(div).css("visibility","hidden");
		}
	);
	
	//Update hover box position
	
	$("#products span a").mousemove(function(e){
		//$('#status').html( +', '+ e.pageY);
		offsetX = -200;
		offsetY = 25;
		/*
		x = e.pageX + offsetX;
		y = e.pageY + offsetY;*/
		//alert();
		//$(div).text(x);
		$(div).css("left", (e.pageX + offsetX) + "px");
		$(div).css("top", (e.pageY + offsetY) + "px");
	}); 
	
	//Show image on click
	$("#products span a").click( function(e) {
		e.preventDefault();
		
		//Black background
		$("body").append("<div id = \"enlargedBackground\" style = \"height:" + $(document).height() + "px;\"></div>");
		$("body").append("<table id = \"enlargedContainer\" style = \"height:" + $(document).height() + "px;\"><tr><td></td></tr></table>");
		
		//Make Image
		var img = new Image();
		$(img).load(function () {
			$(this).css("display","none");
			$("body").append(this);
			$("#enlargedContainer tr td").append("<a style = \"width:"+$(img).width()+"px; height:"+$(img).height()+"px; background-image:url('" + $(this).attr("src") + "');\"></a>");
			$("#enlargedContainer a").css("border", "3px solid #EE0077");
			$("#enlargedContainer a").fadeIn();
			$("#enlargedContainer a").append("<div id = \"enlargedX\" ></div>");
	
			//Show close symbol
			$("#enlargedContainer a").hover(
				function() {
				$("#enlargedX").fadeIn("fast");
				},
				function() {
				$("#enlargedX").fadeOut("fast");
				}
			);
			
			$("#enlargedX").hover(
				function() {
				$(this).preventDefault();
				},
				function() {
				$(this).preventDefault();
				}
			);
		});
		
		//Add image src
		$(img).attr('src', $(this).attr("href"));
		
		//Close on Click
		$("#enlargedContainer").click( function() {
			$("#enlargedX").remove();
			$("#enlargedContainer").empty();
			$("#enlargedContainer").remove();
			$("#enlargedBackground").remove();
			$("#enlargedContainer").unbind('click');
		});
		$("#enlargedBackground").css("opacity", .4);
	});
}