/*
XsPreview, JS V1.1
Copyright (C) Zoran Zaev, xSynthesis LLC

LICENSE:
- Free for both personal and commercial projects, to use, copy, modify, 
	with the exception of use within software products indended for resale and thus competing with xSynthesis LLC products.
- License requires leaving author name, link, "Powered By" link, and license intact.
- Only allowed to be used in family friendly web sites and projects: 
	NOT allowed for sites that promote: nudity, same gender relationships, or out-of-marriage relationships.
	NOT allowed for sites that promote: gambling, violence and death including abortion.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

// For more details, see the xSynthesis LLC web site: http://www.xSynthesis.com

*******************************************
VERSION HISTORY
*******************************************
THUMBS TABLE, to enable do the following:
V1.0
1. Add a tag (DIV or SPAN for example) with id="XsPreviewThumbs" around the table or block of HTML tags that ought to be transfered as thumbs for the image preview popup
2. Add rel="XsPreview" to the A-tags (i.e. links) that are placed around the each thumbnail; the link has to point to full resultion image;
3. Inside the A-tag (i.e. links) there must be at least one IMG-tag with src attribute, pointing to the thumbnail itself
4. The appearance of the thumbs table and thumbs images can be modified by changing their CSS class styles: XsThumbsTable, XsThumbsImg
5. Main preview image must have id=ProdImg1
6. Add <script language="javascript" src="Templates/XsPreview.js"></script> to the end of the document, before the close of BODY tag.
Also, add: <link rel="stylesheet" href="Templates/XsPreview.css" >
ex.
----------------------------------------
<a href="javascript: fnPreviewOpen();" target="_blank"><!-- main preview image next --><img border="0" id="ProdImg1" src="..."...></a>
<div id="XsPreviewThumbs">
<table class="XsThumbsTable"><tr>
<td>
	<a href="/images/Products2/7_Lg/763_1.jpg" rel="XsPreview">
	<img border="0" width="24" height="55" class="XsThumbsImg" src="/images/Products2/7_Sm/763_1.jpg"></a></td>
	....
----------------------------------------
7. REQUIRES ALL IMAGES FOR A SKU TO BE THE SAME SIZE
8. Image sizes
- Thumbnails are set in host aspx page defined with var: iImgMaxPix (default at 55px)
- Small images in "/Sm" folder have max side of 128 px
- Medium images in "/Md" folder have max side of 256 px
- Large images in "/Lg" folder have max side of 2560 px (max file size of 270 KB, thus these JPG's are more highly compressed)

V1.1
1. IMAGES CAN BE VARIED SIZES/ ASPECTS
2. Add XsPreviewFrame, around the preview block, to force keep images from not moving the text around themselves;

Note: onMouseOvers, onClick are automatically handled. 

*/

var arLinkThumb = new Array(); //Array to hold links for thumbs
var arLinkFull = new Array(); //Array to hold links full images
var iLinkCur = 0; // current index, resolve via the above arrays
var sLinkFullCur = ""; // full image URL
var bDocLoaded = false;

var bToAnimate = true;
var bPauseLoadingImage = false;
var iOpacityStart = 0.0;
var iOpacityIncrement = 0.1;
var iZoomIncrement = 0.1;
var bIE = (navigator.appName == "Microsoft Internet Explorer")? true: false;
var iDragStartX = 0; iDragStartY = 0; //start drag locations
var iScrollStartX = 0; iScrollStartY = 0; //start scroll locations for div
var iImgLgH = 0; //remembers these sizes, while changing images around
var iImgLgW = 0;



// main full res. pic HTML, width/height must stay here, not in CSS & logo below picture & loading graphic
var sHTMLPict = '<img id="ZoomPictureImg" src="[XsLink]" style="width:[XsWidth]px;height:[XsHeight]px;">'; 
var sHTMLLogo = '<div><a href="http://www.xSynthesis.com" target="_blank"><img src="images/xSynthesis_PowerdBy.gif" alt="Hand-selected, Biblically-based, quality books & gifts" class="XsLtbLogo"></a></div>';

