var timerId = 0;
var slideShowDelay = 4500;
var cur_image_num = 0;
var image_array=[];
var num_frames = 0;

function timerClickHandler(action, script, timeout)
{
	if (action == "stop") {
		clearTimeout(timerId);
	} else if (action == "play") {
		// Start the timer
		timerId = setTimeout(script, timeout);
	}
}

function opacity(layer, opacStart, opacEnd)
{
	//speed for each frame
	var timeToLoad = 0.8;   // In seconds.

	var speed = Math.round((timeToLoad * 1000)/100);
	var timer = 0;

	// Set the initial opacity...
	setOpacity(layer, opacStart);
	toggleLayer(layer, 1);

	// Determine the direction for the blending, if start and end are the same nothing happens.
	if (opacStart > opacEnd) {
		for (i = opacStart; i >= opacEnd; i--) {
			setTimeout("setOpacity(" + "\"" + layer + "\"" + "," + i + ")", (timer * speed));
			timer++;
		}
	} else if (opacStart < opacEnd) {
		for (i = opacStart; i <= opacEnd; i++) {
			setTimeout("setOpacity(" + "\"" + layer + "\"" + "," + i + ")", (timer * speed));
			timer++;
		}
	}
}

// Change the opacity for different browsers
function setOpacity(layer, opacity)
{
	var divName = document.getElementById(layer);

	divName.style.opacity = (opacity / 100);
	divName.style.MozOpacity = (opacity / 100);
	divName.style.KhtmlOpacity = (opacity / 100);

	divName.style.filter = "alpha(opacity=" + opacity + ")";
}

function toggleLayer(layer, state)
{
	var toggleDiv = document.getElementById(layer)

	if (state == 1) {
		toggleDiv.style.display = "block";
	} else {
		toggleDiv.style.display = "none";
	}
}

function updateSlideShowControlBar(selected_layer, image_name)
{
	var hilight_layer = document.getElementById(selected_layer);
	var dim_layer = "";

	// First loops through the layers to see if the 'frameSelected' class is selected, and saves that id -- to become the non-selected layer.
	for (cur_frame=0; cur_frame < num_frames; cur_frame++) {
		check_layer_name = 'frame' + cur_frame;
		
		check_layer = document.getElementById(check_layer_name);

		if (check_layer.className == "frameSelected") {
			dim_layer = check_layer;
		}
	}

	// Doesn't do anything if we click on the selected frame.
	// Otherwise, it swaps the css class for the frame, and update the image.

	if (hilight_layer.className != "frameSelected") {
		var display_image = document.getElementById('slideShowImage');
		hilight_layer.className = "frameSelected";
		dim_layer.className = "frameNotSelected";

		opacity("slideShowImage", 100, 0);

		new_image = "images/slideshow/" + image_name;

		command = "document.getElementById('slideShowImage').src=new_image";
		setTimeout(command, 900);
		setTimeout("opacity(\"slideShowImage\", 1, 100)", 900);
	}
}

function doSlideShow()
{
	if (cur_image_num > num_frames-1) {
		cur_image_num = 0;
	}

	selected_layer = 'frame' + cur_image_num;

	updateSlideShowControlBar(selected_layer, image_array[cur_image_num]);
	cur_image_num++;
	timerClickHandler('play', 'doSlideShow()', slideShowDelay);
}