//* PhotoView.js -- Photo Viewer Script
//*
//* Copyright (C) Tom Nelson, 2003
//*

var oThumbView;
var photosPath='';

var thumbsViewWidth =11;
var thumbsViewHeight=6;
var thumbsViewBorder=3;

var thumbCellStyle="";
var thumbCellBorder=1;
var thumbWidth=thumbHeight=72;
var thumbResize=false;

var previewCellStyle="background-color:808080";
var previewWidth=previewHeight=240;
var previewResize=false;
var previewBorder=1;
var previewTopCell=0;	// Can be negative
var previewLeftCell=7;	// Can be negative

// Internals
var pageTabWidth=21;
var pageTabHeight=28;
var	pageTabPad = 2;
var	pageTabShift = -5;
var pageTabTextPos = 6;
var stCursor = (navigator.appName == "Microsoft Internet Explorer") ? "hand" : "pointer";

// Dynamically load a script
function jsLoadScript(stURL) {
	fScript = false;
	var oScript = document.createElement("script");
	oScript.type="text/javascript";
	oScript.src = stURL;
	document.getElementsByTagName("head")[0].appendChild(oScript); 
}

function jsViewerLayout(viewWidth,viewHeight,viewCellStyle,previewTop,previewLeft,tWidth,tHeight) {
 	thumbsViewWidth = viewWidth;
	thumbsViewHeight= viewHeight;
	thumbCellStyle=viewCellStyle;
	previewTopCell= previewTop;		// Can be negative
	previewLeftCell= previewLeft;	// Can be negative
	thumbWidth = tWidth;
	thumbHeight = tHeight;
}


// Photo object
function Photo(photoName,photoDate,desc1,desc2) {
	//this.cacheImg = new Image;
	this.photoName = photoName;
	this.photoDate = photoDate;
	this.desc1 = desc1;
	this.desc2 = desc2;
	
	this.previewName = photosPath + "previews/" + this.photoName;
	this.thumbName = photosPath + "thumbs/" + this.photoName;
	
	//this.cacheImg.src = this.thumbName;	// Force thumbs into cache
}

// Subject object
function Subject(list,folder,tabLabel,category,hover,longDesc) {
	this.photoList = new Array;
	for (var ii=0; ii<list.length; ii++)
		this.photoList[ii] = list[ii];
	this.tabLabel = tabLabel;
	this.folder = folder;
	this.category = category;
	this.description = hover;
	this.longDesc = longDesc;
	this.photoList 
}

var timeoutId = 0;
var timeCount = 0;

var mouseX = 0;
var mouseY = 0;

function jsStartHoverTimer(html) {
	jsSetHoverHtml(html);
		
	timeCount = 0;
	timeoutId = setTimeout("jsTimeout()",100);
}

function jsStopHoverTimer() {
	clearTimeout(timeoutId);
	timeCount = 0;
	var pn = document.getElementById("photoname");
	pn.style.visibility = "hidden";
}

function jsSetHoverHtml(html) {
	var pn = document.getElementById("photoname");
	pn.innerHTML = html;
	return;
}

// Timeout Processing
function jsTimeout() {
	if (timeCount < 10) {
		++timeCount;
	}
	else {
		var pn = document.getElementById("photoname");
		pn.style.left = mouseX+10;
		pn.style.top = mouseY-20;
		pn.style.visibility = "visible";
		timeCount = 0;
	}
	timeoutId = setTimeout("jsTimeout()",100);
}

function jsMouseMove(evt) {
	evt = (evt) ? evt : event;

	var pn = document.getElementById("photoname");

	if (evt.layerX) {
		x = evt.clientX-oThumbView.offsetLeft;	//evt.layerX;
		y = evt.clientY-oThumbView.offsetTop;	//layerY;
	}
	else if (evt.offsetX) {
		x = evt.clientX-oThumbView.offsetLeft;		//evt.offsetX;
		y = evt.clientY-oThumbView.offsetTop;		//evt.offsetY;
	}
	else
		x = y = 0;
		
	// Ignore mouse jitter
	if (Math.abs(mouseX-x) > 1 || Math.abs(mouseY-y) > 1) {
		timeCount = 0;
		var pn = document.getElementById("photoname");
		pn.style.visibility = "hidden";
	}
	mouseX = x;
	mouseY = y;
}

