function SelectedColor(colored)
{
document.getElementById('TabStrip1_ddlColor').value=colored;
var clrname=document.getElementById('TabStrip1_ddlColor').options[document.getElementById('TabStrip1_ddlColor').selectedIndex].text;
document.getElementById("txtColor").innerHTML=clrname.toUpperCase();
}

function showcolor(colval){
var clrname=document.getElementById('TabStrip1_ddlColor').options[colval].text;
if (clrname != '--Select Color--') {
    document.getElementById("txtColor").innerHTML=clrname.toUpperCase();
}
else {
    document.getElementById("txtColor").innerHTML= '';
}

}

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){

	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 -1;
	} else {
		sbPosLeft=sBoxNewLeft;
	}
	imgTag='<img src="ColorPicture/' + img + 'L.jpg">';
	imgURL='ColorPicture/' + img + 'L.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);
	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');
}

{
	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>");

}