/** DESCR: swatch code for swatch colors, editro:msr, date:19.AUG.2007 **/
//window pop up for enlarged view
var winPhoto2;
function makeNewWindow2(img)
{
	winPhoto2 = window.open("","AltView","height=600,width=700,status=0,scrollbars=1,location=0,resizable=1");
	winPhoto2.document.open();
	winPhoto2.document.write('<html>');
	winPhoto2.document.write('    <head>');
	winPhoto2.document.write('        <title>');
	winPhoto2.document.write('Jumbo View');
	winPhoto2.document.write('        </title>');
	winPhoto2.document.write('<script lang=javascript>');
	winPhoto2.document.write('var largeimage = new Image();');
	winPhoto2.document.write('largeimage.src ="assets/images/alternates/' + pf_id + '_j.jpg"');
	winPhoto2.document.write('</script>');
	winPhoto2.document.write('    </head>');
	winPhoto2.document.write('    <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">');
	winPhoto2.document.write('<style>body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }</style>');
	winPhoto2.document.write('<div align="center">');
	winPhoto2.document.write('        <br><table width=400 height=400 border=0 cellpadding=3 cellspacing=3 align=center><tr><td>');
	winPhoto2.document.write("<img align=center src=\"assets/images/swatches/" + pf_id + "_j.jpg\" onerror=\"this.src='assets/images/spacer.gif'; this.width='1'; this.height='1'; document.getElementById('Message').style.visibility='visible'; document.getElementById('Message').style.display='block';\">");
	winPhoto2.document.write('</td></tr></table>');
	winPhoto2.document.write('<div id="Message" style="visibility: hidden; display: none;">');
	winPhoto2.document.write("We're sorry, but no large image is available.");
	winPhoto2.document.write('</div>');
	winPhoto2.document.write('    <br><a href="javascript:window.close();">Close</a>');
	winPhoto2.document.write('</div>');
	winPhoto2.document.write('    </body>');
	winPhoto2.document.write('</html>');
	winPhoto2.document.close();
	winPhoto2.focus();
	return false;
}

//this creates the table to hold the large images activated by image swap [display_Swatch() & imgSwatch(imgName) ]
function draw_image_2(){
	 if (product_image[1].scr=="PRODUCT" && product_image[1].image!="" ) { 
		if (product_image[1].image_show=="TARGET REG" || product_image[1].image_show=="TARGET" ){
			if (product_image[1].image_show=="TARGET REG"){
				if (user_guid==""){
					document.write("<A HREF=\"shopper_lookup.asp?target=" + product_image[1].target + "&\" onClick=return(visitargs('shopper_lookup.asp',\"target=" + product_image[1].target + "&\")); target=\"_top\" >");
				}else {
					document.write("<A HREF=\"" + product_image[1].target + "\" onClick=return(visitargs('" + product_image[1].target + "')); target=\"_top\" >");
				}
			}else {
				document.write("<a HREF=\"" + product_image[1].target + "\" target=\"_top\">");
			}
			document.write("<img name=\"mainimg\" id=\"mainimg\" ALIGN =" + product_image[1].align + " "); 
			if (product_image[1].width!=""){document.write("WIDTH =" + product_image[1].width + " ");}
			document.write(" BORDER=0  VSPACE=5  HSPACE=5 ALT=\"" + product_image[1].alt_text + "\" ");         
			document.write(" SRC=\"assets/product_images/" + product_image[1].image +"\"></a>");
		}else{
			//document.write("<A HREF=\"#\" onClick=\"return(makeNewWindow2(imgVersion));\" >");
			document.write("<img name=\"mainimg\" id=\"mainimg\" ALIGN =\"" + product_image[1].align + "\" "); 
			if (product_image[1].width!=""){document.write("WIDTH =" + product_image[1].width + " "); }
			document.write(" BORDER=0  VSPACE=5  HSPACE=5 ALT=\"" + product_image[1].alt_text + "\" ");         
			document.write(" SRC=\"assets/product_images/" + product_image[1].image +"\" >");//onerror=handleErr();></a>");
            var enlargeDiv ="<div id=\"enlarge\"><img src=\"assets/images/spacer.gif\" alt=\"\" width=65 height=18 border=0></div>";
		    document.write(enlargeDiv);
        }  	
	
	}
	else{
		document.write("<img src=\"assets/product_images/product.gif\">");
	}

}

