//************************************************************
// PRELOADER
//************************************************************

//The preloader downloads all the images so they're in memory
//when we need them. This is done automatically, you don't
//need to do anything with it. It starts out with the first
//image.

//Also, when the user clicks thumbnail n, the preloader
//starts loading image n and subsequent images.

//It downloads just one image at a time.

//------------------------------------------------------------
//Initialize the preloader
//------------------------------------------------------------

var gPreloaderPeriod=250
var gNumberOfImagesPreloaded=0
var gLoadNum=1
//gLoadNum is the current image number we're downloading.
var gPreloaderImageStatus=new Array()
//gPreloaderImageStatus is an array that holds 0's and 1's
//that tell us if an image is downloaded.
for (j=0; j<=gLastFile-1; j++) {
	gPreloaderImageStatus[j]=0
}
var gPreloaderImageArray=new Array()
//gPreloaderImageArray holds all the images.
for (j=0; j<=gLastFile-1; j++) {
	gPreloaderImageArray[j]=new Image()
}
gPreloaderImageArray[0].src = gImagePrefix + "1" + gImageExtension
preloader(1)

//-----------------------------------------------------------

function preloader(n) {
	//Preloads all gLastFile of the images.
	if (gPreloaderImageArray[n-1].src == "") {
		//Then the image hasn't started downloading. So start it.
		gPreloaderImageArray[n-1].src = gImagePrefix + n.toString() + gImageExtension
		gLoadNum=n
		gPreloaderTimer=setTimeout("callPreloader()", gPreloaderPeriod)
	}
	else {
		if (gPreloaderImageArray[n-1].complete) {
			//Then image n has finished downloading
			if (gPreloaderImageStatus[n-1]==0) {
				//Then it is freshly downloaded.
				gPreloaderImageStatus[n-1]=1
				//1 means it's finished downloading.
				gNumberOfImagesPreloaded=gNumberOfImagesPreloaded + 1
				gLoadNum=(gLoadNum % gLastFile) + 1
				if (gNumberOfImagesPreloaded >= gLastFile) {
					//Then they're all finished downloading.
					clearTimeout(gPreloaderTimer)
				}
				else {
					//Download the next one.
					preloader(gLoadNum)
				}
			}
			else {
				//Then we've already noted this one finished a while ago.
				gLoadNum=(gLoadNum % gLastFile) + 1
				if (gNumberOfImagesPreloaded < gLastFile) {
					preloader(gLoadNum)
				}
			}
		}
		else {
			//Then image n hasn't finished downloading.
			gPreloaderTimer=setTimeout("callPreloader()", gPreloaderPeriod)
		}
	}
}

function callPreloader() {
	//Called by the gPreloaderTimer on timeout.
	preloader(gLoadNum)
}

//************************************************************
// COMMENTS
//************************************************************


var gHelpIsOff=1
//gHelpIsOff=1 when the pointer is inside a gray control and
//Help for that control is being displayed. We do this because
//we don't want to update the displayed gNotes comment at that time.

//If the gNotes array is not long enough, pad it out.
l=gNotes.length
if (l < gLastFile) {
	for (j=l; j<=gLastFile-1; j++) {
		gNotes[j]="&nbsp;"	
	}
}

function setCommentAndNumber() {
	//This sets the display of the number of the image
	//and the comment about the image.
	if (gHelpIsOff) {
		var numElement=document.getElementById("num")
		numElement.innerHTML=gImgNum.toString()
		var c=document.getElementById("comment")
		c.innerHTML=gNotes[gImgNum-1]
	}
}

//************************************************************
// PAUSING
//************************************************************

function setPauseText() {
	//Sets the Pause button text.
	p=document.getElementById("pause")
	if (gForward==0) {
		p.innerHTML="Paused"
	}
	else {
		p.innerHTML="Pause"
	}
}

function togglePause() {
	//Toggles the Pause button. Called when the user
	//clicks the Pause button.
	if (gForward) {
		gForward=0
		clearTimeout(gFadeTimer)
	}
	else {
		gForward=1
		gHelpIsOff=1
		forwardOne()
	}
	setPauseText()
}

function stopIt() {
	//Called when the user presses the < or > buttons
	//or the ^ button. This stops display without pausing.
	if (gCompletionTimerIsOn==1) {
		gCompletionTimerIsOn=0
		clearTimeout(gCompletionTimer)
	}
	gImageQueue.empty()
	clearTimeout(gFadeTimer)
	clearTimeout(gDisplayTimer)
	gDisplayComplete=1
}

//************************************************************
// BACK AND FORWARD BUTTONS
//************************************************************

function backOne() {
	//Called when the user presses the < button to go back.
	stopIt()
	//stopIt is called to empty the queue and so on.
	setWhichToFadeInAndOut()
	n=gImgNum-1
	if (n<=0) {
		t=gLastFile
	}
	else {
		t=n
	}
	requestDisplay(t)
}

function forwardOne() {
	//Called when the user presses the > button to go forward.
	stopIt()
	setWhichToFadeInAndOut()
	t=(gImgNum % gLastFile) + 1
	requestDisplay(t)
}

//************************************************************
// MOUSE EVENT HANDLERS, MAIN IMAGE
//************************************************************

