// fancyzoomhtml.js - v1.0
// used to draw necessary html elements for fancyzoom
//
// copyright (c) 2008 cabel sasser / panic inc
// all rights reserved.

function insertzoomhtml() {

	// all of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
	
	var inbody = document.getelementsbytagname("body").item(0);
	
	// wait spinner
	
	var inspinbox = document.createelement("div");
	inspinbox.setattribute('id', 'zoomspin');
	inspinbox.style.position = 'absolute';
	inspinbox.style.left = '10px';
	inspinbox.style.top = '10px';
	inspinbox.style.visibility = 'hidden';
	inspinbox.style.zindex = '525';
	inbody.insertbefore(inspinbox, inbody.firstchild);
	
	var inspinimage = document.createelement("img");
	inspinimage.setattribute('id', 'spinimage');
	inspinimage.setattribute('src', zoomimagesuri+'zoom-spin-1.png');
	inspinbox.appendchild(inspinimage);
	
	// zoom image
	//
	// <div id="zoombox">
	//   <a href="javascript:zoomout();"><img src="/images/spacer.gif" id="zoomimage" border="0"></a> <!-- the image -->
	//   <div id="zoomclose">
	//     <a href="javascript:zoomout();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
	//   </div>
	// </div>
	
	var inzoombox = document.createelement("div");
	inzoombox.setattribute('id', 'zoombox');
	
	inzoombox.style.position = 'absolute'; 
	inzoombox.style.left = '10px';
	inzoombox.style.top = '10px';
	inzoombox.style.visibility = 'hidden';
	inzoombox.style.zindex = '499';
	
	inbody.insertbefore(inzoombox, inspinbox.nextsibling);
	
	var inimage1 = document.createelement("img");
	inimage1.onclick = function (event) { zoomout(this, event); return false; };	
	inimage1.setattribute('src',zoomimagesuri+'spacer.gif');
	inimage1.setattribute('id','zoomimage');
	inimage1.setattribute('border', '0');
	// inimage1.setattribute('onmouseover', 'zoommouseover();')
	// inimage1.setattribute('onmouseout', 'zoommouseout();')
	
	// this must be set first, so we can later test it using webkitboxshadow.
	inimage1.setattribute('style', '-webkit-box-shadow: '+shadowsettings+'0.0)');
	inimage1.style.display = 'block';
	inimage1.style.width = '10px';
	inimage1.style.height = '10px';
	inimage1.style.cursor = 'pointer'; // -webkit-zoom-out?
	inzoombox.appendchild(inimage1);

	var inclosebox = document.createelement("div");
	inclosebox.setattribute('id', 'zoomclose');
	inclosebox.style.position = 'absolute';
	
	// in msie, we need to put the close box inside the image.
	// it's 2008 and i'm having to do a browser detect? sigh.
	if (browserisie) {
		inclosebox.style.left = '-1px';
		inclosebox.style.top = '0px';	
	} else {
		inclosebox.style.left = '-15px';
		inclosebox.style.top = '-15px';
	}
	
	inclosebox.style.visibility = 'hidden';
	inzoombox.appendchild(inclosebox);
		
	var inimage2 = document.createelement("img");
	inimage2.onclick = function (event) { zoomout(this, event); return false; };	
	inimage2.setattribute('src',zoomimagesuri+'closebox.png');		
	inimage2.setattribute('width','30');
	inimage2.setattribute('height','30');
	inimage2.setattribute('border','0');
	inimage2.style.cursor = 'pointer';		
	inclosebox.appendchild(inimage2);
	
	// shadow
	// only draw the table-based shadow if the programatic webkitboxshadow fails!
	// also, don't draw it if we're ie -- it wouldn't look quite right anyway.
	
	if (! document.getelementbyid('zoomimage').style.webkitboxshadow && ! browserisie) {

		// shadow base
		
		var infixedbox = document.createelement("div");
		infixedbox.setattribute('id', 'shadowbox');
		infixedbox.style.position = 'absolute'; 
		infixedbox.style.left = '50px';
		infixedbox.style.top = '50px';
		infixedbox.style.width = '100px';
		infixedbox.style.height = '100px';
		infixedbox.style.visibility = 'hidden';
		infixedbox.style.zindex = '498';
		inbody.insertbefore(infixedbox, inzoombox.nextsibling);	
	
		// shadow
		// now, the shadow table. skip if not compatible, or irrevelant with -box-shadow.
		
		// <div id="shadowbox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> x
		//   <tr height="25">
		//   <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
		//   <td background="/images/zoom-shadow2.png">&nbsp;</td>
		//   <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
		//   </tr>
		
		var inshadowtable = document.createelement("table");
		inshadowtable.setattribute('border', '0');
		inshadowtable.setattribute('width', '100%');
		inshadowtable.setattribute('height', '100%');
		inshadowtable.setattribute('cellpadding', '0');
		inshadowtable.setattribute('cellspacing', '0');
		infixedbox.appendchild(inshadowtable);

		var inshadowtbody = document.createelement("tbody");	// needed for ie (for html4).
		inshadowtable.appendchild(inshadowtbody);
		
		var inrow1 = document.createelement("tr");
		inrow1.style.height = '25px';
		inshadowtbody.appendchild(inrow1);
		
		var incol1 = document.createelement("td");
		incol1.style.width = '27px';
		inrow1.appendchild(incol1);  
		var inshadowimg1 = document.createelement("img");
		inshadowimg1.setattribute('src', zoomimagesuri+'zoom-shadow1.png');
		inshadowimg1.setattribute('width', '27');
		inshadowimg1.setattribute('height', '25');
		inshadowimg1.style.display = 'block';
		incol1.appendchild(inshadowimg1);
		
		var incol2 = document.createelement("td");
		incol2.setattribute('background', zoomimagesuri+'zoom-shadow2.png');
		inrow1.appendchild(incol2);
		// incol2.innerhtml = '<img src=';
		var inspacer1 = document.createelement("img");
		inspacer1.setattribute('src',zoomimagesuri+'spacer.gif');
		inspacer1.setattribute('height', '1');
		inspacer1.setattribute('width', '1');
		inspacer1.style.display = 'block';
		incol2.appendchild(inspacer1);
		
		var incol3 = document.createelement("td");
		incol3.style.width = '27px';
		inrow1.appendchild(incol3);  
		var inshadowimg3 = document.createelement("img");
		inshadowimg3.setattribute('src', zoomimagesuri+'zoom-shadow3.png');
		inshadowimg3.setattribute('width', '27');
		inshadowimg3.setattribute('height', '25');
		inshadowimg3.style.display = 'block';
		incol3.appendchild(inshadowimg3);
		
		//   <tr>
		//   <td background="/images/zoom-shadow4.png">&nbsp;</td>
		//   <td bgcolor="#ffffff">&nbsp;</td>
		//   <td background="/images/zoom-shadow5.png">&nbsp;</td>
		//   </tr>
		
		inrow2 = document.createelement("tr");
		inshadowtbody.appendchild(inrow2);
		
		var incol4 = document.createelement("td");
		incol4.setattribute('background', zoomimagesuri+'zoom-shadow4.png');
		inrow2.appendchild(incol4);
		// incol4.innerhtml = '&nbsp;';
		var inspacer2 = document.createelement("img");
		inspacer2.setattribute('src',zoomimagesuri+'spacer.gif');
		inspacer2.setattribute('height', '1');
		inspacer2.setattribute('width', '1');
		inspacer2.style.display = 'block';
		incol4.appendchild(inspacer2);
		
		var incol5 = document.createelement("td");
		incol5.setattribute('bgcolor', '#ffffff');
		inrow2.appendchild(incol5);
		// incol5.innerhtml = '&nbsp;';
		var inspacer3 = document.createelement("img");
		inspacer3.setattribute('src',zoomimagesuri+'spacer.gif');
		inspacer3.setattribute('height', '1');
		inspacer3.setattribute('width', '1');
		inspacer3.style.display = 'block';
		incol5.appendchild(inspacer3);
		
		var incol6 = document.createelement("td");
		incol6.setattribute('background', zoomimagesuri+'zoom-shadow5.png');
		inrow2.appendchild(incol6);
		// incol6.innerhtml = '&nbsp;';
		var inspacer4 = document.createelement("img");
		inspacer4.setattribute('src',zoomimagesuri+'spacer.gif');
		inspacer4.setattribute('height', '1');
		inspacer4.setattribute('width', '1');
		inspacer4.style.display = 'block';
		incol6.appendchild(inspacer4);
		
		//   <tr height="26">
		//   <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
		//   <td background="/images/zoom-shadow7.png">&nbsp;</td>
		//   <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
		//   </tr>  
		// </table>
		
		var inrow3 = document.createelement("tr");
		inrow3.style.height = '26px';
		inshadowtbody.appendchild(inrow3);
		
		var incol7 = document.createelement("td");
		incol7.style.width = '27px';
		inrow3.appendchild(incol7);
		var inshadowimg7 = document.createelement("img");
		inshadowimg7.setattribute('src', zoomimagesuri+'zoom-shadow6.png');
		inshadowimg7.setattribute('width', '27');
		inshadowimg7.setattribute('height', '26');
		inshadowimg7.style.display = 'block';
		incol7.appendchild(inshadowimg7);
		
		var incol8 = document.createelement("td");
		incol8.setattribute('background', zoomimagesuri+'zoom-shadow7.png');
		inrow3.appendchild(incol8);  
		// incol8.innerhtml = '&nbsp;';
		var inspacer5 = document.createelement("img");
		inspacer5.setattribute('src',zoomimagesuri+'spacer.gif');
		inspacer5.setattribute('height', '1');
		inspacer5.setattribute('width', '1');
		inspacer5.style.display = 'block';
		incol8.appendchild(inspacer5);
		
		var incol9 = document.createelement("td");
		incol9.style.width = '27px';
		inrow3.appendchild(incol9);  
		var inshadowimg9 = document.createelement("img");
		inshadowimg9.setattribute('src', zoomimagesuri+'zoom-shadow8.png');
		inshadowimg9.setattribute('width', '27');
		inshadowimg9.setattribute('height', '26');
		inshadowimg9.style.display = 'block';
		incol9.appendchild(inshadowimg9);
	}

	if (includecaption) {
	
		// caption
		//
		// <div id="zoomcapdiv" style="margin-left: 13px; margin-right: 13px;">
		// <table border="1" cellpadding="0" cellspacing="0">
		// <tr height="26">
		// <td><img src="zoom-caption-l.png" width="13" height="26"></td>
		// <td rowspan="3" background="zoom-caption-fill.png"><div id="zoomcaption"></div></td>
		// <td><img src="zoom-caption-r.png" width="13" height="26"></td>
		// </tr>
		// </table>
		// </div>
		
		var incapdiv = document.createelement("div");
		incapdiv.setattribute('id', 'zoomcapdiv');
		incapdiv.style.position = 'absolute'; 		
		incapdiv.style.visibility = 'hidden';
		incapdiv.style.marginleft = 'auto';
		incapdiv.style.marginright = 'auto';
		incapdiv.style.zindex = '501';

		inbody.insertbefore(incapdiv, inzoombox.nextsibling);
		
		var incaptable = document.createelement("table");
		incaptable.setattribute('border', '0');
		incaptable.setattribute('cellpadding', '0');	// wow. these honestly need to
		incaptable.setattribute('cellspacing', '0');	// be intercapped to work in ie. wtf?
		incapdiv.appendchild(incaptable);
		
		var intbody = document.createelement("tbody");	// needed for ie (for html4).
		incaptable.appendchild(intbody);
		
		var incaprow1 = document.createelement("tr");
		intbody.appendchild(incaprow1);
		
		var incapcol1 = document.createelement("td");
		incapcol1.setattribute('align', 'right');
		incaprow1.appendchild(incapcol1);
		var incapimg1 = document.createelement("img");
		incapimg1.setattribute('src', zoomimagesuri+'zoom-caption-l.png');
		incapimg1.setattribute('width', '13');
		incapimg1.setattribute('height', '26');
		incapimg1.style.display = 'block';
		incapcol1.appendchild(incapimg1);
		
		var incapcol2 = document.createelement("td");
		incapcol2.setattribute('background', zoomimagesuri+'zoom-caption-fill.png');
		incapcol2.setattribute('id', 'zoomcaption');
		incapcol2.setattribute('valign', 'middle');
		incapcol2.style.fontsize = '14px';
		incapcol2.style.fontfamily = 'helvetica';
		incapcol2.style.fontweight = 'bold';
		incapcol2.style.color = '#ffffff';
		incapcol2.style.textshadow = '0px 2px 4px #000000';
		incapcol2.style.whitespace = 'nowrap';
		incaprow1.appendchild(incapcol2);
		
		var incapcol3 = document.createelement("td");
		incaprow1.appendchild(incapcol3);
		var incapimg2 = document.createelement("img");
		incapimg2.setattribute('src', zoomimagesuri+'zoom-caption-r.png');
		incapimg2.setattribute('width', '13');
		incapimg2.setattribute('height', '26');
		incapimg2.style.display = 'block';
		incapcol3.appendchild(incapimg2);
	}
}