// updated thumbs table links, onclick events, onmouseover events
//	onMouseOver="javascript:document.getElementById('ProdImg1').src = 'images/Products2/6-Sm/698_1.jpg'"

fnWriteHtml(); //write the xSynthesis Preview HTML first

//load it after document has loaded, so that element will be surely accessible by ID
window.onload=function() { // document.body.onload does not work in Firefox only
	strTableHTML = document.getElementById('XsPreviewThumbs').innerHTML; // all browsers use innerHTML, http://www.w3schools.com/jsref/prop_html_innerhtml.asp
	strTableHTML = strTableHTML.replace(/XsPreview/gi,"XsPreview1"); // non-reg.exp. does not replace all found matches, only the first one;
	document.getElementById("XsPreviewThumbs1").innerHTML = strTableHTML; //XsThumbsTable
	
	var colLinks=document.getElementsByTagName("a");
	for (var i=0; i<colLinks.length; i++){ //find all link elements with rel=XsPreview
	
		if (colLinks[i].getAttribute("rel") && colLinks[i].getAttribute("rel")=="XsPreview"){ //set events on table in main document
			
			// 1. set onclick and onmouseover events
			colLinks[i].onclick=function(){fnPreviewOpen();fnImgLoad(this.href);return false;} //each thumb <a> tag onclick: fnImgLoad (url of full res image)
			colLinks[i].onmouseover=function(){ fnThumbOn(this); }// each thumb <a> tag onmouseover fnThumbOn(link obj)
				
			// 2. populate arrays with links (thumbs, full)
			var oImg = colLinks[i].firstChild; //find IMG inside A-tag
			while (oImg != null && oImg.tagName != "IMG") {oImg = oImg.nextSibling;	} //Firefox/Opera consider white space 'firstChild'
			//alert (colLinks[i].getAttribute("href")); //ERROR?? REPEATS LINKS, 4,5,6
			arLinkFull[arLinkFull.length]=colLinks[i].getAttribute("href"); // A-tag href as link to full image
			if (oImg.tagName == "IMG") {arLinkThumb[arLinkThumb.length]=oImg.getAttribute("src")} else {arLinkThumb[arLinkThumb.length] = ""}; // child IMG SRC attribute links to thumb image		
		}// if
		
		if (colLinks[i].getAttribute("rel") && colLinks[i].getAttribute("rel")=="XsPreview1"){ // set onclick event for thumbs table in preview popup
			colLinks[i].onclick=function(){ 
				fnThumbOn(this);
				document.getElementById('ZoomPicture').focus(); //focus away from thumb, to see clearly red border selection;
				fnImgLoad(this.href);
				return false; 
			} // load A-tag HREF i.e. full image;
		}// if
		
	}// for
	
	//place object elements with flash content (videos) behind the content
	//var colObjects=document.getElementsByTagName("embed");
	//for (var i=0; i< colObjects.length; i++) {
	//	colObjects[i].setAttribute("wmode","transparent");
	//	alert(colObjects[i].getAttribute("wmode")); 
	//	alert(colObjects[i].getAttribute("id")); 
	//}

	bDocLoaded = true;
}
function fnThumbOn(oLink) { // passes link object of thumb <a> tag, which contains link to full res image

	//MAKE BASED ON LINK
	//sLinkFullCur = sLink; //remeber current image
	//fnLinkToIndex();
	//HAVE TO FIND LINK OBJ with that 
	//	var oImg = oLink.firstChild; //find IMG inside A-tag

	sLinkFullCur = oLink.href;
	fnLinkToIndex();
	//alert(arLinkThumb[iLinkCur]);
	var oImg = oLink.firstChild; //find IMG inside A-tag
	while (oImg != null && oImg.tagName != "IMG") {oImg = oImg.nextSibling;	} //Firefox/Opera consider white space 'firstChild'
	if (oImg.tagName == "IMG") {
		var now = new Date(); 
		document.getElementById('ProdImg1').src = oImg.getAttribute("src").replace("_Sm","_Md") + "?" + now.getDate() + "-" + now.getHours(); // put thumb in mini-preview and forces reload of images that are loaded via JS (Md images), by expiring them to the day of the month (from 1-31) + '-' + the hour (from 0-23); small images don't suffer from this because they can be refreshed by hitting the browser refresh button; not sure about large images??
		document.getElementById('ProdImg1').parentNode.onclick = function(){ fnPreviewOpen();return false; } // change preview image
		
		// set preview image (md) with same aspect ratio as thumbs
		var iThumbW = oImg.getAttribute("width");
		var iThumbH = oImg.getAttribute("height");
		var iImgAspPer = iThumbW / iThumbH;
		var iImgMaxPix = 256; //for preview images
		var iImgW = 0;
		var iImgH = 0;
		if (iThumbW > iThumbH) { //'W > H (wide image)
			iImgW = iImgMaxPix;
			iImgH = iImgMaxPix / iImgAspPer;
		} else { //' W < H (high image)
			iImgW = iImgAspPer * iImgMaxPix;
			iImgH = iImgMaxPix;
		}
		document.getElementById('ProdImg1').height = iImgH;
		document.getElementById('ProdImg1').width = iImgW;
		
	}// if	
	var colImg=document.getElementsByTagName("img"); //turn off, turn on
	for (var i=0; i<colImg.length; i++){ 
		if (colImg[i].getAttribute("class") && colImg[i].className =="XsThumbsImgOn"){ colImg[i].className = "XsThumbsImg"; }
	}
	for (var i=0; i<colImg.length; i++){ // arLinkThumb[iLinkCur] is subset of [img].src, so indexOf is needed
		if (colImg[i].getAttribute("src") && colImg[i].src.indexOf( arLinkThumb[iLinkCur] )>-1 && colImg[i].id != "ProdImg1") 
			{ colImg[i].className = "XsThumbsImgOn"; }
	}
}
function fnImgArrow(pDir) { //pDir = Back,Next
	if (pDir == "Back") {
		iLinkCur = iLinkCur-1;
		if (iLinkCur == -1) {iLinkCur = arLinkFull.length-1}
	}
	if (pDir == "Next") {
		iLinkCur=iLinkCur+1;
		if (iLinkCur == arLinkFull.length) {iLinkCur = 0}
	}
	// need oLink to send to fnThumbOn(oLink)
	var colLinks=document.getElementsByTagName("a"); //turn off, turn on
	for (var i=0; i<colLinks.length; i++){ 
		if (colLinks[i].getAttribute("href") && colLinks[i].getAttribute("href").indexOf( arLinkFull[iLinkCur] ) >-1 ){ 
			fnThumbOn(colLinks[i]);
		}
	}
	sLinkFullCur = arLinkFull[iLinkCur];
	fnImgLoad(arLinkFull[iLinkCur]); // need to do first fnThumbOn, then fnImgLoad for image to be resized properly (it uses the thumbs update)
}
function fnPreviewOpen() {
	document.getElementById('ZoomBack').style.display = 'block';
	// fade-in the background first, then show it
	if (!(bIE)) { //add for non-IE browsers
		document.getElementById('ZoomBack').style.opacity = ".50"; 
	} else { //for IE (if in CSS, Firefox will give warning in error console)
		document.getElementById('ZoomBack').style.filter = "alpha(opacity=50)";
	}
	document.getElementById('ZoomTop').style.display = 'block';
	document.getElementById('ZoomLeft').style.display = 'block';
	document.getElementById('ZoomPicture').style.display = 'block';
	document.getElementById('ZoomPictureImg').style.visibility = 'hidden'; // just hide the picture for loading
	document.getElementById('ZoomLoading').style.display = 'block';
	document.getElementById('ZoomArrowLeft').style.display = 'block';
	document.getElementById('ZoomArrowRight').style.display = 'block';
	fnResize();
	window.onresize = function() { fnResize(); }
	/*
	if (window.document.addEventListener) {window.document.addEventListener("keydown", fnKeyDown, false); } //FF, OP
		else {window.document.attachEvent("onkeydown", fnKeyDown);} //IE
	*/
	document.onkeydown= function(e) { fnKeyDown(e); } // so much works in IE, FF, OP
	
	fnLinkToIndex(); // uses sLinkFullCur to get iLinkCur
	
	var sWaitMsg = "Waiting to load page.";
	while (!bDocLoaded) {setTimeout("sWaitMsg+='.';window.status=sWaitMsg;",1000);} //pause until document has loaded (waiting window is already displayed)
	
	fnImgLoad(arLinkFull[iLinkCur]);
}
function fnWait() {

}
function fnKeyDown(e) {
	//ESC - 27; F1 - 112; 
	var ev = (e) ? e : event; // IE (event as global object, and non-IE support
	var iKeyCode = ev.keyCode;
	//alert(iKeyCode);
	if (iKeyCode == 27) {fnPreviewClose()}
}

