//values of these are set on the calling page
var intThumbnailColumns, intThumbnailWidth, intThumbnailHeight;
var strThumbnailsPath, strLargeImagesPath, rgbThumbnailHighlight;


var arrImageFilenames = new Array(); //client side arrays to hold image filenames and alt text; the client-side 
var arrImageAltText = new Array();   //javascript code that fills these arrays is generated by the server-side asp script

var ns, ns4, ns5;
ns = navigator.appName == "Netscape";				//true if navigator
ns4 = (ns && parseInt(navigator.appVersion) == 4);	//true if navigator 4
ns5 = (ns && parseInt(navigator.appVersion) > 4);	//true if > navigator 4

var refLargeImage;				//holds reference to tblLargeImage, the display area for large images
var refPlayStop;				//holds reference to <td> containing Play/Stop slideshow control
var intCurrentLargeImage = -1;	//holds index of currently displayed large picture; -1 denotes no image
var refCaption;					//holds reference to caption span
var refPlay;					//holds reference to slideshow timer
var quote = String.fromCharCode(34);		//holds the quote character

function initialize(){
	if (ns4){
		refLargeImage = document['tblLargeImage'];
		refPlayStop = document['tdPlayStop'];
		refCaption = document['divCaption'];
	}
	else if (ns5){
		refLargeImage = document.getElementById('tblLargeImage');
		refPlayStop = document.getElementById('tdPlayStop');
		refCaption = document.getElementById('divCaption');
	}
	else {
		refLargeImage = document.all ? document.all['tblLargeImage'] : null;
		refPlayStop = document.all ? document.all['tdPlayStop'] : null;
		refCaption = document.all ? document.all['divCaption'] : null;
	}
	intCurrentLargeImage = -1;
}

function toggleSlideshow(){
	if (refPlayStop.innerHTML=="Stop"){
		clearInterval(refPlay);
		refPlayStop.innerHTML="Play";	
	} else {
		nextSlide();
		refPlay=window.setInterval("nextSlide();", 3000);
		refPlayStop.innerHTML="Stop";
	}
}

function nextSlide(){
	//if intCurrentLargeImage points to last image or is out of bounds, show image 0 next
	if (intCurrentLargeImage >= arrImageFilenames.length-1 || intCurrentLargeImage < 0){
		showLargeImage(0); 
	//else show next image
	} else {
		showLargeImage(intCurrentLargeImage+1); 
	}
}


var imgPreload=new Image();
imgPreload.src=strLargeImagesPath + arrImageFilenames[0];
var refTD;


//shows the picture corresponding to intImage in tblLargeImage
//and highlights the corresponding thumbnail
//called by thumbnail click and slideshow controls
function showLargeImage(intImage){
	if (intImage < 0) intImage = 0;
	if (intImage > arrImageFilenames.length-1) intImage = arrImageFilenames.length-1

	//if there is an image filename associated with intImage, display it
	if (arrImageFilenames[intImage]){
		//if there is alt text associated with the intImage, display it below the image and as image alt text
		if (arrImageAltText[intImage]) {
			refLargeImage.innerHTML="<img src='" + strLargeImagesPath + arrImageFilenames[intImage] + "' alt=" + quote + arrImageAltText[intImage] + quote + ">";
			refCaption.innerHTML=arrImageAltText[intImage];
		} else {
			refLargeImage.innerHTML="<img src='" + strLargeImagesPath + arrImageFilenames[intImage] + "'>";
			refCaption.innerHTML="";
		}

	//else display the alt text as a section header -- very large within the image area
	} else {
		refLargeImage.innerHTML=arrImageAltText[intImage];
		refCaption.innerHTML="";
	}

	//set global variable to image now showing
	intCurrentLargeImage=intImage;

	//if last image is now showing, preload first image
	if (intImage == arrImageFilenames.length-1){
		imgPreload.src=strLargeImagesPath + arrImageFilenames[0];
	//else preload next image
	} else {
		imgPreload.src=strLargeImagesPath + arrImageFilenames[intImage + 1];
	}

	//highlight the thumbnail corresponding to the large image now showing
	if (refTD != null){
		refTD.bgColor = ""; //unhighlight previously highlighted thumbnail, if any
	}
	if (ns4)		eval("refTD = document['td" + intImage + "'];");	//get ref for current thumbnail
	else if (ns5)	eval("refTD = document.getElementById('td" + intImage + "');");
	else 			eval("refTD = document.all ? document.all['td" + intImage + "'] : null;"); 
	refTD.bgColor = rgbThumbnailHighlight; //highlight current thumbnail
}

function stopSlideshow(){
	clearInterval(refPlay);
	refPlayStop.innerHTML="Play";
}

function fillTableWithThumbnails(){
	//put thumbnails in table
	var i = 0;
	for (i=0; i<arrImageFilenames.length; i++){
		if (i % intThumbnailColumns == 0){
			document.write ("<tr align='center'>");
		}
		document.write ("<td width='" + intThumbnailWidth + "' height='" + intThumbnailHeight + "' id='td" + i + "' onClick='stopSlideshow(); showLargeImage(" + i + ");'>");


		if (arrImageFilenames[i]){
			document.write ("<img width='" + intThumbnailWidth + "' height='" + intThumbnailHeight + "' src=" + quote + strThumbnailsPath + arrImageFilenames[i] + quote);
			if (arrImageAltText[i]) {
				document.write (" alt=" + quote + arrImageAltText[i] + quote);
			}
			document.write (">");
		} else {
			document.write (arrImageAltText[i] + " >>");
		}


		document.write ("</td>");
		if (i % intThumbnailColumns == intThumbnailColumns-1){
			document.write ("</tr>");
		}
	}
	if (i % intThumbnailColumns != 0){
		document.write ("<td colspan='" + (intThumbnailColumns - (i % intThumbnailColumns)) +"'>&nbsp;</td></tr>");
	}
}