/*
 * Global var used for saicoswap
 */
//var selectedColor="";
var selectedColor= new Array(6);
selectedColor[0]="";
selectedColor[1]="";
selectedColor[2]="";
selectedColor[3]="";
selectedColor[4]="";
selectedColor[5]="";
var mainSwatchActive = false
var mainSwatchContainer = "swatchContainer0";


/*******************
* Browser checking *
********************/
var NS4 = (document.layers)? true:false;
var IE4 = (document.all)? true:false;
var IE5 = false;
var GECKO = false;
if (IE4) {	
	if (navigator.userAgent.indexOf('MSIE 5')>0) {	
		IE5 = true;	
	}
}

if(navigator.userAgent.indexOf("Gecko") != -1)
{
	GECKO = true;
}

/********************************************
* function rollDesc(String desc, int divID) *
*********************************************
 function for writing swatch color 
 description to a layer on rollover
*/

function rollDesc(desc,colorNumber,divID)
{

	var myLyr = "swatchDesc" + divID;
	if (IE4)
	{
		myLyr=eval(myLyr);
		myLyr.innerHTML = "Color: "+ desc + " (" + colorNumber + ")"; 
	}
	else if (GECKO)
	{
		document.getElementById(myLyr).innerHTML = "Color: "+ desc + " (" + colorNumber + ")";
	}
	else{
	}
}

function rollDescOut(desc,divID)
{

	var myLyr = "swatchDesc" + divID;
	if (IE4)
	{
		myLyr=eval(myLyr);
		myLyr.innerHTML = "Color: "+ desc; 
	}
	else if (GECKO)
	{
		document.getElementById(myLyr).innerHTML = "Color: "+ desc;
	}
	else{
	}
}


/********************************************
* function rollText(String desc, int divID) *
*********************************************
 function for highlighting text if you rollover the image or other text
*/

function rollText(divID,mystyle)
{

	var myLyr = "TextDesc" + divID;
	var myLyr2 = "ItemDesc" + divID;
	if (IE4)
	{
		myLyr=eval(myLyr);
		myLyr2=eval(myLyr2);
		myLyr.style.textDecoration = mystyle; 
		myLyr2.style.textDecoration = mystyle; 
	}
	else if (GECKO)
	{
		document.getElementById(myLyr).style.textDecoration = mystyle;
		document.getElementById(myLyr2).style.textDecoration = mystyle;
	}
	else{
	}
}
/**************************************************
* function rollDesc(String imageURL, int imageID) *
***************************************************
 function for swapping images when a swatch is
 clicked on
*/
function swapSwatchImage(imageURL,imageID,prnbr,isSaico,index,blockId,desc, dispMode)
{
	document.images["primaryImage_" + imageID].src = imageURL;
	if(isSaico){
		var tempNumber = prnbr.split("-");
		var itemNumber = tempNumber[1];
		var image1 = new Image();
	}
}


function swapPrimarySwatchImage(imageURL,imageID,prnbr,isSaico,index,blockId,desc, dispMode)
{
	document.images["primaryImage_" + imageID].src = imageURL;
	var myLyr = "primaryDesc";
	if (IE4)
	{
		myLyr=eval(myLyr);
		myLyr.innerHTML = "COLOR: "+ desc; 
	}
	else if (GECKO)
	{
		document.getElementById(myLyr).innerHTML = "COLOR: "+ desc;
	}
	else{
	}
}

function popLargeSwatchWindow(imageURL,imageID,prnbr,isSaico,index,blockId,desc, dispMode)
{
	window.open('/commerce/application?namespace=moreInfo&prnbr='+prnbr+'&moreInfoInd=largeColors&blockId='+blockId+'&index='+index+'&dispMode='+dispMode,'infowin','resizable,height=542,width=500');
}


function saicoSwapImg(groupListIndex, swapFile, color){
	if( isWidePage == 1)
	{
		saicoSwapImgWide(groupListIndex, swapFile, color);
	} 
	else
	{
		alert(isWidePage)
		var newImg = new Image();
		newImg.src=swapFile;
		newImg.onload = function () { document.images["primaryImage_" + groupListIndex].src = newImg.src; }
		newImg.src = swapFile;
		selectedColor[Number(groupListIndex)] = color;	
	}
}