function mOverIm(t) {
	//This gets called onmouseover of an image
	t.style.cursor="pointer"
}

function mOutIm(t) {
	//This gets called onmouseout of an image.
	t.style.cursor="auto"
}

//************************************************************
// MOUSE EVENT HANDLERS, GRAY CONTROLS
//************************************************************

function mOver(t) {
	//This gets called onmouseover of some of the gray controls
	//in both the thumbnails and slideshow divs.
	t.style.backgroundColor="#999999"
	t.style.cursor="pointer"
}

function mOut(t) {
	//This gets called onmouseout of some of the gray controls
	//in both the thumbnails and slideshow divs.
	gHelpIsOff=1
	t.style.backgroundColor="#666666"
	t.style.cursor="auto"
}

function mHelp(t) {
//This gets called when the user enters something that
//you want to trigger text change in the comment element.
	gHelpIsOff=0
	var x=document.getElementById("comment")
	x.innerHTML=t
}

function mt(t) {
//This gets called when the user enters or exits something that
//you want to trigger text change in the pDescription element.
//For gray controls in the thumbnail section.
  var x=document.getElementById("pDescription")
  x.innerHTML=t
  x.style.visibility='visible'
}

function mt2() {
	//Called on mouseout of the gray controls
	//in the thumbnail section.
	var x=document.getElementById("pDescription")
	x.innerHTML=""
	x.style.visibility='hidden'
}

//************************************************************
// THUMBNAIL OPS
//************************************************************

/*
function writeThumbsOLD() {
	//This writes the Thumbnail table and assigns that string
	//to be the innerHTML of the div with id="thumbTable" and
	//centers the table.
	i=1
	currentThumb=1
	r=Math.floor(gLastFile/gThumbColumns) + ((gLastFile % gThumbColumns) != 0)
	t="<table align=\"center\" cellpadding=\"0\" cellspacing=\"" + gCellSpacing + "\" class=\"thumbTable\" id=\"thumbT\">"
	for (j=1; j<=r; j++) {
		t=t + "<tr align=\"center\">"
		for (i=currentThumb; i<=currentThumb+gThumbColumns-1; i++) {
			if (i<=gLastFile) {
				t=t + "<td>"
				t=t + "<img src=\"" + gIconPrefix + "/" + i.toString() + gIconExtension + "\""
				t=t + "name=\"" + i + "\""
				t=t + " class=\"thumb\" onclick=\"thumbClicked(\'" + i.toString() 
				t=t + "\')\" onMouseOver=\"mo(this, \'" + gNotes[i-1] + "\')\" onMouseOut=\"ml(this, \'&nbsp;\')\">"
				t=t + "</td>"
			}
			else {
				t=t + "<td></td>"
			}
		}
		currentThumb=currentThumb+gThumbColumns
		t=t + "</tr>"
	}
	t= t + "<tr><td colspan=\"" + gThumbColumns + "\"><div id=\"thumbcomment\" class=\"comment\">&nbsp;</div></td></tr>"
	t= t + "</table>"
	thumbDiv=document.getElementById("thumbTableDiv")
	thumbDiv.innerHTML=t
	centerThumbTable()
	thumbDiv.style.visibility='visible'
}
*/

function writeThumbs() {
	//This writes the Thumbnail table and assigns that string
	//to be the innerHTML of the div with id="thumbTable" and
	//centers the table. We start out with icon 1. If gIconIncrement=1,
	//then the next icon is 2. Otherwise, it's Math.round(counter*gIconIncrement)
	t="<table align=\"center\" cellpadding=\"0\" cellspacing=\"" + gCellSpacing + "\" class=\"thumbTable\" id=\"thumbT\">\n"
	//The alogrithm assumes we want to use all gNumberOfIcons in the table.
	r=Math.floor(gNumberOfIcons/gThumbColumns) + ((gNumberOfIcons % gThumbColumns) != 0)
	//r is the number of rows
	var iconNumber=1
	//iconNumber is the number of the pic with which the icon corresponds.
	var counter=0
	//counter goes up incrementally by 1 except for the one notable case.
	var iconcounter=1
	//iconcounter counts the number of icons/cells we've dealt with.
	for (rowNumber=1; rowNumber <= r; rowNumber++) {
		t=t + "<tr align=\"center\">\n"
		for (column=1; column<=gThumbColumns; column++) {
			if ((iconNumber <= gLastFile) && (iconcounter <= gNumberOfIcons)) {
				if ((gIconIncrement==1) && (counter==1)) {
					counter=2
					iconNumber=2
				}
				t=t + "<td>"
				t=t + "<img src=\"" + gIconPrefix + iconNumber.toString() + gIconExtension + "\" "
				t=t + "name=\"" + iconNumber + "\""
				t=t + " class=\"thumb\" onclick=\"thumbClicked(\'" + iconNumber.toString() 
				t=t + "\')\" onMouseOver=\"mo(this, \'" + gNotes[iconNumber-1] + "\')\" onMouseOut=\"ml(this, \'&nbsp;\')\">"
				t=t + "</td>\n"
			}
			else {
				t=t + "<td></td>\n"
			}
			counter=counter+1
			iconNumber=Math.round(counter*gIconIncrement)
			iconcounter=iconcounter+1
		}
		t=t + "</tr>\n"
	}
	t= t + "<tr><td colspan=\"" + gThumbColumns + "\"><div id=\"thumbcomment\" class=\"comment\">&nbsp;</div></td></tr>"
	t= t + "</table>"
	thumbDiv=document.getElementById("thumbTableDiv")
	thumbDiv.innerHTML=t
	centerThumbTable()
	thumbDiv.style.visibility='visible'
}