function jsOnUnload() {
	jsClosePhotoViewerWindow();
}

var iSubject = 0;	// Current subjects
var nSubjects = 0;	// Subject total
var oSubjects;		// Subject objects[]

var nDefs = 0;		// Photos Active
var photoList;		// Active photoList

function jsLoadViewer(photoDefs,viewerId) {
	var d=document; 
  
	oThumbView = document.getElementById(viewerId);
	if (oThumbView==null) {
		alert("Invalid thumbsView object specified");
		return;
	}
  //	window.open("photos.xml","debug","resizable,scrollbars,width="+photoWindowWidth+",height="+photoWindowHeight,true);

	if (photoDefs.length== 0 || photoDefs.length % 6 != 0) {
		alert("Invalid argument count for subjects array.");
		return;
	}
	//jsLoadScript("ControlTabs.js");

	nSubjects = photoDefs.length / 6;
	oSubjects = new Array();

	var i,j; //args=jsLoadImages.arguments;

	for(i=0,j=0; j<nSubjects; i+=6,j++) {
		oSubjects[j] = new Subject(photoDefs[i],photoDefs[i+1],photoDefs[i+2],photoDefs[i+3],photoDefs[i+4],photoDefs[i+5]);
	}
	oThumbView.onmousemove = jsMouseMove;
	
	window.onunload = jsOnUnload;
	
	jsPaintViewer();
	jsLoadViewerSubject(0);
}

var nThumbs = 0;
var nThumbsLoaded = 0;

// Load'em up
var subjectTabImg = new Image();
subjectTabImg.src = "subject-tab.jpg";

var tabEndImg = new Image();
tabEndImg.src = "tab-end.jpg";

var pageTabBase = new Image();
pageTabBase.src = "page-base.jpg"

var pageTabImg = new Image();
pageTabImg.src = "page-tab.jpg"

function jsLoadViewerSubject(iSub) {
	iSubject = iSub;
	var oSubject = oSubjects[iSub];
	
	photosPath = oSubject.folder+'/';

	var i,j; //args=jsLoadImages.arguments;

	if (oSubject.photoList.length== 0 || oSubject.photoList.length % 4 != 0) {
		alert("Invalid argument count for 'photoList' on subject "+oSubject.tabLabel);
		return;
	}
	nDefs=oSubject.photoList.length / 4;

	photoList = new Array();
	
	for(i=0,j=0; j<nDefs; i+=4,j++) {
		photoList[j] = new Photo(oSubject.photoList[i],oSubject.photoList[i+1],oSubject.photoList[i+2],oSubject.photoList[i+3]);
	}
	
	oThumbView.oLongDesc.innerHTML = oSubject.longDesc;
	
//	jsLoadSubjectControls(iSub);
	jsLoadPageControls(0);
	jsLoadThumbs(0);
}

function jsLoadViewerPage(iPage) {
	jsLoadThumbs(iPage);
}

