// 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 = '999';

	

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

	}

}