var storedImage = "";

var winPhoto;
function makeNewWindow(path,title)
{
	winPhoto = window.open("","AltView","height=500,width=500,status=0,scrollbars=0,location=0,resizable=1");
	winPhoto.document.open();
	winPhoto.document.write('<html>');
	winPhoto.document.write('    <head>');
	winPhoto.document.write('        <title>');
	winPhoto.document.write(title);
	winPhoto.document.write('        </title>');
	winPhoto.document.write('<script lang=javascript>');
	winPhoto.document.write('var largeimage = new Image();');
	winPhoto.document.write('largeimage.src ="' + path + '";');
	winPhoto.document.write('function imageDNE(imageId){');
	winPhoto.document.write('var imageElement = document.getElementById(imageId);');
	winPhoto.document.write('imageElement.removeAttribute("src");');
	winPhoto.document.write('imageElement.setAttribute("src", "assets/images/Image%20NA.gif");');
	winPhoto.document.write('imageElement.removeAttribute("onLoad");');
	winPhoto.document.write('window.resizeTo(200, 300);');
	winPhoto.document.write('}');	
	winPhoto.document.write('</script>');
	winPhoto.document.write('    </head>');
	winPhoto.document.write('    <body style="margin:0px; padding: 0px;">');
	winPhoto.document.write('    <table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">');
	winPhoto.document.write('      <tr>');
	winPhoto.document.write("        <td align=\"center\" class=\"dept_products_in\"><img id=\"jumbo\" align=\"center\" src=\"" + path + "\" onLoad=\"window.resizeTo(largeimage.width+100,largeimage.height+260);\" onerror=\"imageDNE('jumbo');\"></td>");
	winPhoto.document.write('      </tr>');
	winPhoto.document.write('      <tr>');
	winPhoto.document.write('        <td align="center"><a href="javascript:window.close();" class="large_image">Close window</a><br></td>');
	winPhoto.document.write('      </tr>');
	winPhoto.document.write('     </table>	');
	winPhoto.document.write('    </body>');
	winPhoto.document.write('</html>');
	winPhoto.document.close();
	winPhoto.focus();
	return false;
}


//this code is the same as the swapper_template.js, except that it reverts back to the main image when not mousing over a thumbnail
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\" style=\"cursor:pointer;\" id=\"mainimg\" ALIGN =" + product_image[1].align  + "\" "  + " onClick=\"return(makeNewWindow('assets/images/swatches/"+ pf_id + "j.jpg',\"" + product_name + "\"));\""); 
			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>");
			//Display link below image
	document.write("<br \><a id='LgImgLink' href='#'	 onClick=\"return(makeNewWindow('assets/images/swatches"+ pf_id + "j.jpg', '" + product_name + "'));\">Click to see Larger Image</a>");
		}else{
			document.write("<img name=\"mainimg\"  style=\"cursor:pointer;\"  id=\"mainimg\" ALIGN =\"" + product_image[1].align + "\" "  + " onClick=\"return(makeNewWindow('assets/images/swatches/"+ pf_id + "j.jpg', '" + product_name + "'));\""); 
			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 +"\">");
			//Display link below image
	document.write("<br /><a id='LgImgLink' href='#'	 onClick=\"return(makeNewWindow('assets/images/swatches/"+ pf_id + "j.jpg', '" + product_name + "'));\">Click to see Larger Image</a>");
		}  		
	}
	else{
		document.write("<img src=\"assets/product_images/product.gif\">");
	}
	
	
}

function imgOn(imgName) {
		//console.log(imgName + " " + storedImage);
		var imgElement = document.getElementById("mainimg"); //Get the Main Image
		imgElement.onclick = function() {};
		imgElement.onclick = function() { makeNewWindow("assets/images/swatches/" + pf_id + "_" + imgName + "_j.jpg",  product_name );return false; };
        imgElement.src="assets/images/swatches/" + pf_id + "_" + imgName + "_lg.jpg";  // Change it to the new image

		var aElement = document.getElementById("LgImgLink"); //Link Element
		aElement.onclick = function() {};
		aElement.onclick = function() { makeNewWindow("assets/images/swatches/" + pf_id + "_" + imgName + "_j.jpg",  product_name );return false; };
}

function keeperImage(imgName) { //Store the image we want to set as our current main image so we can revert to it on mouseOut
	storedImage = imgName;
	//console.log("storedImage: " + storedImage);
}


function display_thumbnails()
{
	var array_largeimage;
	if (typeof info_attributes!="undefined" && info_attributes != "")
	{
		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;
			document.write("<br>Additional Images:");
			document.write("<br><table border=0><tr><td><div align=center width=100%><table border=0><tr>");
			
			for (atn=0; atn<thumbnails_array.length; atn++)
			{
				if (thumbnails_array[atn]!="")
				{
					image_array = thumbnails_array[atn].split(":");
					if(atn==0){
						keeperImage(image_array[1]);
						imgOn(image_array[1]);
					}
					document.write("<td align=center><table border=0><tr><td align=center><A HREF=\"#\" onClick=\"keeperImage('"+image_array[1]+"'); return false;\" onmouseover=\"imgOn('"+image_array[1]+"');\" onmouseout=\"imgOn(storedImage);\"><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;
			}
			document.write("</tr></table></div></td></tr></table>");
		}
	}
} //end display_thumbnails

//onmouseout=\"document.getElementById('mainimg').src='assets/product_images/"+product_image[1].image+"'\"