function jsPaintViewer() {
		
	var thumbCellWidth=thumbWidth+thumbCellBorder*2;
	var thumbCellHeight=thumbHeight+thumbCellBorder*2;
	
	var previewCellWidth = Math.floor((previewWidth+previewBorder*2+thumbCellWidth)/thumbCellWidth);
	var previewCellHeight= Math.floor((previewHeight+previewBorder*2+thumbCellHeight)/thumbCellHeight);
	var previewRightCell = previewLeftCell + previewCellWidth - 1;
	var previewBottomCell= previewTopCell + previewCellHeight - 1;
	
	var previewPxLeft = Math.max(0,previewLeftCell) * thumbCellWidth;
	var previewPxTop = Math.max(0,previewTopCell) * thumbCellHeight;
	
	var previewPxWidth= previewCellWidth * thumbCellWidth;
	var previewPxHeight= previewCellHeight * thumbCellHeight;

	var viewTop=5;
	var viewLeft=5;
	
	viewPxLeft = viewLeft*thumbCellWidth;
	viewPxWidth = thumbsViewWidth * thumbCellWidth + thumbsViewBorder*2;
	viewPxHeight= thumbsViewHeight * thumbCellHeight + thumbsViewBorder*2;

	var previewTopPxMargin = Math.floor((previewPxHeight - previewHeight - previewBorder*2 - thumbCellBorder*2)/2);
	var previewLeftPxMargin= Math.floor((previewPxWidth  - previewWidth - previewBorder*2 - thumbCellBorder*2)/2);

	viewerWidth = viewLeft*2+(thumbsViewWidth * thumbCellWidth)+10;
	viewerHeight = viewTop*2+(thumbsViewHeight * thumbCellHeight)+24;

	var x,y;
	
	var tempHTML="<div style='position:absolute; background-color:C0C000; width:"+(viewerWidth+viewLeft+2+previewPxWidth)+";height:"+(viewerHeight+1)+";border:1px outset #A0A000;border-bottom-width:0'>";
		
	for (y=0,nThumbs=0; y<thumbsViewHeight; y++) {
		for (x=0; x<thumbsViewWidth; x++) {
			tempHTML += "<div style='" +thumbCellStyle+ ";position:absolute; overflow:hidden; width:" +thumbCellWidth+ "px;height:" +thumbCellHeight+ "px;left:" +(x*thumbCellWidth+viewLeft)+ "px;top:" +(y*thumbCellHeight+viewTop)+ "px;border:" +thumbCellBorder+ "px outset #C0C000;'>";
	   		tempHTML += "<img name='t" +nThumbs+ "' style='position:absolute; cursor:"+stCursor+"; visibility:visible' onload='jsOnLoadThumb(this)'>";
			tempHTML += "</div>";
			nThumbs++;
		}
	}
	// Preview Pane
	tempHTML += "<div style='" +previewCellStyle+ ";position:absolute; left:" +(thumbCellWidth*thumbsViewWidth+viewLeft*2)+ "px; top:"+viewTop+"px; width:" +previewPxWidth+ "px; height:" +previewPxHeight+ "px; border:" +thumbCellBorder+ "px outset gray; '>";
	tempHTML += "<div id=\"previewcell\" style=\"position:absolute; left:" +previewLeftPxMargin+ "px; top:" +previewTopPxMargin+ "px; width:" +(previewWidth*previewBorder*2)+ "px; height:" +(previewHeight*previewBorder*2)+ "px; overflow:hidden\">";
	tempHTML += "<img name='previewpane' style=\"" +previewCellStyle+ "; visibility:hidden; border:" +previewBorder+ "px solid black\"></div></div>";

	tempHTML +="<div id='longDesc' align='center' style='position:absolute; z-index:2;top:"+(thumbsViewHeight * thumbCellHeight+viewTop+6)+";left:"+viewLeft+";width:"+(viewerWidth-viewLeft*2)+";height:1em;font-size:12;font-weight:bold;font-family:Arial,Tahoma,Helv'>The long description goes heres!</div>";

	tempHTML += "</div>";

	// Subject Controls
	tempHTML += "<div id='subjectCtrl' style='position:absolute;overflow:hidden;z-index:10;width:" +(viewerWidth+previewPxWidth+viewLeft+2)+ ";height:"+(pageTabHeight+10)+";top:" +(viewerHeight)+ ";left:" +(0)+ ";border:0px gray dashed'></div>";
	
	// Page Tabs
	tempHTML += "<div id='pageCtrl' style='position:absolute;overflow:hidden;z-index:10;width:" +(previewPxWidth-1)+ ";height:"+(pageTabHeight-6)+";top:" +(viewTop+previewPxHeight+6)+ ";left:"+(viewerWidth+2)+"'></div>";

	// Hover Tag
	//! Tag must be relative or NS will not set the width and will not allow it outsize of our "sized" base <div>
	//! Must then be contained in an position:absolute <div> otherwise it will be as wide as our "sized" base <div>. Both for NS & IE
	tempHTML += "<div id='hoverFix' style='position:absolute;z-index:20'>";
	tempHTML += "<div id='photoname' style='position:relative;z-index:20;visibility:hidden;padding:0 3;font-size:9;font-weight:bold;font-family:Arial,Tahoma,Helv;color:000000;background-color:lightyellow;border:1px black solid'>Hello World!</div>";
	tempHTML += "</div>";
	
	nThumbsLoaded = 0;
	oThumbView.style.position="relative";
	
	oThumbView.innerHTML = tempHTML;
	
	var oHover = document.getElementById("photoname");

	jsLoadSubjectControls(0);

	// Adjust base element so other page elements will flow around.
	oThumbView.style.width = (previewPxLeft+previewPxWidth < viewerWidth ? viewerWidth : previewPxLeft+previewPxWidth);
	oThumbView.style.height = viewerHeight+pageTabHeight;	// Add height of tab controls

	for(j=0; j<nDefs && j<nThumbs; j++) {
		var thumb = document.images["t"+j];
		thumb.iPhoto = j;

		thumb.onclick = jsOnClickThumb;
	//	thumb.onload = jsOnLoadThumb;
		thumb.onmouseover = jsOnMouseOverThumb;
		thumb.onmouseout = jsOnMouseOutThumb;
	//	thumb.onmousemove = jsMouseMove;
	}
	
	var preview = document.images["previewpane"];
	preview.style.cursor = stCursor;

	preview.onload = jsOnLoadPreview;
	preview.onmouseover = jsOnMouseOverThumb;
	preview.onclick = jsOnClickThumb;
	
	preview.onmouseover = jsOnMouseOverThumb;
	preview.onmouseout = jsOnMouseOutThumb;
	//preview.onmousemove = jsMouseMove;

	window.onblur = jsOnBlurThumb;
	
	// Save references
	//oThumbView.oSubjectCtrl = document.getElementById("subjectCtrl");
	oThumbView.oPageCtrl = document.getElementById("pageCtrl");
	oThumbView.oLongDesc = document.getElementById("longDesc");
}