function centerThumbTable() {
	//Centers the thumb table on screen.
	//The thumb table is in the "thumbTable" div.
	var cw=browserWidth()
	var ch=browserHeight()
	var t=document.getElementById("thumbT")
	var h=t.offsetHeight
	var w=t.offsetWidth
	var d=document.getElementById("thumbTableDiv")
	d.style.height=h + "px"
	d.style.width=w + "px"
	d.style.top=(ch-h)/2 + "px"
	d.style.left=(cw-w)/2 + "px"
}

function thumbClicked(numString) {
	//Called when the user clicks a thumbnail image.
	preloader(parseInt(numString))
	makeVisible("slideshow")
	requestDisplay(parseInt(numString))
}

function mo(theImage, t) {
//mo is for mouseover. This gets called when the user mouses over
//a thumbnail image (theImage). The image is made fully opaque.
//t is a text. t is displayed in the pDescription element.
  var x=document.getElementById("thumbcomment")
  if (t.length==1) {
	  x.innerHTML= theImage.name 
  }
  else {
	  x.innerHTML= theImage.name + ": " + t
  }
  theImage.style.cursor="pointer"
  if (navigator.appName == 'Microsoft Internet Explorer') {
	  theImage.filters.alpha.opacity=100
  }
  else {
	 theImage.style.opacity='1.0' 
  }
}

function ml(theImage, t) {
//ml is for mouseout. This gets called when the mouse leaves
//a thumbnail image. The image is made to be 75% opaque. The
//two different settings are for different browsers. t is
//a text. It is displayed in the pDescription element.
  var x=document.getElementById("thumbcomment")
  x.innerHTML=t
  theImage.style.cursor="auto"
  if (navigator.appName == 'Microsoft Internet Explorer') {
	  theImage.filters.alpha.opacity=75
  }
  else {
	 theImage.style.opacity='0.75' 
  }
}
	
//************************************************************
// POSITIONING
//************************************************************
	
function resized() {
	//Called when the browser is resized.
	centerThumbTable()
	centerpic("imga")
	centerpic("imgb")
	resizeControlsWrapper()
	positionLogo()
}

function resizeControlsWrapper() {
	//Called at the start and when the browser is resized.
	var a=document.getElementById("thumbnailControls")
	var b=document.getElementById("slideshowControls")
	var w=browserWidth()	
	a.style.width=(w-8) + "px"
	b.style.width=(w-8) + "px"
}

function center(id) {
	//id is an id. The corresponding element is centred.
	//Not used.
	var o=document.getElementById(id)
	var w=browserWidth()	
	var h=browserHeight()	
	var ow=parseInt(o.style.width)
	var oh=parseInt(o.style.height)
	o.style.left=(w-ow)/2 + "px"
	o.style.top=(h-oh)/2 + "px"
}

gImageBuffer = new Image()
//gImageBuffer is just used to get the image's height and width
//in centerpic.

function centerpic(imgid) {
	//Centers an img with id=imgid. 
	var p=document.getElementById(imgid)
	var w=browserWidth()
	var h=browserHeight()
	gImageBuffer.src=p.src
	ww=gImageBuffer.width
	hh=gImageBuffer.height
	p.style.width=ww + "px"
	p.style.height=hh + "px"
	p.style.left=(w-ww)/2 + "px"
	p.style.top=(h-hh)/2 + "px"
}

function createLogo() {
	h="<img class=\"dbclogo\" id=\"dbclogo\" name=\"dbclogo\" src=\"../slidvidcode/images/dbcLogo.png\" "
	h=h+ "onClick=\"window.open('../meditations.htm', '_self')\" "
	h=h+ "onMouseOver=\"mOverIm(this)\" onMouseOut=\"mOutIm(this)\" />"
	d=document.getElementById("logodiv")
	d.innerHTML=h
}

function positionLogo() {
	a=document.getElementById("dbclogo")
	if (a != null) {
		var w=browserWidth()	
		var h=browserHeight()	
		a.style.top=h-38 + "px"
		a.style.left=w - 99 + "px"
	}
}

//************************************************************
// SLIDESHOW TO THUMBS AND VICE VERSA
//************************************************************

