// 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 = '2525';
	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.setAttribute('class', 'boxPopup');
	//inZoombox.setAttribute('style', 'padding: 5px 5px 5px 5px');
	inZoombox.style.position = 'absolute'; 
	inZoombox.style.left = '10px';
	inZoombox.style.top = '10px';
	inZoombox.style.visibility = 'hidden';
	inZoombox.style.zIndex = '2499';
	inZoombox.className = "boxPopup";
	inZoombox.style.padding = '5px 5px 5px 5px';


	inBody.insertBefore(inZoombox, inSpinbox.nextSibling);

	var inClosebox = document.createElement("div");
	inClosebox.setAttribute('id', 'ZoomClose');
	inClosebox.setAttribute('align', 'right');
//	inClosebox.className = "boxPopup";
	
//	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('style', 'padding-bottom:4px');
	inImage2.setAttribute('src', zoomImagesURI + 'closebox.gif');
	inImage2.setAttribute('width', '8');
	inImage2.setAttribute('height', '8');
	inImage2.setAttribute('border', '0');
	inImage2.style.cursor = 'pointer';
	inImage2.style.padding = "0px 0px 4px 0 px";
	inClosebox.appendChild(inImage2);

	var inImagebox = document.createElement("div");
	inImagebox.setAttribute('id', 'Imagebox');
	inImagebox.setAttribute('align', 'center');

	inZoombox.appendChild(inImagebox);
	
	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?

	inImagebox.appendChild(inImage1);

	var inputs = document.getElementsByTagName('input');

	var whatwedo_title = "";
	var gallery_id = -1;

	for (i = 0; i < inputs.length; i++) {
	    if (inputs[i].name.indexOf("HiddenFieldTitle") > 0) {
	        whatwedo_title = inputs[i].value;
	    }
	    if (inputs[i].name.indexOf("HiddenFieldGalleryID") > 0) {
	        gallery_id = inputs[i].value;
	    }
	}
	
	if (whatwedo_title != "" && gallery_id != -1) {
	    var inTitleBox = document.createElement("div");
//	    inTitleBox.setAttribute('style', 'padding-top:4px');
	    inTitleBox.setAttribute('id', 'TitleBox');
	    inTitleBox.setAttribute('align', 'center');
//	    inTitleBox.className = 'boxPopup';
	    inTitleBox.style.padding = "4px 0px 0px 0px";
	    inTitleBox.innerHTML = "<span class='info'>" + whatwedo_title + "</span> <span class='highlight'>PORTFOLIO</span> <a class='dis underline' href='checkusout.aspx?gallery_id=" + gallery_id + "'>View now</a>";
	    inZoombox.appendChild(inTitleBox);
	}

//	var inDiv = document.createElement("div");
//	inDiv.innerHTML = "test span text";
	//	inZoombox.appendChild(inDiv);


//	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.gif');		
//	inImage2.setAttribute('width','8');
//	inImage2.setAttribute('height','8');
//	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 = '2498';
//		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 = '2501';

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