function jsLoadSubjectControls(iTab) {
	
	var tabDefs = new Array();
	for (ii=0; ii < nSubjects; ii++)
		tabDefs[ii] = [ oSubjects[ii].tabLabel, oSubjects[ii].description, jsOnClickSubjectTab ];
		
	ControlTabs.Create('subjectCtrl',{ invert:true,overlap:2, rise:6,textPad:4, textPadV:4, basePad:5, color:'#808000', colorSelect:'#C0C000', fontSize:10 },tabDefs,0);
}

function jsOnClickSubjectTab(iTab) {
	if (iTab != iSubject)
		jsLoadViewerSubject(iTab);
}

function jsLoadPageControls(iTab) {

	pageTabCount = Math.floor((photoList.length+nThumbs-1)/nThumbs);

	var tabDefs = new Array();
	for (ii=0; ii < pageTabCount; ii++)
		tabDefs[ii] = [ ""+(ii+1), "Page "+(ii+1), jsOnClickPageTab ];
		
	ControlTabs.Create('pageCtrl',{ invert:true, overlap:0, baseLine:false, rise:0, textPad:7, textPadV:3, basePad:2, color:'#808000', colorSelect:'#D0D020', fontSize:10 },tabDefs,0);

/*	var tempHTML = "<img src='page-base.jpg' style='position:absolute; top:0;left:0;z-index:2'>";
	for (ii=0; ii < pageTabCount; ii++) {
		tempHTML += "<div id='ptb"+ii+"' style='position:absolute;z-index:"+(ii==0 ? 3 : 1)+";cursor:"+stCursor+";top:"+(ii==0 ? 0 : pageTabShift)+";left:"+((pageTabWidth*ii)+pageTabPad)+"' onclick='jsOnClickPageTab("+ii+")' onmouseover='jsOnMouseOverPageTab("+ii+")' onmouseout='jsOnMouseOutPageTab("+ii+")'>";
		tempHTML += "<img src='page-tab.jpg' style=\"position:absolute;cursor:"+stCursor+";top:0;left:0;z-index:1\">";
		tempHTML += "<div align=center style=\"position:relative;cursor:"+stCursor+";font-size:12;font-weight: bold;font-family: Arial, Tahoma, Helv; top:"+pageTabTextPos+";left:0;width:"+pageTabWidth+";z-index:4;color:000000\">"+(ii+1)+"</div>";
		tempHTML += "</div>";
	}
	tempHTML += "</div>";
	oThumbView.oPageCtrl.innerHTML = tempHTML;
	
	// Adjust Page Controls
	oThumbView.oPageCtrl.iTab = 0;
	//oThumbView.oPageCtrl.style.width = (pageTabCount * pageTabWidth)+(pageTabPad*2) + "px";
	//oThumbView.oPageCtrl.style.left = (viewPxLeft+viewerWidth)-((pageTabCount * pageTabWidth)+pageTabPad*2);
*/
}