function makeVisible(id) {
	//This gets called when a thumbnail is clicked or when the
	// > button is clicked. This moves us from thumbnails to
	//slideshow or vice versa.
	if (navigator.appName != 'Microsoft Internet Explorer') {
		initPicOpacities()
	}
	thumbDiv=document.getElementById("thumbnails")
	slideshowDiv=document.getElementById("slideshow")
	if (id=="thumbnails") {
		setBackgroundImage(gBackgroundImage)
		slideshowDiv.style.visibility="hidden"
		a=document.getElementById("imga")
		b=document.getElementById("imgb")
		c=document.getElementById("speedWindow")
		d=document.getElementById("thumbTableDiv")
		e=document.getElementById("displayPeriodSpinControl")
		f=document.getElementById("fadeTimeSpinControl")
		g=document.getElementById("fadePeriodSpinControl")
		h=document.getElementById("fadeOut")
		i=document.getElementById("logodiv")
		a.style.visibility="hidden"
		b.style.visibility="hidden"
		c.style.visibility="hidden"
		thumbDiv.style.visibility="visible"	
		d.style.visibility="visible"
		e.style.visibility="hidden"
		f.style.visibility="hidden"
		g.style.visibility="hidden"
		h.style.visibility="hidden"
		i.style.visibility="visible"
		stopIt()
	}
	else {
		setBackgroundImage("")
		thumbDiv.style.visibility="hidden"
		a=document.getElementById("imga")
		b=document.getElementById("imgb")
		c=document.getElementById("speedWindow")
		d=document.getElementById("thumbTableDiv")
		e=document.getElementById("logodiv")
		a.style.visibility="hidden"
		b.style.visibility="hidden"
		c.style.visibility="hidden"
		d.style.visibility="hidden"
		if (gDisplayLogo) {
			e.style.visibility="visible"
		}
		else {
			e.style.visibility='hidden'
		}
		slideshowDiv.style.visibility="visible"	
		setPauseText()
	}
}

function showSlideshow(numString) {
	//This gets called when the user clicks the 'Slideshow'
	//button while the thumbs are displayed.
	gForward=1
	makeVisible("slideshow")
	requestDisplay(parseInt(numString))
}

function browserWidth() {
	//Returns the width of the browser (as a number).
	var myWidth = 0
	if( typeof( window.innerWidth ) == 'number' ) {
	//Non-IE
	myWidth = window.innerWidth
	} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
	//IE 6+ in 'standards compliant mode'
	myWidth = document.documentElement.clientWidth
	} else if( document.body && ( document.body.clientWidth ) ) {
	//IE 4 compatible
	myWidth = document.body.clientWidth
	}
	return myWidth
}

function browserHeight() {
	//Returns the height of the browser (as a number).
	var myHeight = 0
	if( typeof( window.innerHeight ) == 'number' ) {
	//Non-IE
	myHeight = window.innerHeight
	} else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
	//IE 6+ in 'standards compliant mode'
	myHeight = document.documentElement.clientHeight
	} else if( document.body && ( document.body.clientHeight ) ) {
	//IE 4 compatible
	myHeight = document.body.clientHeight
	}
	return myHeight
}

//************************************************************
// SLIDESHOW OPS
//************************************************************

var gImgNum=1
//Current image number starting at 1 and going to gLastFile.
var gImageQueue = new Queue()
//We use queue.js to implement the queue. The queue is for
//image numbers of images that are supposed to be displayed
//but aren't downloaded yet. We don't display images out of order.
var gCompletionTimer
var gCompletionTimerPeriod=250
var gCompletionTimerIsOn=0
//gCompletionTimer is used to check for completion of download
//of images scheduled for immediate display.
var gForward=1 //forward=1 paused=0 
//gForward tells us if we are moving forward or paused.
var gFadePeriod=35
//Duration between fade increments. 40 gives us a framerate
//of 25 frames per second.
var gFadeTimer
//Used to incrementally fade images in/out.
var gDisplayTimer
//Used to time the display of images after fade in is completed.
var gDisplayComplete=1
//A boolean that is 0 when an image is not finished its display
//period and 1 when it is finished being displayed.
var gImgIdToFadeIn="imgb"
var gImgIdToFadeOut="imga"
//We use two images for the slideshow. One to fade in and one
//to fade out. The id's of these images are "imga" and "imgb".
//First we fade in the image with id="imgb" and we fade out
//the image with id="imga". Then we fade in the image with
//id="imga" and fade out the image with id="imgb". And so on.

function requestDisplay(n) {
	//Initiates change of displayed pic to image number n.
	if (gPreloaderImageStatus[n-1]==1) {
		//Then image n has finished downloading.
		if (gDisplayComplete==0) {
			//Wait for the current image to finish its display period.
			if (gCompletionTimerIsOn==0) {
				gCompletionTimerIsOn=1
				gCompletionTimer=setTimeout("checkCompletion()", gCompletionTimerPeriod)
			}
		}
		else {
			//Display it.
			displayImg(n)
		}
	}
	else {
		//Then the image has not finished downloading yet.
		if (gPreloaderImageArray[n-1].src=="") {
			preloader(n)
		}
		if (!gImageQueue.isEnqueued(n)) {
			gImageQueue.enqueue(n)
		}
		if (gCompletionTimerIsOn==0) {
			gCompletionTimerIsOn=1
			gCompletionTimer=setTimeout("checkCompletion()", gCompletionTimerPeriod)
		}
	}
}