function fnLinkToIndex() {
	for (var i=0; i<arLinkFull.length; i++) {if (sLinkFullCur.indexOf(arLinkFull[i])>-1) { iLinkCur=i;}	} //find index of current image
}
	
function fnWinSize() {
  var iW = 0, iH = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    iW = window.innerWidth;
    iH = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6-8+ in 'standards compliant mode'
    iW = document.documentElement.clientWidth;
    iH = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    iW = document.body.clientWidth;
    iH = document.body.clientHeight;
    //document.getElementsByTagName('body')[0].clientWidth;
    //document.getElementsByTagName('body')[0].clientHeight;
  }
  return {h:iH,w:iW} //returning an object
}

function fnResize() {
	var fnWS = fnWinSize(); //fnWS.h, fnWS.w
	// alert('w=' + fnWS.w + ' and h = ' + fnWS.h); 
	var iMarginT = 20, iMarginL = 20, iMarginR = 20; //top, left, right margins
	var iArrowH = 40, iArrowW = 30; //arrow height,width
	var iLoading = 250; //loading square size
	var iTopBarH = 80; // top bar height (with margins)
	var iLeftBarW = 340; // left bar width (with margins)
	// get the size of the vertical scroll bar by testing it
	document.body.style.overflow = 'hidden';
	var iWidthNoBar = document.body.offsetWidth;
	document.body.style.overflow = 'auto';
	var iWidthWithBar = document.body.offsetWidth;
	// alert ("Vertical scrollbar size:" + (iWidthNoBar-iWidthWithBar));
	var iAdj = iWidthNoBar-iWidthWithBar; // scrollbar adjustment for Firefox/ Opera
	if (bIE) iAdj = 0; // only use it for Firefox/Opera, because IE width includes the width of the scrollbar
	
	//adjust height
	document.getElementById('ZoomLeft').style.height = fnWS.h - iTopBarH - iMarginT + 'px'; // winh - top bar - margin
	document.getElementById('ZoomPicture').style.height = fnWS.h - iTopBarH - iMarginT + 'px'; // winh - top bar - margin
	document.getElementById('ZoomArrowLeft').style.top = iTopBarH + (fnWS.h - iTopBarH - iMarginT - iArrowH/2)/2 + 'px'; // top bar + ((winh - top bar - margin) as height - 1/2 of arrow)/2
	document.getElementById('ZoomArrowRight').style.top = iTopBarH + (fnWS.h - iTopBarH - iMarginT - iArrowH/2)/2 + 'px'; // top bar + ((winh - top bar - margin) as height - 1/2 of arrow)/2
	document.getElementById('ZoomLoading').style.top = iTopBarH + (fnWS.h - iTopBarH - iMarginT - iLoading/2)/2 - 50 + 'px'; // winh - top bar - margin
	//adjust width
	document.getElementById('ZoomTop').style.width = (fnWS.w - iMarginL - iMarginR - iAdj) + 'px'; // winw - left margin - r. margin
	document.getElementById('ZoomPicture').style.width = (fnWS.w - iLeftBarW - iMarginL - iAdj) + 'px'; // winw - left bar - r.margin
	document.getElementById('ZoomArrowRight').style.left = (iLeftBarW + (fnWS.w - iLeftBarW - iMarginL) - iArrowW/2 - iAdj) + 'px'; // left bar + (pic width) - Adj	
	document.getElementById('ZoomLoading').style.left = iLeftBarW + (fnWS.w - iLeftBarW - iMarginL - iAdj - iLoading/2)/2 -50 + 'px'; // winw - left margin - r. margin
}
function fnScrollbarWidth() {
	//objDiv.style.overflow = 'hidden';
	//var iWidthNoBar = objDiv.offsetWidth;
	//objDiv.style.overflow = 'auto';
	//var iWidthWithBar = objDiv.offsetWidth;
	//alert ("Bar/NoBar:" + iWidthNoBar + "," + iWidthWithBar);
	var oDivOut = null;
	var oDivIn = null;
	var wNoScroll = 0;
	var wScroll = 0;
	// Outer div
	oDivOut = document.createElement('div');
	oDivOut.style.position = 'absolute';
	oDivOut.style.top = '-1000px';
	oDivOut.style.left = '-1000px';
	oDivOut.style.width = '100px';
	oDivOut.style.height = '50px';
	oDivOut.style.overflow = 'hidden';
	// Inner div
	oDivIn = document.createElement('div');
	oDivIn.style.width = '100%';
	oDivIn.style.height = '200px';
	// Put the inner div in the outer div
	oDivOut.appendChild(oDivIn);
	document.body.appendChild(oDivOut);
	// Width of the inner div minus scroll bar
	wNoScroll = oDivIn.offsetWidth;
	oDivOut.style.overflow = 'auto';
	wScroll = oDivIn.offsetWidth;

	document.body.removeChild(document.body.lastChild);
	return (wNoScroll - wScroll);
}
function fnMouseDown (e) { 
	// enabled in fnImgLoad, because img gets replaced often; Img has onmousedown event, etc
	var ev = (e) ? e : event;
	if (!window.event) { ev.preventDefault();} //for FF to disable IMG drag default behavior
	//oTarget = e.target || e.srcElement;
	var oTarget = window.event ? window.event.srcElement:e.target; //OK on IE, FF, OP
	var objDiv = document.getElementById("ZoomPicture");
	// mouse screen coordinates: ev.clientX, ev.clientY
	// window.status="X=" + ev.clientX + ", Y=" + ev.clientY + " (" + oTarget.id + ")"
	iDragStartX = ev.clientX; iDragStartY = ev.clientY;
	iScrollStartX = objDiv.scrollLeft; iScrollStartY = objDiv.scrollTop;
	// setup on body tag events for move and up
	document.body.onmousemove = function (e) { fnMouseMove(e) }
	document.body.onmouseup = function (e) { fnMouseUp(e) }
	// document.addEventListener("onmousemove", fnMouseMove,   true);// alternative format NS
	// document.attachEvent("onmousemove", fnMouseMove);// alternative IE
	// x = window.event.clientX + document.documentElement.scrollLeft+ document.body.scrollLeft;
	// x = event.clientX + window.scrollX;
	// var iebody=(document.compatMode && document.compatMode != "BackCompat")? 
	//	document.documentElement : document.body //.documentElement for IE in standards compliant mode
	// var dsocleft=document.all? iebody.scrollLeft : pageXOffset // pageXOffset/pageYOffset for Firefox
	// var dsoctop=document.all? iebody.scrollTop : pageYOffset
}
function fnMouseMove (e) {
	var ev = (e) ? e : event;
	var oTarget = window.event?window.event.srcElement:e.target; 
	var iDragOffsetX = 0; iDragOffsetY = 0; // current window coordinates - original coordinates
	iDragOffsetX = ev.clientX-iDragStartX; 
	iDragOffsetY = ev.clientY-iDragStartY;
	var objDiv = document.getElementById("ZoomPicture");
	/*window.status="X=" + ev.clientX + ", Y=" + ev.clientY
		+ "; Offset X=" + (ev.clientX-iDragStartX) + ", Y=" + (ev.clientY-iDragStartY) + "(" + oTarget.id + ")"
		+ " DIV-ScrollTop/Height/Style.Height/clientHeight="+objDiv.scrollTop+","+objDiv.scrollHeight+","+objDiv.clientHeight;*/
	// to test if scroll bar is present, check:
	// 1.	objDiv.clientHeight < objDiv.scrollHeight
	// 2.	objDiv.clientWidth < objDiv.scrollWidth;
	// objDiv.style.height (has px ending) seems to be same or similar to objDiv.clientHeight, but it adds the scrollbars?
	objDiv.scrollLeft = iScrollStartX - iDragOffsetX;
	objDiv.scrollTop = iScrollStartY - iDragOffsetY;
	// for moving an object, instead of scrolling, we would have to change its style.left and style.top values
}
function fnMouseUp (e) {
	var ev = (e) ? e : event;
	var oTarget = window.event?window.event.srcElement:e.target; 
	// window.status="X=" + ev.clientX + ", Y=" + ev.clientY + " (" + oTarget.id + ")"
	document.body.onmousemove = null;
	document.body.onmouseup = null;
}
function fnPreviewClose() {
	document.getElementById('ZoomBack').style.display = 'none';
	document.getElementById('ZoomTop').style.display = 'none';
	document.getElementById('ZoomLeft').style.display = 'none';
	document.getElementById('ZoomPicture').style.display = 'none';
	document.getElementById('ZoomLoading').style.display = 'none';
	document.getElementById('ZoomArrowLeft').style.display = 'none';
	document.getElementById('ZoomArrowRight').style.display = 'none';
	window.onresize = "";
	document.onkeydown="";
	//document.removeEventListener("onkeydown", fnMouseMove, true);//alternative format NS
	//document.detachEvent("onkeydown", fnMouseMove);//alternative format IE
	document.getElementById('ZoomPictureImg').onmousedown = "";
}