function jsOnClickPageTab(iTab) {
	var oPageCtrl = oThumbView.oPageCtrl;
	if (iTab != oPageCtrl.iTab)
		jsLoadThumbs(iTab);
}

function jsLoadThumbs(iPage) {	// 0-based

	for (var ii=0; ii<nThumbs; ii++) {
		var thumb = document.images["t"+ii];
		thumb.src = "";
		thumb.style.visibility = "hidden";
	}
	for (var ii=0,iPhoto=iPage*nThumbs; ii<nThumbs; ii++,iPhoto++) {
		var thumb = document.images["t"+ii];
		if (iPhoto<nDefs) {
			thumb.iPhoto = iPhoto;
			thumb.src = photoList[iPhoto].thumbName;
		
			thumb.onclick = jsOnClickThumb;
		//	thumb.onload = jsOnLoadThumb;
			thumb.onmouseover = jsOnMouseOverThumb;
			thumb.onmouseout = jsOnMouseOutThumb;
			thumb.style.cursor = "wait";
		//	thumb.onmousemove = jsMouseMove;
		//	thumb.onblur = jsOnBlurThumb;
	

		//	thumb.style.position = "absolute";
		//	thumb.style.cursor = "pointer";

		//	thumb.src = d.photoList[j].thumbName;
		}
	}
	jsLoadPreview(0);
}

/*
function jsOnClickPageTab(iTab) {
	//var oPageCtrl = document.getElementById("pageCtrl");
	var oPageCtrl = oThumbView.oPageCtrl;
	if (iTab != oPageCtrl.iTab) {
		var oCtrl = document.getElementById("ptb"+oPageCtrl.iTab);
		oCtrl.style.top = pageTabShift + "px";
		oCtrl.style.zIndex = 1;
		
		var oCtrl = document.getElementById("ptb"+iTab);
		oCtrl.style.top = (oCtrl.offsetTop - pageTabShift) + "px";
		oCtrl.style.zIndex = 3;
		
		oPageCtrl.iTab = iTab;
		jsLoadThumbs(iTab);
	}
	if (iTab == oPageCtrl.iTab)
		jsSetHoverHtml("Current&nbsp;page");
	else
		jsSetHoverHtml("View&nbsp;page&nbsp;"+(iTab+1));
}
*/

// Event Handler: Image context
function jsOnMouseOverPageTab(iTab) {
	var oPageCtrl = document.getElementById("pageCtrl");
	if (iTab == oPageCtrl.iTab)
		jsStartHoverTimer("Current&nbsp;page");
	else
		jsStartHoverTimer("View&nbsp;page&nbsp;"+(iTab+1));
}

function jsOnMouseOutPageTab(iTab) {
	jsStopHoverTimer();
}

// Event Handler: Image context
// Loaded image could be larger or smaller than the desired size.
function jsOnLoadThumb(thumb) {
	if (nThumbsLoaded >= nThumbs)
		alert("Hey! jsOnLoadThumb when all thumbs loaded!");

	if (thumbResize)
		if (thumb.width > thumb.height)
			thumb.style.width = thumbWidth;
		else
			thumb.style.height= thumbHeight;
	 
	thumb.style.marginTop = Math.floor((thumbHeight-thumb.height) / 2);
	thumb.style.marginLeft = Math.floor((thumbWidth-thumb.width) / 2);
	
//	if (++nThumbsLoaded == nThumbs) {
//		for (ii=0; ii<nThumbs; ii++)
//			document.images["t"+ii].style.visibility = "visible";
//	}
	thumb.style.visibility = "visible";
}

var fFocus = true;

function jsOnBlurThumb() {
	jsStopHoverTimer();
	fFocus = false;
}

function jsOnFocus() {
	fFocus = true;
}

// Event Handler: Image context
function jsOnMouseOverThumb() {
	jsLoadPreview(this.iPhoto);
	jsStartHoverTimer(photoList[this.iPhoto].photoName.substring(0,photoList[this.iPhoto].photoName.length-4));
}

function jsOnMouseOutThumb() {
	jsStopHoverTimer();
}

// Event Handler: Image context
function jsOnClickThumb() {
	jsOpenPhotoViewerWindow(this.iPhoto);
}

var previewImg = new Image;

