/*
 * Global var used for saicoswap

Example Usage:

  <div class="swatchContainer" id="swatchContainer1">

	<div class="swatch" onMouseOver="moveSwatch(1,this, '990-warm nude','V802003_990', false);" onMouseOut="hideSwatch(1);">
	  <a href="javascript: void {};" class="swatchLink">
	  <img src="/images/swatchsm/V802003_990.jpg" border="0" class="swatchImg">
	  </a>
	</div>
	<div class="swatch" onMouseOver="moveSwatch(1,this, 'h27-sweet pink','V808013_H27', false);" onMouseOut="hideSwatch(1);">
	  <a href="javascript: void {};" class="swatchLink">
	  <img src="/images/swatchsm/V808013_H27.jpg" border="0" class="swatchImg">
	  </a>
	</div>

  </div>
  <div style="clear:both;"></div>

 */
//var selectedColor="";
var selectedColor= new Array(6);
selectedColor[0]="";
selectedColor[1]="";
selectedColor[2]="";
selectedColor[3]="";
selectedColor[4]="";
selectedColor[5]="";


/*******************
* 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,divID)
{

	var myLyr = "swatchDesc" + divID;
	if (IE4)
	{
		myLyr=eval(myLyr);
		myLyr.innerHTML = "COLOR:&nbsp;"+ desc; 
	}
	else if (GECKO)
	{
		document.getElementById(myLyr).innerHTML = 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:&nbsp;"+ desc; 
	}
	else if (GECKO)
	{
		document.getElementById(myLyr).innerHTML = "COLOR:&nbsp;"+ desc;
	}
	else{
	}
}

function saicoSwapImg(groupListIndex, swapFile, color){
	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 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, swatchForcedWidth, swatchForcedHeight){

	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");
	sBox.style.width = swatchForcedWidth+14;
	sBox.style.height = swatchForcedHeight+46;
	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 + '">'; /* imgTag='<img src="/images/swatchlg/' + img + '.jpg">'; */
	imgURL='/images/swatchlg/' + img + '.jpg'; /* imgURL='/images/swatchlg/' + img + '.jpg'; */
	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);
}

dispSwatch=false;
function hideSwatch(index){
	dispSwatch=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');
}

{
	//if(swatchForcedWidth && swatchForcedHeight) { swatchCustomDims = " style=\"width: "+swatchForcedWidth+"; height: "+swatchForcedHeight+";\""; }
	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>");
/* 
	SWH Noticed Problem in JavaScript according to debugger 2006-07-21 - src on line below contains "javascript:false;" which doesn't appear to be correct
*/
	document.write("<iframe class=\"DivShim\" id=\"DivShim\" src=\"javascript:false;\" scrolling=\"no\" frameborder=\"0\" style=\"position:absolute; top:0px; left:0px; display:none;\"></iframe>");

}