function fnZoom(psDir) {
	//ZoomPictureImg width:600px;height:752px; Original size: //offsetWidth //naturalWidth - works in Firefox;?
	var iImgH = parseInt(document.getElementById('ZoomPictureImg').style.height);
	var iImgW = parseInt(document.getElementById('ZoomPictureImg').style.width);
	var iRatio = iImgH/iImgW; // for Page & Width only
	if ((psDir == 'In') || (psDir == 'Out')) {
		var iDelta = iZoomIncrement;
		var iFactor = (psDir == 'In')? 1.0 + iDelta : 1.0 - iDelta ; //psDir = 'Out'|'In
		document.getElementById('ZoomPictureImg').style.height = iImgH * iFactor + 'px';
		document.getElementById('ZoomPictureImg').style.width = iImgW * iFactor + 'px';
	}
	if (psDir == 'Page') {
		document.getElementById('ZoomPictureImg').style.height = parseInt(document.getElementById('ZoomPicture').style.height) - 50 + 'px';
		document.getElementById('ZoomPictureImg').style.width = parseInt(document.getElementById('ZoomPictureImg').style.height) / iRatio + 'px';
	}
	if (psDir == 'Width') {
		document.getElementById('ZoomPictureImg').style.width = parseInt(document.getElementById('ZoomPicture').style.width) - 40 + 'px';
		document.getElementById('ZoomPictureImg').style.height = iRatio * parseInt(document.getElementById('ZoomPictureImg').style.width) + 'px';
	}
	if (psDir == 'Actual') {
	}
	if (isNaN(parseInt(document.getElementById('ZoomPictureImg').style.height))) {iImgLgH =0} else {iImgLgH = parseInt(document.getElementById('ZoomPictureImg').style.height)}
	if (isNaN(parseInt(document.getElementById('ZoomPictureImg').style.width))) {iImgLgW =0} else {iImgLgW = parseInt(document.getElementById('ZoomPictureImg').style.width)}

}

