// JavaScript Document

var Products = {
	
	sr: {},
	
	isPopUp: true,
	
	setUpSquares: function() {
		var productList = $("ul.productList");
		var squares = $("li", productList);
		squares.each(function() {
			var square = $(this);
			square.height(200).css({overflow: "hidden"});
		});
	},
	
	setUpProducts: function() {
		var productList = $("ul.productList");
		var products = $("li.product", productList);
		products.each(function() {
			var product = $(this);
			var theSlug = $("a", product);
			theSlug.css("border-color", Products.sr.borderColour).css("cursor", "pointer");
			product.css("cursor", "pointer");
			product.hover(function(){Products.productOver(theSlug);}, function(){Products.productOff(theSlug);});
			if (Products.isPopUp) {
				product.click(function() {Products.popUp(product);});
			} else {
				var  location = $("a", product).attr("href");
				product.click(function() {window.location = location;});
			}
		});
	},
	
	positionPopUp: function(product) {
		var index = $("ul.productList li").index(product);
		var coords = {};
		switch (index) {
			case 0:
				coords = {top: "0px", left: "0px"}
				break;
			case 1: 
				coords = {top: "0px", left: "200px"}
				break;
			case 2:
				coords = {top: "0px", right: "200px"}
				break;
			case 3: 
				coords = {top: "0px", right: "0px"}
				break;
			case 4:
				coords = {top: "200px", left: "0px"}
				break;
			case 5: 
				coords = {top: "200px", left: "200px"}
				break;
			case 6:
				coords = {top: "200px", right: "200px"}
				break;
			case 7: 
				coords = {top: "200px", right: "0px"}
				break;
			case 8:
				coords = {bottom: "0px", left: "0px"}
				break;
			case 9: 
				coords = {bottom: "0px", left: "200px"}
				break;
			case 10:
				coords = {bottom: "0px", right: "200px"}
				break;
			case 11: 
				coords = {bottom: "0px", right: "0px"}
				break;
		}
		return coords;
	},
	
	productOver: function(theSlug) {
		theSlug.fadeIn(200);
	},
	productOff: function(theSlug) {
		theSlug.fadeOut(100);
	},
	
	popUp: function(product) {
		if (Products.isPopUp) {
			var text = $("p", product).html();
			var src = ($("img", product).attr("src"));
			switch (Products.sr.replaceString) {
				case "oa" :
					src = src.replace(/\/oa\//, "/oa/L_");
					break;
				case "g" :
					src = src.replace(/\/g\//, "/g/L_");
					break;
				case "s" :
					src = src.replace(/\/s\//, "/s/L_");	
					break;
			}
			var thePopUp = $(".productPopUp");
			Products.closePopUp(thePopUp);
			$("img", thePopUp).unbind().load(function() {
				thePopUp.fadeIn();
			});
			$("img", thePopUp).attr("src", src);
			$("p", thePopUp).html(text);
			thePopUp.css("background-color", Products.sr.borderColour).css(Products.positionPopUp(product));
			//product.effect("transfer", {to: "div.productPopUp"}, 500);
			thePopUp.unbind().click(function() {Products.closePopUp(thePopUp);});
		}
	},
	
	closePopUp: function(thePopUp) {
		thePopUp.hide();
		thePopUp.removeAttr("style");
	},
	
	init: function(strings, isPopUp) {
		Products.isPopUp = isPopUp;
		
		Products.sr = strings;
		
		Products.setUpSquares();
		Products.setUpProducts();
	}
	
}