var imgVersion = ""; // var to hold which image version / color for use in jumbo
function imgSwatch(imgName) {
        document.getElementById("mainimg").src="assets/images/swatches/" + pf_id + "_" + imgName + "_lg.jpg";
        
        //after changing swatch / larger image set which image version for popup jumbo
        imgVersion = imgName;      

        // Attempt to load the jumbo image
        var largeimage = new Image();
        largeimage.src ="assets/images/swatches/" + pf_id + "_" + imgName + "_j.jpg";

        // If the jumbo image exists...
        if(largeimage.complete){

            // Show the enlarge link
               //document.getElementById("enlarge").style.display = "block";
               document.getElementById("enlarge").innerHTML ="<A HREF=\"#\" onClick=\"return(makeNewWindow2(imgVersion));\" ><img src=\"assets/images/swatches/image_enlarge.gif\" alt=\"Click to Enlarge\" width=65 height=18 border=0 title=\"Click to Enlarge\"></a>";
        }else {
        // hideShow the enlarge link
               document.getElementById("enlarge").innerHTML ="<img src=\"assets/images/spacer.gif\" alt=\"\" width=65 height=18 border=0>";
        }

}

/** feature swatches: editor:cls, date:16.AUG.2007 **/
function display_Swatch()
{
	var array_largeimage;
	if (typeof info_attributes!="undefined" && info_attributes != "" && info_attributes != "default")
	{
		var thumbnails_array = info_attributes.split(",");
		var image_array;
		if (thumbnails_array.length >= 1)
		{
			//the number below changes the number of columns for the swatches
			var columns=3;
			var atn;
			atn=0;
			var myImage;
			var counter=1;
			var tableHdr ="<table id=\"swatches\" border=0><tr><td align=left width=100%><p>Available In:</p></td></tr><tr><td align=center width=100%><table border=0><tr>";
            var tableBtm ="</tr></table></div></td></tr></table>";
            
			document.write(tableHdr);			
			for (atn=0; atn<thumbnails_array.length; atn++) {
				if (thumbnails_array[atn]!="") {
					image_array = thumbnails_array[atn].split(":");
					//we only want the following logic for production, display swatches based on availability
					if (0) { //WJS - 45091 - show all swatches (i_jscript_uu_rootURL.indexOf("bahnhof.com") > 0) {
						//we are in prod, so we only want to show swatches for products that are available
						for (var prodIter=0;prodIter < product_var.length;prodIter++) {
							var prodName = product_var[prodIter].attr_value2;
							if ((prodName.indexOf(image_array[0]) >= 0) && (product_var[prodIter].avail > 0)) {
								document.write("<td align=center><table border=0 ><tr><td align=center><A HREF=\"#\" onClick=\"return false\" onmouseover=\"imgSwatch('"+image_array[1]+"')\" ><img NAME=\""+image_array[1]+"\" id=\""+image_array[1]+"\" src=\"assets/images/swatches/" + pf_id + "_" + image_array[1] + "_sm.jpg\"></A>");
								document.write("<br>"+image_array[0]+"</td></tr></table></td>");
								if (counter==columns){document.write("</tr><tr>");counter=0}
								counter = counter+1;
								break;
							}
						}
					} else {
						//we are in staging so show everything
						document.write("<td align=center><table border=0 ><tr><td align=center><A HREF=\"#\" onClick=\"return false\" onmouseover=\"imgSwatch('"+image_array[1]+"')\" ><img NAME=\""+image_array[1]+"\" id=\""+image_array[1]+"\" src=\"assets/images/swatches/" + pf_id + "_" + image_array[1] + "_sm.jpg\"></A>");
						document.write("<br>"+image_array[0]+"</td></tr></table></td>");
						if (counter==columns){document.write("</tr><tr>");counter=0}
						counter = counter+1;
					}
				}
			//counter = counter+1;
			}
			document.write(tableBtm);
		}
	}
} //end display_thumbnails


