var hoverColour = "#FFF";

$(function(){
	$("a.hoverBtn").show("fast", function() {
		$(this).wrap("<div class=\"hoverBtn\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn").show("fast", function() {
		//append the background div
		$(this).append("<div></div>");
		
		//get link's size
		var wid = $(this).children("a span").width();
		var hei = $(this).children("a").height();
		
		//set div's size
		//$(this).width(wid);
		$(this).height(hei);
		$(this).children("div").width(wid);
		$(this).children("div").height(hei);
		
		//on link hover
		$(this).children("a").hover(function(){
			//store initial link colour
			if ($(this).attr("rel") == "") {
				$(this).attr("rel", $(this).css("color"));
			}
			//fade in the background
			$(this).parent().children("div")
				.stop()
				.css({"display": "none", "opacity": "1"})
				.fadeIn("fast");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){
			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250);
		});
	});
});

// Hide product description elements in small di=splays, only display the first 2 <p>'s and 1st <ul> in that order 
// by adding the ".first" class to those elements and hide the rest.
$(function(){
	//get each of the displayed products on the page into an array
	var mainBox2Array = $(".main_box2");
	var mainBoxSliderArray = $(".main_box_slider");
	//iterate over the array
	$.each(mainBox2Array, function() {
		//add the class name for css styles
		$(this).find(".product_description ul:lt(1), .product_description p:lt(1), ul:lt(1), p:lt(1)").addClass('first');
		//hide the remaining elements.
		$(this).find(".product_description ul li:gt(1), .product_description p:gt(1), li:gt(1), p:gt(1)").hide();
	});
	$.each(mainBoxSliderArray, function() {
		//add the class name for css styles
		$(this).find(".product_description ul:lt(1), .product_description p:lt(1), ul:lt(1), p:lt(1)").addClass('first');
		//hide the remaining elements.
		$(this).find(".product_description ul li:gt(1), .product_description p:gt(1), li:gt(1), p:gt(1)").hide();
	});
	var x=0;
});

// add "selected" style (like hover) to catalog menu item for large product display - unable to do this in BC
$(function(){
	//get title of page which is the name of the catalog and add as body element class.
	//$("body").addClass(document.title);
	//$("."+document.title "#"+document.title).addClass("selected");
	
});

// remove white spaces from product_template body id. 
// Eg: Singles and Kids => SinglesandKids, Mattresses and Ensembles => MattressesandEnsembles, Manchester and Accessories => ManchesterandAccessories
$(function(){
	
	if ($("body").attr('class')=="products_template"){
		var newId = $("body.products_template").attr("id").replace(/\s+/g, "");
		$(".products_template").attr('id', newId);
	}
});


// about page: change upsell ul's and li's to divs, to enable sliding 3 items at a time for jquery cycle plugin. BC does not allow you to control listing tagged products.
/*
LEAVE OUT FOR NOW

$(function(){
	var innerListArray = $(".upsell ul li .main_box2");
	var outerListArray = $(".upsell ul li.productItem:nth-child(3n+1)");
	//outerListArray = $.merge(outerListArray, $(".upsell ul li.productItem:nth-child(3n+1)"));
	var list =  $(".upsell ul li.productItem");
	var innerListArray = $(".upsell ul li .main_box2");
	$(".upsell ul").replaceWith("<div class=\"productfeaturelist\" style=\"position: relative; width: 283px; height: 222px; overflow: hidden;\"></div>");
	$(".upsell div").append("<ul></ul>");
	$(".upsell div").append(list);
	$.each(outerListArray, function() {
		$(this).appendTo(".upsell div ul");
		var x=0;
	});
	
});*/

// index.html - horizontal slider on large image
$(document).ready(function(){
				//Horizontal Sliding
	$('.boxgrid.slideright').hover(function(){
		$(".cover", this).stop().animate({left:'385px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({left:'578px'},{queue:false,duration:300});
	});
				
});