function checkCompletion() {
	//This gets called to monitor the status of images that have been queued. Images
	//are queued when they've been requested to be displayed but either haven't finished
	//downloading or the display period of the previous image isn't finished yet.
	//checkCompletion requests display for these images if the image has finished
	//downloading and the display period of the previous image is over.
	if (gImageQueue.getSize() > 0) {
		if (gDisplayComplete) {
			imageNum=gImageQueue.getOldestElement()
			if (gPreloaderImageStatus[imageNum-1]==1) {
				imageNum=gImageQueue.dequeue()
				requestDisplay(imageNum)
				if (gImageQueue.getSize() > 0) {
					gCompletionTimerIsOn=1
					gCompletionTimer=setTimeout("checkCompletion()", gCompletionTimerPeriod)
				}
				else {
					gCompletionTimerIsOn=0
					clearTimeout(gCompletionTimer)
				}
			}
			else {
				if (gPreloaderImageArray[imageNum-1].complete) {
					gPreloaderImageStatus[imageNum-1]=1
					gNumberOfImagesPreloaded=gNumberOfImagesPreloaded + 1
					imageNum=gImageQueue.dequeue()
					if (gNumberOfImagesPreloaded >= gLastFile) {
						//Then they're all finished downloading.
						clearTimeout(gPreloaderTimer)
					}
					if (gImageQueue.getSize() > 0) {
						gCompletionTimerIsOn=1
						gCompletionTimer=setTimeout("checkCompletion()", gCompletionTimerPeriod)
					}
					else {
						gCompletionTimerIsOn=0
					}
					requestDisplay(imageNum)
				}
				else {
					gPreloaderImageArray[imageNum-1].src = gImagePrefix + imageNum.toString() + gImageExtension
					gCompletionTimerIsOn=1
					gCompletionTimer=setTimeout("checkCompletion()", gCompletionTimerPeriod)
				}	
			}
		}
		else {
			//Then the display is not complete.
			gCompletionTimerIsOn=1
			gCompletionTimer=setTimeout("checkCompletion()", gCompletionTimerPeriod)
		}
	}
	else {
		gCompletionTimerIsOn=0
	}
}

function displayImg(n) {
	//Image number n must be fully downloaded before this is called.
	//And no animation must be in progress. This gets called in
	//requestDisplay when conditions are OK for displaying a new image.
	setImgToFadeIn(n)
	setCommentAndNumber()
	startFade()
}

function setImgToFadeIn(n) {
	//Two images are used in the HTML for the slideshow.
	//One fades in and one fades out. This function gets
	//called when it's time to fade an image in. But first
	//we need to hide the image, change its src, center it,
	//and set its opacity to 0. n is an integer. 
	numStringFileName=gImagePrefix + n.toString() + gImageExtension
	imgToFadeIn=document.getElementById(gImgIdToFadeIn)
	imgToFadeOut=document.getElementById(gImgIdToFadeOut)
	imgToFadeIn.style.visibility='hidden'
	imgToFadeIn.src=numStringFileName
	centerpic(gImgIdToFadeIn)
	if (navigator.appName == 'Microsoft Internet Explorer') {
		imgToFadeIn.filters.alpha.opacity=0
	}
	else {
		imgToFadeIn.style.opacity='0.0' 
	}
	imgToFadeIn.style.zIndex=-10
	imgToFadeOut.style.zIndex=-11
	gImgNum=n
}


var gFadeInOpacity
var gFadeOutOpacity
var gFilterOpacity

function startFade() {
	//This starts a fade animation. gDisplayComplete is
	//0 during a fade and the subsequent display of the image.
	imgToFadeIn=document.getElementById(gImgIdToFadeIn)
	imgToFadeOut=document.getElementById(gImgIdToFadeOut)
	if (typeof(imgToFadeIn.style.opacity)=='undefined') {
		//Then we are in Internet Explorer
		gFilterOpacity=1
	}
	else {
		gFilterOpacity=0
	}
	if (gFilterOpacity) {
		gFadeInOpacity=parseFloat(imgToFadeIn.filters.alpha.opacity)
		gFadeOutOpacity=parseFloat(imgToFadeOut.filters.alpha.opacity)
	}
	else {
		gFadeInOpacity=parseFloat(imgToFadeIn.style.opacity)
		gFadeOutOpacity=parseFloat(imgToFadeOut.style.opacity)
	}
	gDisplayComplete=0
	gFadeTimer=setTimeout("fader()", gFadePeriod)
}


function fader() {
	//This does the fade in and fade out of the two images incrementally.
	imgToFadeIn=document.getElementById(gImgIdToFadeIn)
	imgToFadeOut=document.getElementById(gImgIdToFadeOut)
	imgToFadeIn.style.visibility='visible'
	if (gFadeTime==0) {
		increment=1.0
	}
	else {
		increment=gFadePeriod/gFadeTime
	}
	if (gFilterOpacity) {
		//First set the opacity of the image to fade in.
		gFadeInOpacity=Math.min(gFadeInOpacity + (increment*100), 100)
		fio=gFadeInOpacity.toString()
		imgToFadeIn.filters.alpha.opacity=fio
		//Then set the opacity of the image to fade out.
		if (gFadeOut) {
			gFadeOutOpacity=Math.max(gFadeOutOpacity - (increment*100), 0)
			foo=gFadeOutOpacity.toString()
			imgToFadeOut.filters.alpha.opacity=foo
			//Check to see if the fade is complete.
			finished=((gFadeInOpacity >= 100) && (gFadeOutOpacity <= 0))
		}
		else {
			finished=(gFadeInOpacity >= 100)
		}		
	}
	else {
		gFadeInOpacity=Math.min(gFadeInOpacity + increment, 1.0)
		fio=gFadeInOpacity.toString()
		imgToFadeIn.style.opacity=fio
		if (gFadeOut) {
			gFadeOutOpacity=Math.max(gFadeOutOpacity - increment, 0.0)
			foo=gFadeOutOpacity.toString()
			imgToFadeOut.style.opacity=foo
			finished=((gFadeInOpacity >= 1.0) && (gFadeOutOpacity <= 0.0))
		}
		else {
			finished=(gFadeInOpacity >= 1.0)
		}
	}	
	if (finished) {
		//Then fade in is complete.
		//Now the display period begins.
		setWhichToFadeInAndOut()
		gDisplayTimer=setTimeout("displayComplete()", gDisplayPeriod)
	}
	else {
		//Then fade in is incomplete
		gFadeTimer=setTimeout("fader()", gFadePeriod)
	}
}