function draw_sku_option() {
	if (product_var.length >= 1 ){
		if(product_var.length==1){
			document.write("<TD> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>");
			document.write("<TR VALIGN=TOP ><TD class=ProductAttrlabel>" + attr_label[0] + "</TD><TD>");
			document.write("&nbsp;" + product_var[0].attr_value1 + "</TD></TR>");
			document.write("<TR VALIGN=TOP ><TD class=ProductAttrlabel>" + attr_label[1] + "</TD><TD>");
			document.write("&nbsp;" + product_var[0].attr_value2 + "</TD></TR>");
			document.write("<TR><TD colspan=2>" + product_var[0].avail_msg + "</TD>");
			document.write("<INPUT TYPE=HIDDEN id=\"sku\" NAME=sku VALUE=\"" + product_var[0].sku + "\" >");
			document.write("</TR></TABLE></TD>");
		}else{	
			document.write("<TD> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>");
			//document.write("<TR VALIGN=TOP ><TD class=ProductAttrlabel ><b>Select From:</b><br></TD></TR>");
			document.write("<TR><TD>");
			document.write("<SELECT class=ProductAttr NAME=sku  >");
			i=0;
			labelstr="";
			while (attr_label[i]!= "" && i < attr_values.length ) {
				labelstr=labelstr + attr_label[i] + " ";
				i++;
			}
			writeoption("",labelstr ,sel_values[0]);
			for (atn=0;atn< product_var.length ;atn++){
				if (product_var[atn].avail_msg != ""){product_var[atn].avail_msg=" - " + product_var[atn].avail_msg;}
				//logic to determine different behavior for staging vs production
				if (i_jscript_uu_rootURL.indexOf("bahnhof.com") > 0) {	
					//don't show products that are out of stock (avail < 0) on production
					if (product_var[atn].avail > 0) {	
						if (useVariantPrice=="True"){
							if (on_sale=="True"){
								writeoption(product_var[atn].sku,(product_var[atn].attr_value1 + " - " + product_var[atn].attr_value2 + " - $"+ OKStrOfPenny(product_var[atn].price_sale)) + product_var[atn].avail_msg + "" ,sel_values[0]);
							}else{
								writeoption(product_var[atn].sku,(product_var[atn].attr_value1 + " - " + product_var[atn].attr_value2 + " - $"+ OKStrOfPenny(product_var[atn].price_list)) + product_var[atn].avail_msg + "" ,sel_values[0]);
							}
						}else{
							writeoption(product_var[atn].sku,(product_var[atn].attr_value1 + " - " + product_var[atn].attr_value2) + product_var[atn].avail_msg + "",sel_values[0]);
						}
					}
				} else {
					//we are on staging so show everything	
					if (useVariantPrice=="True"){
							if (on_sale=="True"){
								writeoption(product_var[atn].sku,(product_var[atn].attr_value1 + " - " + product_var[atn].attr_value2 + " - $"+ OKStrOfPenny(product_var[atn].price_sale)) + product_var[atn].avail_msg + "" ,sel_values[0]);
							}else{
								writeoption(product_var[atn].sku,(product_var[atn].attr_value1 + " - " + product_var[atn].attr_value2 + " - $"+ OKStrOfPenny(product_var[atn].price_list)) + product_var[atn].avail_msg + "" ,sel_values[0]);
							}
						}else{
							writeoption(product_var[atn].sku,(product_var[atn].attr_value1 + " - " + product_var[atn].attr_value2) + product_var[atn].avail_msg + "",sel_values[0]);
						}
				}
			}
			document.write("</SELECT></TD>");	
			document.write("</TR></TABLE></TD>");
		}
	}
} //end draw_sku_option
