﻿var kShadowPadding = 17;

// default index into the size arrays below, which determine magnifier div size;
// set this to determine which magnifier displays when page is loaded ([none] || [small] || [med] || [large])
// (can't be set to index 0 when page loads though)
var kDefaultMagnifierSize = 1;

// array of sizes used for magnifier div's width and height (associated with buttons [none], [small], [med], [large])
var kMagnifierSizes = new Array(0, 100, 150, 300);

// displayed text for buttons (buttons are spans)
var kMagnifierSizeNames = new Array('off', 'small', 'medium', 'large');

var kDefaultXMultiplier = 2;
var kDefaultYMultiplier = 2;

function MagnifierPosition()
{	
	this.style.left = Math.round(this.xPosition - 1 - this.size/2) + "px"; // -1 to account for the border
	this.style.top = Math.round(this.yPosition - 1 - this.size/2) + "px";
	
	this.shadow.style.left = Math.round(this.xPosition - this.size/2 - kShadowPadding) + "px";
	this.shadow.style.top = Math.round(this.yPosition - this.size/2 - kShadowPadding) + "px";
	
	
	var magnifierCenterX = Math.round(this.xPosition * this.xMultiplier - this.size/2);
	var	magnifierCenterY = Math.round(this.yPosition * this.yMultiplier - (this.size * 3/4));
	
	if(!isFinite(magnifierCenterX)){
		magnifierCenterX = Math.round(this.xPosition * this.kDefaultXMultiplier - this.size/2);
	}
	if(!isFinite(magnifierCenterY)){
		magnifierCenterY = Math.round(this.yPosition * this.kDefaultYMultiplier - this.size/2);
	}
	
	
	this.style.backgroundPosition = -magnifierCenterX + "px " + -magnifierCenterY + "px";
	
}

function ControllerSizeButtonClick(event)
{
	if (!event) event = window.event;
	var button = event.currentTarget || event.srcElement;
	button.parentNode.magnifier.resize(button.magnifierSize);
}

function MagnifierResize(size)
{
	this.size = kMagnifierSizes[size];
	
	for (var i=0; i < this.controller.sizeButtons.length; i++)
	{
		if (i == size)
			this.controller.sizeButtons[i].className = "magnifierControllerButtonSelected";
		else
			this.controller.sizeButtons[i].className = "magnifierControllerButton";
	}
	
	if (this.size == 0)
	{
		this.shadow.style.display = "none";
		this.style.display = "none";
	}
	else
	{
		var shadow = this.shadow;
		var shadowSize = this.size + 2 * kShadowPadding;
		
		// MSIE 5.x/6.x must be treated specially in order to make them use the PNG alpha channel
		var shadowImageSrc = "shadow" + size + ".png";
		if (shadow.runtimeStyle)
			shadow.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
										 shadowImageSrc +
										 "', sizingMethod='scale')";
		else
			shadow.style.backgroundImage = "url(" + shadowImageSrc + ")";
		shadow.style.width = shadowSize + "px";
		shadow.style.height = shadowSize + "px";
		shadow.style.display = "block";
		
		if (this.runtimeStyle)	// msie counts the border as being part of the width
			this.size += 2;		// must compensate
		
		this.style.width = this.size + "px";
		this.style.height = this.size + "px";
		this.style.display = "block";
		this.position();
	}
}

function MagnifierMouseDown(event)
{
	if (!event) event = window.event;
	
	document.body.magnifier = this;
	this.inDrag = true;
	if (event.pageX)		{this.startX = event.pageX; this.startY = event.pageY;}
	else if (event.clientX)	{this.startX = event.clientX; this.startY = event.clientY;}
	else					{alert("don't know how to get position out of event"); return;}
	this.savedCursor = this.style.cursor;
	this.style.cursor = "crosshair";
}

function MagnifierMouseUp()
{
	if (this.inDrag)
	{
		this.inDrag = false;
		this.style.cursor = this.savedCursor;
		document.body.magnifier = null;
	}
}

function MagnifierDrag(event)
{
	if (!event) event = window.event;
	var magnifier = this.magnifier; // we're actually in the body's onmousemove handler
	
	if (magnifier && magnifier.inDrag)
	{
		var eventX;
		var eventY;
		
		if (event.pageX) {eventX = event.pageX; eventY = event.pageY;}
		else if (event.clientX) {eventX = event.clientX; eventY = event.clientY;}
		else {return;}
		
		magnifier.xPosition += eventX - magnifier.startX;
		magnifier.yPosition += eventY - magnifier.startY;
		
		magnifier.startX = eventX;
		magnifier.startY = eventY;
		
		magnifier.position();
	}
}

function MagnifiedImageError(){
	alert("Unable to display magnified image");
	return true;
}

function ProductImageError(){
	alert("Unable to display product image");
	return true;
}

function setMaxWidth() {
	//alert("maxwidth");
	//document.getElementById("baseImage").style.maxWidth="340px";
}