function setWhichToFadeInAndOut() {
	//When we do a fade in/out we want to fade in
	//the image that has the least opacity among
	//the two images, imga and imgb, that we use
	//for fades. So this function makes sure of that.
	if (gFadeOut) {
		minId=imgIdOfMinOpacity()
		gImgIdToFadeIn=minId
		if (minId == "imga") {
			gImgIdToFadeOut="imgb"
		}
		else {
			gImgIdToFadeOut="imga"
		}
	}
	else {
		a=document.getElementById("imga")
		b=document.getElementById("imgb")
		az=parseInt(a.style.zIndex)
		bz=parseInt(b.style.zIndex)
		if (az < bz) {
			gImgIdToFadeIn="imga"
			gImgIdToFadeOut="imgb"			
		}
		else {
			gImgIdToFadeIn="imgb"
			gImgIdToFadeOut="imga"
		}
	
		/*if (gImgIdToFadeIn=="imga") {
			gImgIdToFadeIn="imgb"
			gImgIdToFadeOut="imga"
		}
		else {
			gImgIdToFadeIn="imga"
			gImgIdToFadeOut="imgb"
		}*/
	}
}

function imgIdOfMinOpacity() {
	//Returns the ID of the image with the least opacity.
	a=document.getElementById("imga")
	b=document.getElementById("imgb")
	if (typeof(a.style.opacity)=='undefined') {
		//Then we are in Internet Explorer
		ao=parseInt(a.filters.alpha.opacity)
		bo=parseInt(b.filters.alpha.opacity)
	}
	else {
		ao=parseFloat(a.style.opacity)
		bo=parseFloat(b.style.opacity)
	}
	if (ao < bo) {
		result = "imga"
	}
	else {
		result = "imgb"
	}
	return result
}

function displayComplete() {
	//Display of an image has completed.
	//If the queue has something in it, display the popped element
	//if we are not paused.
	gDisplayComplete=1
	if (gForward != 0) {
		if (gImageQueue.isEmpty()) {
			//Then we request display of the next image.
			if (gForward==1) {
				requestDisplay((gImgNum % gLastFile) + 1)
			}
			else {
				n=gImgNum-1
				if (n<=0) {
					t=gLastFile
				}
				else {
					t=n
				}
				requestDisplay(t)
			}
		}
		else {
			//Then the queue is not empty.
			imageNum=gImageQueue.getOldestElement()
			if (gPreloaderImageStatus[imageNum-1]==1) {
				imageNum=gImageQueue.dequeue()
				requestDisplay(imageNum)
			}
		}
	}
}

//************************************************************
// SPINCONTROLS
//************************************************************

var gDisplayPeriodSpinControl 

function createDisplayPeriodSpinControl() {
	//Creates the spin control that lets the user adjust gDisplayPeriod.
	//See http://www.switchonthecode.com/tutorials/javascript-controls-the-spin-control for documentation.
	gDisplayPeriodSpinControl = new SpinControl();
	gDisplayPeriodSpinControl.Tag = 'left';
	gDisplayPeriodSpinControl.SetMaxValue(1000000);
	gDisplayPeriodSpinControl.SetMinValue(0);
	gDisplayPeriodSpinControl.SetIncrement(1);
	gDisplayPeriodSpinControl.SetBackgroundColor("#333333")
	gDisplayPeriodSpinControl.SetWidth(85)
	gDisplayPeriodSpinControl.GetContainer().style.position = 'absolute';
	gDisplayPeriodSpinControl.AttachValueChangedListener(displayPeriod);
	gDisplayPeriodSpinControl.SetCurrentValue(gDisplayPeriod);
	gDisplayPeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(10, 500));
	gDisplayPeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(100, 1500));
	gDisplayPeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(500, 2500));
	gDisplayPeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(1000, 5500));
	gDisplayPeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(10000, 9500));
	gDisplayPeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(100000, 13500));
	
	var el = document.getElementById('displayPeriodSpinControl');
	el.appendChild(gDisplayPeriodSpinControl.GetContainer());
	gDisplayPeriodSpinControl.StartListening();
}

function displayPeriod(sender, newVal)
//This gets called by the above spin control to update gDisplayPeriod
{
  gDisplayPeriod=newVal
}

//-------------------------

var gFadeTimeSpinControl 

