// FancyZoomHTML.js - v1.0
// Used to draw necessary HTML elements for FancyZoom
//
// Copyright (c) 2008 Cabel Sasser / Panic Inc
// All rights reserved.

function insertZoomHTML() {

	var inBody = document.getElementsByTagName("body").item(0);
	
	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);
	
	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';
	if (browserIsIE)
		inZoombox.style.background = '#fff';
	
	inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
	
	
	var inSp = '<img src="'+zoomImagesURI+'spacer.gif" width="1" height="1" border="0" />'
	var inShadowTable = document.createElement("table");
	
	inShadowTable.setAttribute('border', '0');
	inShadowTable.setAttribute('cellPadding', '0');
	inShadowTable.setAttribute('cellSpacing', '0');
	
	inZoombox.appendChild(inShadowTable);

	var inShadowTbody = document.createElement("tbody");	// Needed for IE (for HTML4).
	inShadowTable.appendChild(inShadowTbody);
	
	inShadowTable.setAttribute('cellpadding', '0');
	inShadowTable.setAttribute('cellspacing', '0');
	
	var inRow = document.createElement("tr");
	inShadowTbody.appendChild(inRow);
		
	var inCol = document.createElement("td");
	inCol.style.width = '14px';
	inCol.style.height = '9px';
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow1.png) top left no-repeat';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	inCol = document.createElement("td");
	inCol.style.height = '9px';
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow2.png) top left repeat-x';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	inCol = document.createElement("td");
	inCol.style.width = '14px';
	inCol.style.height = '9px';
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow3.png) 0 0 no-repeat';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	
	inRow = document.createElement("tr");
	inShadowTbody.appendChild(inRow);
	
	inCol = document.createElement("td");
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow4.png) 0 0 repeat-y';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	inCol = document.createElement("td");
	inRow.appendChild(inCol);
	
		
		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.style.display = 'block';
		inImage1.style.width = '10px';
		inImage1.style.height = '10px';
		inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
		
		inCol.appendChild(inImage1);
		
		//inZoombox.appendChild(inImage1);
	
	
		var inClosebox = document.createElement("div");
		inClosebox.setAttribute('id', 'ZoomClose');
		inClosebox.style.position = 'absolute';
		
		if (browserIsIE) {
			inClosebox.style.right = '0px';
			inClosebox.style.top = '-2px';	
		} else {
			inClosebox.style.right = '0px';
			inClosebox.style.top = '-2px';
		}
	
		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);
	

	inCol = document.createElement("td");
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow5.png) 0 0 repeat-y';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	
	inRow = document.createElement("tr");
	inShadowTbody.appendChild(inRow);
		
	inCol = document.createElement("td");
	inCol.style.width = '14px';
	inCol.style.height = '19px';
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow6.png) 0 0 no-repeat';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	inCol = document.createElement("td");
	inCol.style.height = '19px';
	inCol.style.background = 'url('+zoomImagesURI+'azoom-shadow7.png) 0 0 repeat-x';
	inCol.innerHTML = inSp;
	inRow.appendChild(inCol);
	
	inCol2 = document.createElement("td");
	inCol2.style.width = '14px';
	inCol2.style.height = '19px';
	inCol2.style.background = 'url('+zoomImagesURI+'azoom-shadow8.png) 0 0 no-repeat';
	inCol2.innerHTML = inSp;
	inRow.appendChild(inCol2);
	
	
	if (includeCaption) 
	{
		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);
	}
}