//Image array (adjust size(all same), add images here)
var imageHeight = 750
var imageWidth = 1054
var imageURLs = new Array
imageURLs[0] = "images/large/mixedMedia.jpg"
imageURLs[1] = "images/large/earthSpeakerAcra.jpg"
imageURLs[2] = "images/large/mixedMediaOutside.jpg"
imageURLs[3] = "images/large/atBullets.jpg"
imageURLs[4] = "images/large/solarBug.jpg"
imageURLs[5] = "images/large/train.jpg"
imageURLs[6] = "images/large/beijingGuitar.jpg"
imageURLs[7] = "images/large/milanScaffold.jpg"
imageURLs[8] = "images/large/meat.jpg"
imageURLs[9] = "images/large/concreteEarthSpeaker.jpg"
imageURLs[10] = "images/large/genR8.jpg"
imageURLs[11] = "images/large/playingTheFish.jpg"
imageURLs[12] = "images/large/thing.jpg"
imageURLs[13] = "images/large/milanLounge.jpg"
imageURLs[14] = "images/large/creepyPoster.jpg"
imageURLs[15] = "images/large/faceInMask.jpg"
imageURLs[16] = "images/large/hongKong.jpg"
imageURLs[17] = "images/large/paransUnits.jpg"
imageURLs[18] = "images/large/rippedForemanForearm.jpg"
imageURLs[19] = "images/large/nyuSolarPanel.jpg"
imageURLs[20] = "images/large/mixedMediaPoster.jpg"
imageURLs[21] = "images/large/lincolnCenter.jpg"
imageURLs[22] = "images/large/kidsWithFish.jpg"
imageURLs[23] = "images/large/japaneseScrolls.jpg"
imageURLs[24] = "images/large/forestBotDetail.jpg"
imageURLs[25] = "images/large/churchMachine.jpg"
imageURLs[26] = "images/large/portrait.jpg"
imageURLs[27] = "images/large/tapeworm.jpg"
imageURLs[28] = "images/large/silverFishOutside.jpg"
imageURLs[29] = "images/large/newYorkFromDumbo.jpg"
imageURLs[30] = "images/large/musicAcoustica.jpg"
imageURLs[31] = "images/large/hydrofoil.jpg"
imageURLs[32] = "images/large/harmonicsGuitar3.jpg"
imageURLs[33] = "images/large/giantPole.jpg"
imageURLs[34] = "images/large/harmonicsGuitar1.jpg"
imageURLs[35] = "images/large/harmonicsBridge.jpg"
imageURLs[36] = "images/large/genR8Inside.jpg"
imageURLs[37] = "images/large/bridgeComponent.jpg"
imageURLs[38] = "images/large/beamBots.jpg"
imageURLs[39] = "images/large/atBullets2.jpg"

//Could randomize the array order:
//imageURLs.sort(randOrd)
//or use day of week d.getDay() to start at 7 different points in list
//var d = new Date()

//Constants for behavior
var autoImageDelay = 12000
var transitionSteps = 20
var timerInterval = 80 //timers have minimum delay

//Variables for storing next and previous immages in a queue
var nextImage = new Image(imageHeight, imageWidth)
var previousImage = new Image(imageHeight, imageWidth)
var tempImage = new Image(imageHeight, imageWidth)
var nextIndex = 1
var previousIndex = imageURLs.length-1
nextImage.src = imageURLs[nextIndex]
previousImage.src = imageURLs[previousIndex]

//Play/pause next/prev controls
var pauseImage = new Image(11, 37)
var playImage = new Image(11, 37)
pauseImage.src = "images/pause.gif"
playImage.src = "images/play.gif"

//Timers for coordinating behavior
var autoTransitionTimerID = null
var swapDelayID = null
var fadeOutID = null
var fadeTimerID = null

//Variables for tracking state
var playing = true
var transitioning = false
var curOpacity = 100

function startSlideShow() {
	//clear all timers and initialize auto transition behavior
	clearInterval(autoTransitionTimerID)
	clearTimeout(swapDelayID)
	clearTimeout(fadeOutID)
	clearInterval(fadeTimerID)
	//setInterval produces stacking timers with Safari and the back button
	autoTransitionTimerID = setTimeout("fadeToNextImage()", autoImageDelay)
}

//gradual automated image fade:	
function fadeToNextImage() {
	transitioning = true
	tempImage.src = nextImage.src
	document.si.src = document.mi.src 	//make back image same as front
	changeOpac(0, 'mi') 				// make the front image transparent
	swapDelayID = self.setTimeout("document.mi.src = tempImage.src", 10) //change front image to new image
	fadeOutID 	= self.setTimeout("opacity('mi', 0, 100, transitionSteps)", 55) //fade front image in
	autoTransitionTimerID = setTimeout("fadeToNextImage()", autoImageDelay)
}

//called when clicked; let fade end or change to next image immediately
function gotoNextImage() {
	//immediately transition image
	if (transitioning) clearTimeout(fadeTimerID)
	changeOpac(100, 'mi')
	document.mi.src = nextImage.src
	setupNext()
}

function  gotoPreviousImage() {
	if (transitioning) clearTimeout(fadeTimerID)
	changeOpac(100, 'mi')
	document.mi.src = previousImage.src
	setupPrevious()
}

function setupNext() {
	//setup and preload next next image:
	nextIndex++
	previousIndex++
	if (nextIndex > (imageURLs.length-1)) nextIndex = 0
	if (previousIndex > (imageURLs.length-1)) previousIndex = 0
	nextImage.src = imageURLs[nextIndex]
	previousImage.src = imageURLs[previousIndex]
}

function setupPrevious() {
	nextIndex--
	previousIndex--
	if (nextIndex < 0) nextIndex = imageURLs.length-1
	if (previousIndex < 0) previousIndex = imageURLs.length-1
	nextImage.src = imageURLs[nextIndex]
	previousImage.src = imageURLs[previousIndex]
}

function playPause() {
	clearTimeout(autoTransitionTimerID)
	if (playing) {
		playing = false
		document.pausePlay.src = playImage.src
	} else {
		playing = true
		document.pausePlay.src = pauseImage.src
		fadeToNextImage()
	}
}

function opacity(id, opacStart, opacEnd, steps) {
	if (opacStart == opacEnd) return false //don't run if no change is required
	var increment = Math.round((opacEnd - opacStart) / steps)
	curOpacity = opacStart
	//alert("!!Starting auto transition: " + increment + " " + interval)
	fadeTimerID = setTimeout("timedOpacity(" + increment + "," + opacEnd + "," + timerInterval +")", timerInterval)		
} 

function timedOpacity(increment, opacEnd, interval) { //setup to accept id argument
	curOpacity = curOpacity + increment
	var killProcess = false
	if (increment < 0) {
		if (curOpacity <= opacEnd) killProcess = true	
	} else {
		if (curOpacity >= opacEnd) killProcess = true
	}
	changeOpac(curOpacity, 'mi')
	if (killProcess) {
		transitioning = false
		setupNext()
	} else {
		fadeTimerID = setTimeout("timedOpacity(" + increment + "," + opacEnd + "," + timerInterval +")", timerInterval)	
	}
}

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
}

function randOrd() {
	return (Math.round(Math.random())-0.5);
}