function fnImgLoad(sLink) {
	sLinkFullCur = sLink; //remeber current image
	
	//alert(document.getElementById('ZoomPicture').innerHTML);

	fnLinkToIndex();
	document.getElementById('ProdImg1').src = arLinkThumb[iLinkCur].replace("_Sm","_Md");
	
	var iThumbW = document.getElementById("ProdImg1").width;
	var iThumbH = document.getElementById("ProdImg1").height;
	var iImgAspPer = iThumbW / iThumbH;
	
	var fnWS = fnWinSize(); //fnWS.h, fnWS.w
	var iImgMaxPix = 800; //starting large picture size
	iImgMaxPix = fnWS.w - 400; //window width - the left nav + padding/ margin areas
	if (iImgMaxPix < 100) {iImgMaxPix = 250}

	if (isNaN(parseInt(document.getElementById('ZoomPictureImg').style.height))) {iImgLgH =0} else {iImgLgH = parseInt(document.getElementById('ZoomPictureImg').style.height)}
	if (isNaN(parseInt(document.getElementById('ZoomPictureImg').style.width))) {iImgLgW =0} else {iImgLgW = parseInt(document.getElementById('ZoomPictureImg').style.width)}
	if (iImgLgH != 0) { // instead of best recommendation on max size, use the max size of the previous view;
		if (iImgLgW > iImgLgH) {iImgMaxPix = iImgLgW} else {iImgMaxPix = iImgLgH}
	}
	
	var iImgW = 0;
	var iImgH = 0;
	if (iThumbW > iThumbH) { //'W > H (wide image)
		iImgW = iImgMaxPix;
		iImgH = iImgMaxPix / iImgAspPer;
	} else { //' W < H (high image)
		iImgH = iImgMaxPix;
		iImgW = iImgAspPer * iImgMaxPix;
	}
	// replace [XsLink], [XsWidth], [XsHeight]
	
	document.getElementById('ZoomPictureImg').style.visibility = 'hidden'; //display = "none"; //visibility = 'hidden';
	document.getElementById('ZoomLoading').style.display = 'block';
	if (bPauseLoadingImage) alert('Please examine loading image...');
	var sHTML = sHTMLPict + sHTMLLogo ; // retain original, so that it can be reused over and over
	sHTML = sHTML.replace("[XsLink]",sLink); //one replace is enough
	sHTML = sHTML.replace("[XsWidth]",iImgW);
	sHTML = sHTML.replace("[XsHeight]",iImgH);
	document.getElementById('ZoomPicture').innerHTML = sHTML;
	//document.getElementById('ZoomPictureImg').src= oLink.getAttribute("href"); //arLinks[iCurLink]; // change to new image

	oImg=document.getElementById('ZoomPictureImg'); //after it was recreated only can we assign a var to it
	if (oImg.complete) { 
		fnImgShow() 
	} else { //When target image has completely loaded
		oImg.onload=function(){ fnImgShow() } 
	}
	// plug in drag functinality
	oImg.onmousedown = function (e) { fnMouseDown(e) }
	oImg.ondragstart = function () {return false;} //else image will be dragable;
	oImg.style.cursor='pointer';
	oImg.onerror=function(){ document.getElementById('ZoomLoading').style.visibility = 'hidden'; } // on error, show nothing
}