function jsLoadPreview(iPhoto) {
	previewImg.onload = jsOnLoadPreviewCached;
	previewImg.iPhoto = iPhoto;
	previewImg.src = photoList[iPhoto].previewName;
}

function jsOnLoadPreviewCached() {
	var preview = document.images["previewpane"];
	preview.iPhoto = this.iPhoto;

	preview.style.visibility = "hidden";
	preview.src = this.src;
}

// Event Handler: Image context
// Loaded image could be larger or smaller than the desired size.
function jsOnLoadPreview() {
	if (previewResize) {
		// Scale Image to fit
		if (this.width > this.height) {
			this.style.width = previewWidth;
			this.style.height = "";
		}
		else {
			this.style.width = "";
			this.style.height= previewHeight;
		}
	}
	this.style.marginTop = Math.floor((previewHeight - this.height) / 2);
	this.style.marginLeft = Math.floor((previewWidth - this.width) / 2);
	this.style.visibility = "visible";
	document.images["t"+(this.iPhoto % nThumbs)].style.cursor = stCursor;
}

//*
//* Photo Viewer Windows
//*
viewerBorder=2;

photoLong=480;		// Long side of photos (max)
photoShort=320;		// Short size of photos (max)
photoBorder=1;		// Width of border around photos
photoPadding=2;		// Width of padding outsize of border

photoVSpace=80;		// Height of text areas above/below horizontal photos
photoHSpace=80;		// Width of text areas on left/right of vertical photos

photoFrame=photoLong+(photoBorder*2);
photoWindowWidth=Math.max(photoLong+(photoHSpace*2),photoShort+(photoHSpace*4))+(photoBorder*2)+(photoPadding*2);
photoWindowHeight=Math.max(photoLong,photoShort+(photoVSpace*2))+(photoBorder*2)+(photoPadding*2);
photoLeftLine=photoHSpace+Math.max(Math.floor((photoLong-photoShort)/2),photoHSpace);
photoTopLine=Math.max(Math.floor((photoLong-photoShort)/2),photoVSpace);
photoBotLine=photoTopLine+photoShort+photoBorder*2+photoPadding*2;

var viewerWindow;

function jsOpenPhotoViewerWindow(iPhoto) {
	if (!viewerWindow || viewerWindow.closed) {
		viewerWindow = window.open("","","width="+photoWindowWidth+",height="+photoWindowHeight);
		var oDoc = viewerWindow.document.open("text/html");
		oDoc.write(jsPhotoViewerHTML(iPhoto));
		oDoc.close();
	}
	else
		jsViewerLoadPhoto(viewerWindow,iPhoto);

}

function jsClosePhotoViewerWindow() {
	if (viewerWindow)
		viewerWindow.close();
}

// Event Handler: Window Loaded
function jsOnLoadPhotoViewer(win) {
	window.status = win.document.URL;	// **DEBUG**
	jsViewerLoadPhoto(win,win.iPhoto);
}


var img = new Image();
img.onload = jsOnLoadPhoto

function jsViewerLoadPhoto(win,iPhoto) {

	img.iPhoto = iPhoto;
	img.win = win;
	img.src = photosPath + "photos/" + photoList[iPhoto].photoName;
}

