/** FEATURE BEGIN: Swatch with Jumbo for each swatch 
* DESCR: difference from regular popper_temple - allows jumbo image per swatch, not just one jumbo
* includes check to remove the "enlarge image" icon if there is not a jumbo image for a specific swatch 
* swatch thumbnails will still change the main prod image BUT removes click action on main product image 

requires function called in Prod page   draw_image_2(); & 
*******************************************************************/
//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 + "_" + img + "_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{
			//OLD CODE 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 +"\" >");// OLD CODE onerror=handleErr();></a>");
            
            // div to hold spacer or enlarge icon 
            var enlargeDiv ="<div id=\"enlarge\"><img src=\"assets/images/spacer.gif\" alt=\"\" width=65 height=18 border=0></div>";
		    document.write(enlargeDiv);
        }  	
	
	}
	else{
        // if no product image show default 
		document.write("<img src=\"assets/product_images/product.gif\">");
	}
}

/** var to hold which image suffix (red)  (Brick:red = pfid_red_j.jg)
passed from display_Swatch() to imgSwatch */
var imgVersion = ""; 

//altered from imgOn to accept suffix for swatch (Brick:red = pfid_red_lg.jg) from info attrib
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;      

        // Check if Jumbo for current swatch exists by 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 icon with make new window (popper) link
            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 {
        // remove link and icon replace with spacer
               document.getElementById("enlarge").innerHTML ="<img src=\"assets/images/spacer.gif\" alt=\"\" width=65 height=18 border=0>";
        }

}// end imgSwatch

/** feature swatches: editor:cls, date:29.AUG.2007 **/
function display_Swatch()
{
	var array_largeimage;
	if (typeof info_attributes!="undefined" && info_attributes != "" && info_attributes != "default")
	{
        //pull image suffix for swatch (Brick:red = pfid_red_sm.jg) from info attrib set in array
		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=5;
			var atn;
			atn=0;
			var myImage;
			var counter=1;
            //altered from original to decrease vertical space & put table in vars instead of doc writes
			var tableHdr ="<table border=0><tr><td align=center width=100%>Available In:</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(":");
					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\" border=0 style='border:1px solid #727374;'></A>");
					document.write("<br>"+image_array[0]+"</td></tr></table></td>");
					if (counter==columns){document.write("</tr><tr>");counter=0}
				}
			counter = counter+1;
			}
			document.write(tableBtm);
		}
	}
} //end display_Swatch