function saicoSwapImgWide(groupListIndex, swapFile, color){
	var vsImage = document.getElementById("vsImage");
	if(typeof(zoom_included) != "undefined" && zoom_included == true && 
			flashEnabled() && (zoom_cookie == 'B' || zoom_cookie == 'C') &&
			zoom_activated === true && mainSwatchActive === true )
	{
		zoomFile = swapFile.replace("prodpri", "prodzoom");
		swapFile = swapFile.replace("prodpri", "prodpri2");
		var flashXML = 	"<swatch ID = '"+color+"' default = '"+groupListIndex+"'>" +
						"<assetURL><![CDATA["+swapFile+"]]></assetURL>" +
						"<zoomURL><![CDATA["+zoomFile+"]]></zoomURL>" +
						"</swatch>";
		toggleSWFSwatch(flashXML)
	}
	else
	{
		if (groupListIndex > 0) {
			vsImage = document.getElementById("vsImage_"+groupListIndex);
		}
		var newImgSrc = vsImage.src;
		//HG: added an additional condition to avoid the src change if the source is not primary image.
		if (vsImageSwapped && groupListIndex == 0) {
		// need to adjust state of drawer styles
			newImgSrc = scottImgDrawer[0];
			for (var j = 0; j < scottImgDrawer.length; j++) {
				var dimg = document.getElementById("drawerimg_"+j);
				dimg.style.border = "1px solid #999999";   
			}	
			var dimg2 = document.getElementById("drawerimg_0");
			dimg2.style.border = "1px solid #FF0000";   
		}
		var lidx = newImgSrc.indexOf("_");
		if (newImgSrc.indexOf("_") > 0) {
			idx = newImgSrc.length - lidx;
		} else {
			idx = 4;
		}
		var newSrc = newImgSrc.substr(0,newImgSrc.length-idx) + "_" + color + ".jpg";
		//var tmpImage = new Image();
		//tmpImage.src = newSrc;
		//tmpImage.onload = function () { vsImage.src = tmpImage.src; }
		//vsImage.src = newSrc;

		var tmpImage = new Image();
		tmpImage.src = newSrc;
		tmpImage.onload = function () { 
			if (tmpImage.width >0) {
				vsImage.src = tmpImage.src;
			}
		}
		vsImage.src = tmpImage.src;
	}
}

function moveElement(id, x, y)
{
    if (document.getElementById)
    {
        document.getElementById(id).style.left = x + 'px';
        document.getElementById(id).style.top = y + 'px';
    }
}
function showElement(id)
{
    if (document.getElementById)
    {
        if (document.getElementById(id))
        {
            document.getElementById(id).style.visibility = 'visible';
        }
    }
}
function hideElement(id)
{
    if (document.getElementById)
    {
        if (document.getElementById(id))
        {
            document.getElementById(id).style.visibility = 'hidden';
        }
    }
}
function swapHtml(id, html)
{
    if (document.getElementById)
    {
        if (document.getElementById(id))
        {
            document.getElementById(id).innerHTML = html;
        }
    }
}

function moveSwatch(index, swatchDiv, colorDesc, img, isSaico){
	if(isWidePage == 1){
		if(swatchDiv.parentNode.id == mainSwatchContainer)
			mainSwatchActive = true;
		moveSwatchWide(index, swatchDiv, colorDesc, img, isSaico);
	}else{
		moveSwatchOriginal(index, swatchDiv, colorDesc, img, isSaico);
	}
}

function moveSwatchOriginal(index, swatchDiv, colorDesc, img, isSaico){
	sCont=document.getElementById("swatchContainer" + index);
	sBCont=document.getElementById("bodycontainer");
	
	sContTop = sCont.offsetTop + sBCont.offsetTop;
	sContLeft = sCont.offsetLeft + sBCont.offsetLeft;
	sContWidth = sCont.offsetWidth;
	sContRight = sContLeft+sContWidth;
	
	sBox=document.getElementById("SwatchBox");
	sBoxTop = sBox.offsetTop;
	sBoxLeft = sBox.offsetLeft;
	sBoxWidth = sBox.offsetWidth;
	sBoxHeight = sBox.offsetHeight;
	
	sBoxNewLeft = sContLeft + (swatchDiv.offsetLeft + (swatchDiv.offsetWidth / 2) ) - (sBoxWidth/2)
	sBoxNewRight = sBoxNewLeft + (sBoxWidth)
	if ((sBoxNewLeft) < (sContLeft)) {
		sbPosLeft=sContLeft;
	} else if ((sBoxNewRight) > (sContRight )){
		sbPosLeft=sContRight - sBoxWidth -4;
	} else {
		sbPosLeft=sBoxNewLeft;
	}
	imgTag='<img src="' + img + '">';
	imgURL='' + img + '';
	showSwatch(index);

	var IfrRef = document.getElementById('DivShim');
	IfrRef.style.width = sBox.offsetWidth;
    IfrRef.style.height = sBox.offsetHeight;
    IfrRef.style.top = sBox.style.top;
    IfrRef.style.left = sBox.style.left;
    IfrRef.style.zIndex = 999;

	moveElement('DivShim', sbPosLeft, sContTop-sBoxHeight-1);
	moveElement('SwatchBox', sbPosLeft, sContTop-sBoxHeight-1);
	swapHtml('SwatchBoxColorDesc', colorDesc);
	if (isSaico){
		swapHtml('SwatchBoxAction', "click to change color in photo.");
	} else {
		swapHtml('SwatchBoxAction', "");
	}
	//document.images["SwatchBoxImg"].src = imageURL
	
	swapHtml('SwatchBoxImg', imgTag);
}