// Event Handler:
function jsOnLoadPhoto() {	
	var iPhoto = this.iPhoto;
	var win = this.win;
	
	var oTd,photo;
	
	var sHTML;
	
	oTd = win.document.getElementById('date');		
	oTd.innerHTML = "<b>" + photoList[iPhoto].photoDate + "</b>";

	oTd = win.document.getElementById('ident');
	oTd.innerHTML = "Photo #1-"+(iPhoto+1)+"<br>"+photoList[iPhoto].photoName.substring(0,photoList[iPhoto].photoName.length-4);

	var dW = Math.min(photoLong, photoLong-this.width);
	var dH = Math.min(photoLong, photoLong-this.height);

	var oDesc1;
	var oDesc2;
	if (dW < dH){
		oDesc1x = win.document.getElementById('desc1v');
		oDesc2x = win.document.getElementById('desc2v');
		
		oDesc1 = win.document.getElementById('desc1h');
		oDesc2 = win.document.getElementById('desc2h');
	}
	else {
		oDesc1x = win.document.getElementById('desc1h');
		oDesc2x = win.document.getElementById('desc2h');

		oDesc1 = win.document.getElementById('desc1v');
		oDesc2 = win.document.getElementById('desc2v');
	}
	oDesc1x.innerHTML = "";
	oDesc2x.innerHTML = "";
	
	oDesc1.innerHTML = "<b>" + photoList[iPhoto].desc1 + "</b>";
	oDesc2.innerHTML = "<b>" + photoList[iPhoto].desc2 + "</b";

	photo = win.document.images["photo"];
	photo.style.visibility = "hidden";
	photo.src = photosPath + "photos/" + photoList[iPhoto].photoName;

//! NOTE: Netscape does not like .currentStyle, IE does not like .defaultView
//	var blw = document.defaultView.getComputedStyle(photo,null).borderLeftWidth; 
//	var w = this.width + parseInt(photo.currentStyle.borderLeftWidth) + parseInt(photo.currentStyle.borderRightWidth);
//	var h = this.height + parseInt(photo.currentStyle.borderTopWidth) + parseInt(photo.currentStyle.borderBottomWidth);

	var w = this.width;
	var h = this.height;
	photo.style.marginTop = photoBorder + (h < photoLong) ? (photoLong-h) / 2 : 0;
	photo.style.marginLeft = photoBorder + (w < photoLong) ? (photoLong-w) / 2 : 0;
	photo.style.visibility = "visible";

//! DO NOT use .all[] since it is not supported by NetScrape.
//! NOTE: IE 4 does not support .getElementById().

	win.document.getElementById("first").disabled = (iPhoto==0);;
	win.document.getElementById("previous").disabled = (iPhoto==0);
	win.document.getElementById("next").disabled = (iPhoto >= photoList.length-1);
	win.document.getElementById("last").disabled = (iPhoto >= photoList.length-1);

	win.iPhoto = iPhoto;

	win.focus();
}

function jsViewerFirst(win) {
	jsViewerLoadPhoto(win,0);
}

function jsViewerPrevious(win) {
	jsViewerLoadPhoto(win,win.iPhoto-1);
}

function jsViewerNext(win) {
	jsViewerLoadPhoto(win,win.iPhoto+1);
}

function jsViewerLast(win) {
	jsViewerLoadPhoto(win,photoList.length-1);
}


function jsViewerLoaded(win) {
	window.status = win.document.URL;	// **DEBUG**
	jsViewerLoadPhoto(win,win.iPhoto);
}


// Event Handler
var fSized = false;

function jsViewerLoadedOLD(win) {

	if (!fSized) {
		win.resizeTo(640,480);
		wDiff = 640-win.document.body.clientWidth;
		hDiff = 480-win.document.body.clientHeight;
	
		fSized = true;
	}
	wClient = win.document.body.scrollWidth;
	hClient = win.document.body.scrollHeight;
	win.resizeTo(wClient+wDiff,hClient+hDiff);	

	window.status = win.document.URL;	// **DEBUG**
	jsViewerLoadPhoto(win,win.iPhoto);
}


function jsPositionElement(id,left,top,width,height) {
	var obj=document.getElementById(id);
	obj.style.left=left;
	obj.style.top=top;
	obj.style.width=width;
	obj.style.height=height;
}

<!--Fixed Elements -->
function jsPhotoDateHTML() {
	var txt = 
		"<div style='position:absolute;left:"+(photoLeftLine-photoHSpace*2)+";top:"+(photoTopLine-photoVSpace)+";width:"+(photoHSpace*2)+";height:"+photoVSpace+"'>"+
		"<table cellspacing=0 cellpadding=2><tr><td id='date' width=160 height="+photoVSpace+" align=right valign=bottom ></td></tr></table>"+
		"</div>";
	
	return txt;
}
function jsPhotoNameHTML() {
	var txt = 
		"<div style='position:absolute;left:0;top:"+photoTopLine+";width:"+photoHSpace+";height:"+photoVSpace+"'>"+
		"<table cellspacing=0 cellpadding=2><tr><td id='ident' width="+photoHSpace+" height=328 align=right valign=top style='font-size:11'></td></tr></table>"+
		"</div>";
	
	return txt;
}
function jsPhotoImageHTML() {
	var txt = 
		"<div style='position:absolute;left:"+(photoHSpace+photoPadding)+";top:"+photoPadding+";width:"+photoFrame+";height:"+photoFrame+"'><IMG name='photo' border="+photoBorder+" style='visibility:hidden'>"+
		"</div>";

	return txt;
}