function fnImgShow() {
	document.getElementById('ZoomLoading').style.display = 'none';//Hide "loading"
	if (bToAnimate){ 
		iOpacityStart =0.0;
		fnImgAnimate();
		oTimerOpacity=setInterval("fnImgAnimate()", 5)
	}
	document.getElementById('ZoomPictureImg').style.visibility = 'visible';
}
function fnImgAnimate(){ //Gradually increase opacity function
	var oImg=document.getElementById('ZoomPictureImg');
	//-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8-, first!
	if (bIE) { // IE browsers
		oImg.style.filter = "alpha(opacity=" + (iOpacityStart*100) + ")";
	} else {
		if (typeof oImg.style.MozOpacity!="undefined") //Old Mozilla syntax
			oImg.style.MozOpacity=iOpacityStart;
		if (typeof oImg.style.opacity!="undefined") //Standard opacity syntax
			oImg.style.opacity=iOpacityStart;
	}
	iOpacityStart +=iOpacityIncrement;
	if (iOpacityStart >1){
		if (typeof oTimerOpacity!="undefined")
			clearInterval(oTimerOpacity);
	}// if
}
function fnWriteHtml(){
	document.write("<div id=\"ZoomBack\" onclick=\"javascript:fnPreviewClose();\">");
	document.write("<\/div><!--Zoom1\/DarkenWindow (makes all in layers opaque in Firefox\/Opera) -->");
	document.write("");
	// -- Zoom2\/ Top Nav Bar --
	document.write("<div id=\"ZoomTop\" onclick=\"javascript:event.cancelBubble=true;\">");
	document.write("<table class=\"ZoomTopTable\"><tr><td class=\"ZoomTopTableTdL\">");
	document.write("	<a href=\"#\"><img src=\"http:\/\/www.lovingtruthbooks.com\/Images\/LinkToUs\/LinkToUs_88x32.gif\" ");
	document.write("	alt=\"Loving Truth Books & Gifts: Hand-selected, Biblically-based, quality books & gifts\" ");
	document.write("	class=\"ZoomTopLogo\"><\/a>");
	document.write("<\/td><td class=\"ZoomTopTableTdM\">");
	document.write("	<div class=\"ZoomTopTableTdMBlock\">");
	document.write("		<span class=\"TextEmph1\">LovingTruthBooks.com PREVIEW&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>");
	document.write("		<a href=\"javascript:fnZoom('In');\"> <img src=\"images\/Max.gif\" class=\"ZoomTopImgUpDw\"> Zoom In<\/a> |");
	document.write("		<a href=\"javascript:fnZoom('Out');\"> <img src=\"images\/Min.gif\" class=\"ZoomTopImgUpDw\"> Zoom Out<\/a> | ");
	document.write("		&nbsp;&nbsp;&nbsp;");
	document.write("		<span class=\"TextEmph1\">Fit:<\/span>");
	document.write("		<a href=\"javascript:fnZoom('Page');\"><img src=\"images\/Page.gif\" class=\"ZoomTopImgPgWd\"> Page<\/a> |");
	document.write("		<a href=\"javascript:fnZoom('Width');\"><img src=\"images\/Width.gif\" class=\"ZoomTopImgPgWd\"> Width<\/a>");
	document.write("		<\/div>");
	document.write("<\/td><td class=\"ZoomTopTableTdR\">");
	document.write("	<a href=\"\" onclick=\"javascript: fnPreviewClose(); return false;\">");
	document.write("	<img src=\"images\/closelabel.gif\" class=\"ZoomTopImgCls\" alt=\"Close Zoom In Screen\"><\/a>");
	document.write("<\/td><\/tr><\/table>");
	document.write("<\/div>");
	// -- Left Nav --
	document.write("<div id=\"ZoomLeft\" onclick=\"javascript:event.cancelBubble=true;\">");
	document.write("<h2>Views (click to preview):<\/h2><br><br>");
	document.write("<div id=\"XsPreviewThumbs1\"><\/div>");
	document.write("<\/div>");
	// --Picture Holder --
	document.write("<div id=\"ZoomPicture\" onclick=\"javascript:event.cancelBubble=true;\">");
	document.write(sHTMLPict + sHTMLLogo);
	document.write("<\/div>");
	// --Zoom3\/Loading Box --
	document.write("<div id=\"ZoomLoading\" onclick=\"javascript:event.cancelBubble=true;\">");
	document.write("<img id=\"ZoomLoadingImg\" src=\"images\/Loading2.gif\">");
	document.write("<div id=\"ZoomLoadingTx\">Loading...</div>");
	document.write(sHTMLLogo);
	document.write("<\/div>");
	// --Left, Right Arrows --
	document.write("<div id=\"ZoomArrowLeft\" onclick=\"javascript:event.cancelBubble=true;fnImgArrow('Back');\"");
	document.write(" onmouseover=\"javascript:this.style.cursor='pointer'\" onmouseout=\"this.style.cursor='default'\">");
	document.write("<a href=\"#\">&lt;</a>");
	document.write("<\/div>");
	document.write("<div id=\"ZoomArrowRight\" onclick=\"javascript:event.cancelBubble=true;fnImgArrow('Next')\"");
	document.write(" onmouseover=\"javascript:this.style.cursor='pointer'\" onmouseout=\"this.style.cursor='default'\">");
	document.write("<a href=\"#\">&gt;</a>");
	document.write("<\/div>");
}