function ActivateMagnifier() {
	loadMagnifier(document.getElementById("prodid"));
}

function loadMagnifier(prodID, mediumImage, largeImage)
{	
	var preloadZoomImage = null;
	var zoomedImage = null;
	var tempImage = null;
	var normalImage = null;
	var zoomedURL = "";
	var displayURL = "";
	var zoomW = 0;
	var zoomH = 0;
	var displayW = 0;
	var displayH = 0;


	//:::::::::::::::::::  Create the Zoomed Image  ::::::::::::::::::::::

	preloadZoomImage = document.getElementById("zoomImage");
	
	if (!preloadZoomImage) { alert("Unable to display magnified image"); return false; }
	
	// runtime error occurs if trying to set error handler and preloadZoomImage 
	// object doesn't exist (in case no large image exists for this product)

	preloadZoomImage.onerror = MagnifiedImageError;
	
	// runtime error occurs if trying to get width and preloadZoomImage object doesn't exist 
	//(in case no large image exists for this product)
	
//	zoomW = preloadZoomImage.width;
//	zoomH = preloadZoomImage.height;
	preloadZoomImage.style.display = "none";
	

		zoomedURL = prodID;
		
		var largeImage = new Image();
		largeImage.src = prodID;
		zoomW = largeImage.width;
		zoomH = largeImage.height;

	

	//::::::::::::::::::   Get the Product Display Image  :::::::::::::::::

	normalImage = document.getElementById("baseImage");
	if (!normalImage) {alert("Unable to display product image"); return false;}
	normalImage.onerror = ProductImageError;
	displayURL = normalImage.src;
	displayW = normalImage.width;
	displayH = normalImage.height;
	
	tempImage = document.createElement("img");
	tempImage.onerror = ProductImageError;
	tempImage.src = displayURL;
//	displayW = tempImage.width;
//	displayH = tempImage.height;
	tempImage = null;
	
	
	
	//::::::::::::::::::::  Create Magnifier  ::::::::::::::::::::::::::
	
	// get div container for display image's img tag
	var base = document.getElementById("binding");
	
	// create magnifier div
	var magnifier = document.createElement("div");	

	// determine factors to multiply the displayed image width and height by, 
	// such that the products equal zoomed image width and height. error check 
	// is to avoid division by 0 or division by 'Infinity'.
	
	// Note: we will assume larger image has same w/h ratio as smaller displayed image.
	//		 maintaining the ratio will be left up to the customer.	
	
	// due to differences in execution of code in IE and Firefox, the only way to be sure
	// that a valid magnified image width and height was obtained is to set a min limit for
	// magnified width. if width is less than min limit, use default multipliers.
	
	//alert("zoomW/displayW is " + zoomW/displayW);
	//alert("zoomH/displayH is " + zoomH/displayH);
	
//	if (!isFinite(displayW) || !isFinite(zoomW) || displayW == 0 || zoomW == 0){
//		magnifier.xMultiplier = kDefaultXMultiplier;
//	}else{
//		magnifier.xMultiplier = zoomW/displayW;
//	}
//	if (!isFinite(displayH) || !isFinite(zoomH) ||  displayH == 0 || zoomH == 0 ){
//		magnifier.yMultiplier = kDefaultYMultiplier;
//	}else{
//		magnifier.yMultiplier = zoomH/displayH;
//	}

    
	magnifier.xMultiplier = kDefaultXMultiplier;
	magnifier.yMultiplier = kDefaultYMultiplier;
	
	var noNulls = mediumImage.height != null && mediumImage.width != null && largeImage.height != null && largeImage.width != null;
	var noZeros = mediumImage.height != 0 && mediumImage.width != 0 && largeImage.height != 0 && largeImage.width != 0;
	
	if (noNulls && noZeros)
	{
	    magnifier.xMultiplier = largeImage.width / mediumImage.width;
	    magnifier.yMultiplier = largeImage.height / mediumImage.height;
	}

	
                                                                    //	var largeimage = new Image();
                                                                    //	largeimage.src = prodID;
                                                                    //	var largeloaded = false;

                                                                    //	
                                                                    //	var mediumimage = new Image();
                                                                    //	mediumimage.src = medImage;
                                                                    //	var mediumloaded = false;

                                                                    //    largeimage.onload =
                                                                    //    function (){ largeloaded = true;}
                                                                    //    
                                                                    //    mediumimage.onload = 
                                                                    //    function (){ medium = true;}
                                                                    //    
                                                                    //    
                                                                    //    var i = 0;
                                                                    //    while( i < 10 && largeloaded == false && mediumloaded == false)
                                                                    //    {
                                                                    //        alert("waiting...");
                                                                    //    }
                                                                    //	
                                                                    //	alert(mediumimage.height);
                                                                    //	alert(mediumimage.width);
                                                                    //	alert(largeimage.height);
                                                                    //	alert(largeimage.width);
	
	
	
	
	//alert("x:" +magnifier.xMultiplier + " y:" +magnifier.yMultiplier);
	
	
	// in function MagnifierResize(size), the magnifier div's width and height will be set to magnifier.size
	magnifier.size = kMagnifierSizes[kDefaultMagnifierSize];
	
	
	// set centerpoint of magnifier div when page loads (magnifier.xPosition, magnifier.yPosition)
	
	if (displayW != 0) {
		// use these algorithms for IE because it knows width and height of dispayed image...
		magnifier.xPosition = Math.round(.40 * displayW);						// set default x position to 40% of total width of display image
		//magnifier.yPosition = Math.round(displayH - magnifier.size/2 - 5);	// set default y position such that magnifier's bottom edge sits above buttons  
		magnifier.yPosition = Math.round(displayH - magnifier.size/2);			// readjusted it
	}else{
		//magnifier.xPosition = magnifier.size/2;		// when Firefox first loads, the magnifier is in top left corner.
		//magnifier.yPosition = magnifier.size/2;		// once large image is downloaded, if user looks at image again, magnifier will
													    // use the above algorithms for IE because Firefox will know displayW by then
		magnifier.xPosition = magnifier.size;		// moved initial position of magnifier when Firefox first loads because with
		magnifier.yPosition = magnifier.size;		// above algorithim's it goes to top left corner of div id="binding". i used											
													// to have top left corner of image match the top left corner of div, but i 
													// now have a margin separating edge of div and display image.											
	}
	
	
	// set properties of magnifier div
	if (document.getElementById("bindingMagnifier"))
	{
	    base.removeChild(document.getElementById("bindingMagnifier"));
	}
	
	magnifier.id = "bindingMagnifier";
	magnifier.className = "magnifier";
	magnifier.style.backgroundImage = "url(" + zoomedURL + ")";		// set dynamic style
	magnifier.style.backgroundColor = "#220f01";
	
	// set event handlers of magnifier div
	
	magnifier.onmousedown = MagnifierMouseDown;
	magnifier.onmouseup = MagnifierMouseUp;
	document.body.onmousemove = MagnifierDrag; // we attach this handler to the body because if the user moves
											   // the mouse fast enough, it'll go outside the boundaries of the
											   // magnifier, and then the magnifier's mousemove handler won't fire
	magnifier.position = MagnifierPosition;
	magnifier.resize = MagnifierResize;
	
	
	
	//::::::::::::::::::::  Create Spans  ::::::::::::::::::::::::::

	
	// create controller span (this span contains displayed text, [magnifier: ], and the span buttons [off] [small] [medium] [large])

	
	var controller = document.createElement("span");
	controller.id = "bindingMagnifierController";
	controller.className = "magnifierController";
	
	
	// create controllerPrefix span (this span contains displayed text,  [magnifier: ])
	
	var controllerPrefix = document.createElement("span");
	controllerPrefix.innerHTML = "magnifier:&nbsp;";
	controllerPrefix.className = "magnifierControllerPrefix";
	//controllerPrefixonclick = ActivateMagnifier;
	

	// append controllerPrefix span and button spans to controller span	
	
	controller.appendChild(controllerPrefix);
	controller.sizeButtons = new Array(kMagnifierSizes.length);
	
	for (var i=0; i < kMagnifierSizes.length; i++)
	{
		// create button spans (spans for buttons [off] [small] [medium] [large])
		
		var button = document.createElement("span");		
		button.innerHTML = kMagnifierSizeNames[i];
		button.className = "magnifierControllerButton";
		button.onclick = ControllerSizeButtonClick;
		button.magnifierSize = i;
		
		controller.sizeButtons[i] = button;
		controller.appendChild(button);
	}
	
	
	
	//::::::::::::   Create Shadow and Set Pointers   ::::::::::::::::
	
	
	// create shadow div
	
	var shadow = document.createElement("div");
	shadow.id = "bindingMagnifierShadow";
	shadow.className = "magnifierShadow";
	
	
	// point objects at each other
	
	magnifier.controller = controller;
	controller.magnifier = magnifier;
	magnifier.shadow = shadow;
	
	
	
	//::::::::::::   Add to Document and Layout   ::::::::::::::::
	
	
	// create controllerContainer div
	
	if (document.getElementById("magnifierControllerContainer"))
	{
	    base.removeChild(document.getElementById("magnifierControllerContainer"));
	}

	var controllerContainer = document.createElement("div");
	controllerContainer.className = "magnifierControllerContainer";
	controllerContainer.id = "magnifierControllerContainer";
	
	
	// append controller span to controllerContainer div

	controllerContainer.appendChild(controller);
	
	
	// append magnifier div, shadow div, and controllerContainer div to base div

	base.insertBefore(controllerContainer, document.getElementById("message"));
	//removed by vortx because it was covering the magnifier size links
	//base.appendChild(shadow);
	base.appendChild(magnifier);
	magnifier.resize(kDefaultMagnifierSize);	// also positions
}

/* Copyright (c) 2006 Patrick Fitzgerald */

function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}