function createFadeTimeSpinControl() {
	//Creates the spin control that lets the user adjust gFadeTime.
	//See http://www.switchonthecode.com/tutorials/javascript-controls-the-spin-control for documentation.
	gFadeTimeSpinControl = new SpinControl();
	gFadeTimeSpinControl.Tag = 'right';
	gFadeTimeSpinControl.SetMaxValue(1000000);
	gFadeTimeSpinControl.SetMinValue(0);
	gFadeTimeSpinControl.SetIncrement(1);
	gFadeTimeSpinControl.SetBackgroundColor("#333333")
	gFadeTimeSpinControl.SetWidth(85)
	gFadeTimeSpinControl.GetContainer().style.position = 'absolute';
	gFadeTimeSpinControl.GetContainer().style.left="92px";
	gFadeTimeSpinControl.AttachValueChangedListener(fadeTime);
	gFadeTimeSpinControl.SetCurrentValue(gFadeTime);
	gFadeTimeSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(10, 500));
	gFadeTimeSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(100, 1500));
	gFadeTimeSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(500, 2500));
	gFadeTimeSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(1000, 5500));
	gFadeTimeSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(10000, 9500));
	gFadeTimeSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(100000, 13500));
	
	var el = document.getElementById('fadeTimeSpinControl');
	el.appendChild(gFadeTimeSpinControl.GetContainer());
	gFadeTimeSpinControl.StartListening();
}

function fadeTime(sender, newVal)
//This gets called by the above spin control to update gFadeTime.
{
  gFadeTime=newVal
}

//-------------------------

var gFadePeriodSpinControl 

function createFadePeriodSpinControl() {
	//Creates the spin control that lets the user adjust gFadePeriod.
	//See http://www.switchonthecode.com/tutorials/javascript-controls-the-spin-control for documentation.
	gFadePeriodSpinControl = new SpinControl();
	gFadePeriodSpinControl.Tag = 'rightmost';
	gFadePeriodSpinControl.SetMaxValue(1000000);
	gFadePeriodSpinControl.SetMinValue(1);
	gFadePeriodSpinControl.SetIncrement(1);
	gFadePeriodSpinControl.SetBackgroundColor("#333333")
	gFadePeriodSpinControl.SetWidth(85)
	gFadePeriodSpinControl.GetContainer().style.position = 'absolute';
	gFadePeriodSpinControl.GetContainer().style.left="185px";
	gFadePeriodSpinControl.AttachValueChangedListener(fadePeriod);
	gFadePeriodSpinControl.SetCurrentValue(gFadePeriod);
	gFadePeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(10, 500));
	gFadePeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(100, 1500));
	gFadePeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(500, 2500));
	gFadePeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(1000, 5500));
	gFadePeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(10000, 9500));
	gFadePeriodSpinControl.GetAccelerationCollection().Add(new SpinControlAcceleration(100000, 13500));
	
	var el = document.getElementById('fadePeriodSpinControl');
	el.appendChild(gFadePeriodSpinControl.GetContainer());
	gFadePeriodSpinControl.StartListening();
}

function fadePeriod(sender, newVal)
//This gets called by the above spin control to update gFadeTime.
{
  gFadePeriod=newVal
}

//************************************************************
// TITLE OPS
//************************************************************

function initTitle() {
	//This gets called at the start to initialize
	//the gray title display and the document's <title>.
	document.title=gSeriesTitle
	t1=document.getElementById("title1")
	t2=document.getElementById("title2")
	t1.innerHTML=gSeriesTitle
	t2.innerHTML=gSeriesTitle
}

function titleClick(title) {
	//Executes when the user clicks either of the title gray controls.
	//the parameter title is an element.
	if (title.id=="title1") {
		if (gTitle1Link != "") {
			window.open(gTitle1Link, gTitle1Target)
		}
	}
	else {
		if (gTitle2Link != "") {
			window.open(gTitle2Link, gTitle2Target)
		}
	}
}

function titleMouseover(title) {
	//Executes when the user mouses over either of the title gray controls.
	//the parameter title is an element.
	if (title.id=="title1") {
		if (gTitle1Link=="") {
			mt(gTitle1Help)
		}
		else {
			mOver(title)
			mt(gTitle1Help)
		}
	}
	else {
		if (gTitle2Link=="") {
			mHelp(gTitle2Help)
		}
		else {
			mOver(title)
			mHelp(gTitle2Help)
		}
	}
}

function titleMouseOut(title) {
	//Executes when the user exits either of the title gray controls.
	//the parameter title is an element.
	if (title.id=="title1") {
		if (gTitle1Link=="") {
			mt2()
		}
		else {
			mOut(title)
			mt2()
		}
	}
	else {
		if (gTitle2Link=="") {
			mOut(title)
			setCommentAndNumber()
		}
		else {
			mOut(title)
			setCommentAndNumber()
		}
	}
}

//************************************************************
// NEXT SERIES, PREVIOUS SERIES BUTTONS
//************************************************************

function goToPreviousSeries() {
	//Gets called when the user presses the button to go
	//to the previous series.
	u=getPreviousSeriesURL()
	window.open(u, '_self')
}

function goToNextSeries() {
	//Gets called when the user clicks the button to go
	//to the next series.
	u=getNextSeriesURL()
	window.open(u, '_self')
}

