var currentId = 0; 
var numberImages = 0;
var	img = null;
var next = null;
var first = "true";
var transitionDuration = 2000; // number of total time spent fading images in and out
var timeOnSlide = 5000; // number of total time showing each slide
var fpt = 25; // # of frames per transition 
var slides = new Array();
var timeoutFadeIn = new Array();
var timeoutFadeOut = new Array();
var continueSlideshow = 1;
var timeoutSwitchClass;
var timeoutNextSlide;
var timeoutFadeEnd;
var previous = 0;

function nextSlide()
{	
	// Set current and next images
	setImages();

	// Apply transitions to images
	fade();
	
	// Assign new image classes to show which is now the current img
	timeoutSwitchClass = setTimeout("switchClass()", transitionDuration); // after transition, set image to top level

	// Go to next slide after "timeOnSlide"
	timeoutNextSlide = setTimeout("nextSlide()", timeOnSlide);
}

function setImages() { 
	// Get current img
	if(first == "false") {  // if first, then there is no current image (img not needed to fade out)
		img = slides[currentId];
		
		if( previous == 1) {
			currentId--; // go back
			previous = 0; // resume forward motion after going back one slide
		} else {
		currentId++; // go forwards
		}
	}
				
	// Assign next img
	if(currentId == numberImages) { 
		currentId = 0; // loopback around
	} else if (currentId < 0) {
		currentId = numberImages - 1; // moving backwards on first slide means going back to last slide
	}
	next = slides[currentId];
	next.className = "fadeSlide"; // set image to middle level
}

function switchClass() {
	next.className = "currentSlide";
	if(img != null) { img.className = ""; }
}

function fade() {  // fade current image out ("img") and next image in ("next")
	var level = 0;
	var index = 0;
	
	for (i=0; i<=1; i+=(1/fpt)) {
		level = 1 - i;
		timeoutFadeIn[index] = setTimeout("setOpacityNext(" + i + ")", i * transitionDuration); // fade in next image
		if(img != null) { // check if there is something to fade out
			timeoutFadeOut[index] = setTimeout("setOpacity(" + level + ")", i * transitionDuration); // fade out current image
		} else {
			first = "false"; 
		}
		index++;
	}
	timeoutFadeEnd = setTimeout("switchSlide()", 2000); // at end of transition, make sure that images are fully faded
}

function switchSlide() {
	setOpacityNext(1); // make sure images fade in to 1
	if(img != null) {
		setOpacity(0); // make sure images fade out to 0  
	}
}

function setOpacity(level) {
	img.style.filter = "alpha(opacity=" + (level * 100) + ");";
	img.style.opacity = level;
	img.style.MozOpacity = level;
	img.style.KhtmlOpacity = level;
}

function setOpacityNext(level) {
	next.style.filter = "alpha(opacity=" + (level * 100) + ");";
	next.style.opacity = level;
	next.style.MozOpacity = level;
	next.style.KhtmlOpacity = level;
}

function clearTimeouts() {
	clearTimeout(timeoutSwitchClass);
	clearTimeout(timeoutNextSlide);
	clearTimeout(timeoutFadeEnd);
	
	for(i=0; i<=timeoutFadeIn.length; i++) {
		clearTimeout(timeoutFadeIn[i]);
		if (timeoutFadeOut != null) { clearTimeout(timeoutFadeOut[i]); }
	}
}

function pauseSlideshow() {
	if( continueSlideshow == 1 ) {
		var pause_button = document.getElementById("pause_button");
		pause_button.style.visibility = 'hidden';
		var play_button = document.getElementById("play_button");
		play_button.style.visibility = 'visible';
		
		clearTimeout(timeoutSwitchClass);
		clearTimeout(timeoutNextSlide); // pause
		continueSlideshow = 0; 
	} else {
		var pause_button = document.getElementById("pause_button");
		pause_button.style.visibility = 'visible';
		var play_button = document.getElementById("play_button");
		play_button.style.visibility = 'hidden';
		
		nextSlide(); // resumes paused slideshow when button is clicked again
		continueSlideshow = 1;
		
	}
}

function skipSlide() { // Note: stops any current fade, skips to next image right away
	clearTimeouts();
	switchSlide(); // finish any current fades immediately 
	setImages(); // set new images (determines images)
	switchClass(); // set image classes immediately (determines layering)
	switchSlide(); // set image opacities immediately (determines opacities)
	if (continueSlideshow == 1 ) { // check if currently paused
		timeoutNextSlide = setTimeout("startSlideshow()", timeOnSlide); // resume slideshow (will start up again after "timeOnSlide" has passed)
	}
}

function goBack() { // Note: stops any current fade, goes back to previous slide right away
	clearTimeouts();
	switchSlide(); // finish any current fades immediately 
	previous = 1; // tell setImages that the next image should be the previous one
	setImages(); // set new images (determines images)
	switchClass(); // set image classes immediately (determines layering)
	switchSlide(); // set image opacities immediately (determines opacities)
	if (continueSlideshow == 1 ) { // check if currently paused
		timeoutNextSlide = setTimeout("startSlideshow()", timeOnSlide); // resume slideshow (will start up again after "timeOnSlide" has passed)
	}
}

function startSlideshow() {
	nextSlide(); // fade in first image right after load 
}

function slideshow_startup()
{
	var first = "true";
	var slideshow = document.getElementById("slideshow");
	var children = slideshow.childNodes;
	for( i=0; i<children.length; i++ ) {
		// skip non-element nodes (type 1)
		if( children[i].nodeType != 1 ) continue;
		if ( first == "true" ) { 
			first = false; // skip the first div which contains the controls for the slideshow
		} else {
			slides.push(children[i]);
		}
	}
	numberImages = slides.length;
	
	startSlideshow();
}

slideshow_startup();