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

function initBrowseFurniture() {    
    $(".divBrwsThumb, .dvTile").hover(
		function() { zoomOver($(this), "on"); },
		function() { zoomOver($(this), "off"); }
	);

    maxTop = $("#dvFooterFull").offset().top;
    
	//if the case studies exist
	if ($("#divCaseStudyThumbs").length > 0) {	
		//used with old browse furniture page
		maxLeft = $("#divCaseStudyThumbs").offset().left;	    
	} else {
        //used with new browse furniture page        
		maxLeft = $("#dvProdThumbs").offset().left + $("#dvProdThumbs").width();
	}
}

var maxTop;
var maxLeft;

//**********************************************************************************
//** function controls hover actions
function zoomOver(jQO, Action) {    
    jQO.stop(true, true);

    if (Action == "on") {        
		/* used to delay the pop-up of the zoom image */
	    jQO.animate({ "borderLeftWidth": "0" }, 500, null, function () {            
            toggleBasket(jQO, "on");	        
	        toggleZoom(jQO, "on");
	    });
	} else {
		//transparent thumbnail
		//jQO.removeClass("OpaqueMe");
		toggleBasket(jQO, "off");
		toggleZoom(jQO, "off");		
	}
}

//**********************************************************************************
//**
function toggleZoom(jQO, Action) {
	var jQOid = jQO.attr("id");
	var htmlZoomId = jQOid + "_Zoom";
	var jQZoomId = "#" + jQOid + "_Zoom";

	//this is required to stop the icon animation when the function is called in the middle.
	$(jQZoomId).stop(true);

	if (Action == "on" && jQO.find(".imgBrwsThumb").eq(0).attr("alt_name") != undefined) {
		//get zoom image sources
		imgZoom = jQO.find(".imgBrwsThumb").eq(0).attr("alt_lgsrc");

		//get the series name
		strSeries = jQO.find(".imgBrwsThumb").eq(0).attr("alt_name");
				
		//offset
		var jQO_Offset = jQO.offset();
		var offsetTop = (jQO_Offset.top - 75);
		var offsetLeft = (jQO_Offset.left + jQO.width() + 6);		
		var zoomBoxWidth = 320; //square - height and width

		var offZoomTop = (offsetTop + zoomBoxWidth);
		var offZoomLeft = (offsetLeft + zoomBoxWidth);

		//control zoom window position;
		if (offZoomTop > maxTop) {
			offsetTop = (offsetTop - zoomBoxWidth + jQO.height() - 12 + 125);
		}

		if (offZoomLeft > maxLeft) {
			offsetLeft = (offsetLeft - jQO.width() - zoomBoxWidth - 12);
		}

		//make sure the zoom image never goes above the top of the browser window

		minTop = $("[alt_id='dvHeaderNavFull']").offset().top;
		if (offsetTop < (minTop + 10)) {
			offsetTop = offsetTop + (minTop - offsetTop) + 10;
		}		

		//Zoom Window
		var ZoomStyle = ""
		ZoomStyle += "position: absolute; ";
		ZoomStyle += "padding: 0px; ";
		ZoomStyle += "background: none; ";
		ZoomStyle += "top: " + offsetTop + "px; ";
		ZoomStyle += "left: " + offsetLeft + "px; ";
		ZoomStyle += "z-index: 300; ";
		ZoomStyle += "display: block; ";  
		
		var ZoomHTML = "";
		ZoomHTML += "<div id='" + htmlZoomId + "' style='" + ZoomStyle + "'>";
			ZoomHTML +=  "<div class='Shadow' style='position:relative; background-color:white;'>";
				ZoomHTML +=  "<div class='dsNorthWest'></div>";
				ZoomHTML +=  "<div class='dsNorth'></div>";
				ZoomHTML +=  "<div class='dsNorthEast'></div>";
				ZoomHTML +=  "<div class='dsWest'></div>";
				ZoomHTML +=  "<div class='dsEast'></div>";
				ZoomHTML +=  "<div class='dsSouthEast'></div>";
				ZoomHTML +=  "<div class='dsSouth'></div>";
				ZoomHTML +=  "<div class='dsSouthWest'></div>";
				ZoomHTML +=  "<div style='padding:10px; width: 300px;height: 320px;'>";
					ZoomHTML +=  "<b>" + strSeries + "</b><br/>";
					ZoomHTML +=  "<img style='width: 300px; height: 300px;' src='" + imgZoom + "' />";
				ZoomHTML += "</div>";
			ZoomHTML += "</div>";
		ZoomHTML += "</div>";
		

		$("body").append(ZoomHTML);
		//$("#" + htmlZoomId).fadeIn(450); used to fade in image
		
		
	} else {
	//Remove Zoom Window
		$("body").stop(true, true);
		$(jQZoomId).stop(true, true);
		$(jQZoomId).remove();

	}


}

//**********************************************************************************
//** Creates the ToBasket icon for the image and toggles the basket button over the 
//** thumbnails on product filter
function toggleBasket(jQO, Action) {
	var basketStyle = "";
	basketStyle += "position: absolute; ";
	basketStyle += "padding: 0px; ";
	basketStyle += "background-color: transparent; ";
	basketStyle += "border: solid 0px black; ";
	basketStyle += "z-index: 500; ";
	basketStyle += "display: inline; ";
	basketStyle += "height: 20px; ";
	basketStyle += "overflow: hidden; ";
	basketStyle += "cursor: pointer; ";
	basketStyle += "top: 2px; ";
	basketStyle += "left: 53px; ";


	//this is required to stop the icon animation when the function is called in the middle.
	var elBasketID = jQO.attr("id") + "_ToBasket";
	var jBasketID = "#" + jQO.attr("id") + "_ToBasket";
	$(jBasketID).stop();

	if (Action == "on" && $(jBasketID).length == 0) {
		//crate ToBasket Icon
		var basketHTML = "";
		basketHTML += "<div style='" + basketStyle + "' ";
		basketHTML += " id='" + elBasketID + "' ";
		basketHTML += " alt='Add' alt_ID='" + jQO.attr("alt_ID") + "' ";
		basketHTML += " alt_TYPE='" + jQO.attr("alt_TYPE") + "' ";
		basketHTML += " alt_IMG='" + jQO.attr("alt_IMG") + "' ";
		basketHTML += " alt_EL='" + jQO.attr("alt_EL") + "' >";
		basketHTML += " <img title='Add Product Series to Brochure Builder' border='0' src='/images/icons/gray matte/fill art with stroke/AddtoBrochure_FAS_G.gif'>";
		basketHTML += "</div>";
		
		jQO.append(basketHTML);

		$(jBasketID).click(function() {
			actionAddToBasket($(jBasketID));
		});

	} else {
		$(jQO).stop(true);
		$(jBasketID).stop(true, true);
		$(jBasketID).remove();

	}


}