function moveSwatchWide(index, swatchDiv, colorDesc, img, isSaico){
	sCont=document.getElementById("swatchContainer" + index);
	sBCont=document.getElementById("bodycontainer");
	var bodyPos = getPosition(sBCont);
	var divPos = getPosition(swatchDiv); // this logic is in newproduct.js
	var contPos = getPosition(sCont);
	sContTop = sCont.offsetTop + sBCont.offsetTop;
	sContLeft = sCont.offsetLeft + sBCont.offsetLeft;
	sContWidth = sCont.offsetWidth;
	sContRight = sContLeft+sContWidth;
	
	sBox=document.getElementById("SwatchBox");
	sBoxTop = sBox.offsetTop;
	sBoxLeft = sBox.offsetLeft;
	sBoxWidth = sBox.offsetWidth;
	sBoxHeight = sBox.offsetHeight;
	
	sBoxNewRight = divPos.x + sBoxWidth;
	
	sBoxNewLeft = sCont.offsetLeft - sBCont.offsetLeft + (swatchDiv.offsetLeft + (swatchDiv.offsetWidth / 2) ) - (sBoxWidth/2);
	//alert(sContRight);
	//divPos.x = contPos.x;
	if (divPos.x != contPos.x) {
		divPos.x = contPos.x + 11;
	}

	imgTag='<img src="' + img + '';
	imgURL='' + img + '';
	showSwatch(index);

	var IfrRef = document.getElementById('DivShim');
	IfrRef.style.width = sBox.offsetWidth;
    IfrRef.style.height = sBox.offsetHeight;
    IfrRef.style.top = sBox.style.top;
    IfrRef.style.left = sBox.style.left;
    IfrRef.style.zIndex = 999;

	moveElement('DivShim', divPos.x, sCont.offsetTop-sBoxHeight);
	moveElement('SwatchBox', divPos.x, sCont.offsetTop-sBoxHeight);
	swapHtml('SwatchBoxColorDesc', colorDesc);
	if (isSaico){
		swapHtml('SwatchBoxAction', "click to change color in photo.");
	} else {
		swapHtml('SwatchBoxAction', "");
	}
	//document.images["SwatchBoxImg"].src = imageURL
	
	swapHtml('SwatchBoxImg', imgTag);
}

dispSwatch=false;
function hideSwatch(index){
	dispSwatch=false;
	mainSwatchActive = false;
	setTimeout('doHideSwatch()',100);
}
function doHideSwatch(index){
	if(!dispSwatch){
		var IfrRef = document.getElementById('DivShim');
		IfrRef.style.display = "none";
		hideElement('SwatchBox');
	}
}
function showSwatch(index){
	dispSwatch=true;
	var IfrRef = document.getElementById('DivShim');
	IfrRef.style.display = "block";
	showElement('SwatchBox');
}

{
	document.write("<div class=\"SwatchBox\" id=\"SwatchBox\">");
	document.write(	"<div class=\"SwatchBoxImg\" id=\"SwatchBoxImg\"></div>");
	document.write(	"<div class=\"SwatchBoxText\">");
	document.write(		"<div class=\"SwatchBoxColorDesc\" id=\"SwatchBoxColorDesc\"></div>");
	document.write(		"<div class=\"SwatchBoxAction\" id=\"SwatchBoxAction\"></div>");
	document.write(	"</div>");
	document.write("</div>");
	document.write("<iframe class=\"DivShim\" id=\"DivShim\" src=\"javascript:false;\" scrolling=\"no\" frameborder=\"0\" style=\"position:absolute; top:0px; left:0px; display:none;\"></iframe>");

}