function jsPhotoControlsHTML() {
	//! Note: Netscape buttons default to non-zero padding
	// input { font-size:12; font-weight: bold; padding:0px }
	var txt = 
		"<div style='position:absolute;left:"+(photoWindowWidth-photoHSpace*2)+"; top:"+(photoWindowHeight-(photoVSpace/2))+"; width:"+(photoHSpace*2)+"; height:"+(photoVSpace/2)+"'>" +
		"<form ID=Form1>&nbsp"+
		"<input id='first' alt='First' TYPE='BUTTON' VALUE='<<' ONCLICK='window.opener.jsViewerFirst(window)'>"+
		"<input id='previous' alt='Previous' TYPE='BUTTON' VALUE='< ' ONCLICK='window.opener.jsViewerPrevious(window)'>"+
		"<input id='close' alt='Close' TYPE='BUTTON' VALUE='Close' ONCLICK='window.close()'>"+
		"<input id='next'  alt='Next' TYPE='BUTTON' VALUE=' >' ONCLICK='window.opener.jsViewerNext(window)'>"+
		"<input id='last'  alt='Last' TYPE='BUTTON' VALUE='>>' ONCLICK='window.opener.jsViewerLast(window)'>"+
		"</form></div>";
		
	return txt;
}

<!--Horizontal Elements -->
function jsPhotoHorzDescHTML() {
	var txt =
		"<div style='position:absolute;left:"+(photoHSpace+photoLong+photoPadding*2+photoBorder*2-384)+"; top:"+(photoTopLine-photoVSpace)+"; width:384; height:"+photoVSpace+"'>"+
		"<table cellspacing=0 cellpadding=2><tr><td id='desc1h' width=388 height="+photoVSpace+" align=right valign=bottom></td></tr></table>"+
		"</div>"+
		"<div style='position:absolute;left:"+photoHSpace+"; top:"+photoBotLine+"; width:384; height:"+photoVSpace+"'>"+
		"<table cellspacing=0 cellpadding=2><tr><td id='desc2h' width=388 height="+photoVSpace+" align=left valign=top style='font-size:11'></td></tr></table>"+
		"</div>";
		
	return txt;
}

<!--Vertical Elements -->
function jsPhotoVertDescHTML() {
	var txt =
		"<div style='position:absolute;left:"+(photoLeftLine+photoShort+photoPadding*2+photoBorder*2)+"; top:"+photoTopLine+"; width:160; height:160'>"+
		"<table cellspacing=0 cellpadding=2><tr><td id='desc1v' width=160 height=160 align=left valign=top></td></tr></table>"+
		"</div>"+
		"<div style='position:absolute;left:"+(photoLeftLine+photoShort+photoPadding*2+photoBorder*2)+"; top:"+(photoBotLine-150)+"; width:160; height:150'>"+
		"<table cellspacing=0 cellpadding=2><tr><td id='desc2v' width=160 height=160 align=left valign=bottom style='font-size:11'></td></tr></table>"+
		"</div>";
		
	return txt;
}
function jsPhotoViewerElementHTML() {
	var txt = 
		"<div styles='position:relative;left:0; top:0; width:"+photoWindowWidth+"; height:"+photoWindowHeight+";overflow:hidden; border:2px solid black'>"+
		jsPhotoDateHTML()+jsPhotoNameHTML()+jsPhotoImageHTML()+jsPhotoControlsHTML()+jsPhotoHorzDescHTML()+jsPhotoVertDescHTML()+
		"</div>";
		
	return txt;
}

function jsPhotoViewerHTML(iPhoto) {
	var txt = 
		"<html><head>"+
		"<script>iPhoto="+iPhoto+";</script>"+
		"<style type='text/css'>"+
		"div {position:absolute; font-size:12; font-family:Arial,Tahoma,Helv}"+
		"td	{font-size:12; font-family: Arial,Tahoma,Helv}"+
		"input {font-size:12; font-weight: bold; padding:0px}"+
		"</style></head>"+
		"<body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 onload=\'window.opener.jsOnLoadPhotoViewer(window)\'>"+
		jsPhotoViewerElementHTML()+
		"</body></html>";
		
	return txt;
}