function getMyPositionInSlideshowList() {
	//Returns the position of the current slideshow
	//in gSlideshowList, which is a list stored in
	//slideshowlist.js
	var a = document.location.href
	found=0
	for (j=0; j<=gSlideshowList.length; j++) {
		b= "/" + gSlideshowList[j] + "/"
		c= a.search(b)
		if (c != -1) {
			//Then we found it.
			return j
		}
	}
	return -1
}

function getNextSeriesURL() {
	//Returns the URL of the next series.
	var myPosition=getMyPositionInSlideshowList()
	if (myPosition != -1) {
		var nextPosition=(myPosition+1) % gSlideshowList.length
		var nextFolder=gSlideshowList[nextPosition]
		var a = document.location.href
		var myFolder=gSlideshowList[myPosition]
		var b = a.search(myFolder)
		var c = a.slice(0, b)
		return c + nextFolder + "/index.htm"
	}
	else {
		var a = document.location.href
		var b = a.lastIndexOf("/")
		var c = a.slice(0,b)
		var d = c.lastIndexOf("/")
		var e = c.slice(0,d+1)
		return e + "index.htm"
	}
}

function getPreviousSeriesURL() {
	//Returns the URL of the previous series.
	var myPosition=getMyPositionInSlideshowList()
	if (myPosition != -1) {
		var p=myPosition-1
		if (p<0) {
			previousPosition=gSlideshowList.length -1
		}
		else {
			previousPosition=p
		}
		var previousFolder=gSlideshowList[previousPosition]
		var a = document.location.href
		var myFolder=gSlideshowList[myPosition]
		var b = a.search(myFolder)
		var c = a.slice(0, b)
		return c + previousFolder + "/index.htm"
	}
	else {
		var a = document.location.href
		var b = a.lastIndexOf("/")
		var c = a.slice(0,b)
		var d = c.lastIndexOf("/")
		var e = c.slice(0,d+1)
		return e + "index.htm"
	}
}

//************************************************************
// CHECKBOX OPS
//************************************************************

function initFadeOutCheckBox() {
	//Initializes the check box. When check box
	//is checked, images fade in and out. When
	//unchecked, images just fade in. So when
	//you use this, images should all be same size.
	s=document.getElementById("fadeOut")
	s.checked=gFadeOut
}

function fadeOutCheckBox(t) {
	//Called when the user clicks the fadeOut
	//checkbox in the Speed window.
	if (t.checked) {
		gFadeOut=1
	}
	else {
		gFadeOut=0
	}
}

//************************************************************
// MISC
//************************************************************

function toggleSpeedWindow(){
	//This gets called when the user presses the Speed button
	//or when they click to close the Speed Window.
	s=document.getElementById("speedWindow")
	d=document.getElementById("displayPeriodSpinControl")
	f=document.getElementById("fadeTimeSpinControl")
	p=document.getElementById("fadePeriodSpinControl")
	r=document.getElementById("fadeOut")
	if (s.style.visibility=='hidden') {
		s.style.visibility='visible'
		d.style.visibility='visible'
		f.style.visibility='visible'
		p.style.visibility='visible'
		r.style.visibility='visible'
	}
	else {
		s.style.visibility='hidden'
		d.style.visibility='hidden'
		f.style.visibility='hidden'
		p.style.visibility='hidden'
		r.style.visibility='hidden'
	}	
}

function initTotpic() {
	a=document.getElementById("totpic")
	a.innerHTML=gLastFile.toString()
}

function initPicOpacities() {
	//Initializes the opacity of the two pics we use to
	//fade in/out so they have opacity values.
	imga=document.getElementById("imga")
	imgb=document.getElementById("imgb")
	if (navigator.appName == 'Microsoft Internet Explorer') {
		imga.filters.alpha.opacity=0
		imgb.filters.alpha.opacity=0
	}
	else {
		imga.style.opacity='0.0'
		imgb.style.opacity='0.0'
	}
}


function setBackgroundImage(f) {
	//This sets the document's backgroundImage. 
	//f is the filename
	var n ="url(" + gImagePrefix + f + ")"
	document.body.style.backgroundImage=n
}

function makeEvent(element, callback, param, event) { 
//Not used yet but looks very interesting. It's for attaching
//events to elements.
    function local() { 
        return callback(param); 
    } 
 
    if (element.addEventListener) { 
        //Mozilla 
        element.addEventListener(event,local,false); 
    } else if (element.attachEvent) { 
        //IE 
        element.attachEvent("on"+event,local); 
    } 
} 
//Then call it with makeEvent(execBtn, alert, "hey buddy, what's up?", "click"); 
//Just let event be a name like "click" or "mouseover".

function disableSelection(target){
//Not used yet but looks interesting.
//This supposedly makes text not selectable. The function is called at the 
//end of the document. 
	if (typeof target.onselectstart!="undefined") //IE route
		target.onselectstart=function(){return false}
	else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
		target.style.MozUserSelect="none"
	else //All other route (ie: Opera)
		target.onmousedown=function(){return false}
	target.style.cursor = "default"
}
//Supposedly call it at end of document with 	disableSelection(document.body) 
//But when I tried it out, stuff was still selectable. Perhaps target has to be
//more specific.