﻿// RunSlideshow.js

var imageList = new Array();
var captionList = new Array();
var linklist = new Array();

var imageListPtr = 0;
var imageListPtrStart = 0;
var imageListCounter = 1;

var pictureID = "";
var backgroundID = "";
var captionID = "";
var counterID = "";

var blUpdateCaption = false;
var blUpdateCounter = false;

var fadeDurationMS = 300;
var slideCache = new Array();

var timeoutId = null;


// Invoke this function as part of the page initialization.
//		slideshowPictureID is the ID of the image whose .src will change.
//		slideshowBackgroundID is the ID of the div containing the above image.
// 		imageArray contains the names of the images, as strings.
//		blRandomize = true to start at a random point in the array of images.
//		slideshowCaptionID (optional) is the ID of the div in which the caption is to be displayed.
//		captionArray (optional) contains the string to display for the corresponding image.
//		slideshowCounterID (optional) is the ID of the div in which the counter (1/n, 2/n, etc.) will
//			be displayed.  If a counter is desired but no caption, then specify empty strings for the
//			caption ID and caption array.

function InitSlideshow(slideshowPictureID, slideshowBackgroundID, imageArray, blRandomize, 
			slideshowCaptionID, captionArray,
			slideshowCounterID, 
			linkArray) {
	
	// Determine if a caption is to be updated.
	if ((arguments.length >= 6) && (slideshowCaptionID != ""))
		blUpdateCaption = true;
	else
		blUpdateCaption = false;
		
	// Determine if a counter is to be updated.
	if ((arguments.length >= 7) && (slideshowCounterID != ""))
		blUpdateCounter = true;
	else
		blUpdateCounter = false;
		
	// Determine if images are clickable.
	if (arguments.length == 8)
		linkList = linkArray;
		
		
	// Save the IDs for the picture, the background, the caption and the counter.
	pictureID = slideshowPictureID;
	backgroundID = slideshowBackgroundID;
	if (blUpdateCaption) captionID = slideshowCaptionID;
	if (blUpdateCounter) counterID = slideshowCounterID;
	
	// Copy the array(s) so we have access to it from multiple functions in this file.
	imageList = imageArray;
	if (blUpdateCaption ) captionList = captionArray;
	
	// Initialize
	imageListPtr = 0;		// Pointer into array.
	imageListCounter = 1;	// 1/9, 2/9, etc. starts at 1/9.
	
	// Generate random number between 0 and length of array.
	// Before subtracting 1, the result is a random number between 1 and number of array elements.
	if (blRandomize) imageListPtr = createRandomNumber(0, imageList.length-1);
	
	imageListPtrStart = imageListPtr;

	// When using randomize, the picture image on the web page is typically set to hidden
	// so an image is not displayed until the first random image is displayed.  In that case,
	// make sure the first image is displayed and the picture is visible.
	var picture = document.getElementById(pictureID);
	
	picture.src = imageList[imageListPtr];
	
	picture.style.visibility = "visible";
	
	// Make sure the caption is visible.
	if (blUpdateCaption) {
		var caption = document.getElementById(captionID);
	
		caption.innerHTML = captionList[imageListPtr];
	
		caption.style.visibility = "visible";
	}

	// Make sure the counter is visible.
	if (blUpdateCounter) {
		var counter = document.getElementById(counterID);
	
		// 1/9, for example.
		counter.innerHTML = (imageListCounter) + " of " + imageList.length;
	
		counter.style.visibility = "visible";
	}
}


function SetOpacity(object, opacityPct) {
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}


function ChangeOpacity(id, msDuration, msStart, fromO, toO) {

	var element=document.getElementById(id);
	var msNow = (new Date()).getTime();
	var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
	
 	if (opacity>=100) {

		SetOpacity(element, 100);
		element.timer = undefined;
	}
 	else if (opacity<=0)
 	{
		SetOpacity(element,0);
		element.timer = undefined;
	}
	else 
	{
		SetOpacity(element,opacity);
		element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + 
											fromO + "," + toO + ")", 10);
	}
}


function FadeInImage(foregroundID, newImage, backgroundID) {

	var foreground=document.getElementById(foregroundID);
	
	if (foreground.timer) window.clearTimeout(foreground.timer);
	
	if (backgroundID) {

		var background=document.getElementById(backgroundID);
		
		if (background) {

			if (background.src) {

				foreground.src = background.src; 
				SetOpacity(foreground, 100);
			}
			
			background.src = newImage;
			background.style.backgroundImage = 'url(' + newImage + ')';
			background.style.backgroundRepeat = 'no-repeat';
		
			var startMS = (new Date()).getTime();
			foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + fadeDurationMS + "," +
												startMS + ",100,0)", 10);
		}
	} else {
		foreground.src = newImage;
	}
}


//
// Run the slideshow.
// NOTE: BE SURE TO CALL InitSlideshow, TYPICALLY WHEN THE PAGE LOADS, BEFORE CALLING THIS FUNCTION!
//

function RunSlideshow(displaySeconds, blStop) {

	// Ensure slideshow is not running.
	if (timeoutId != undefined) clearTimeout(timeoutId);
	
	// Go to the next picture.
	imageListPtr += 1;
	
	// Wrap around.
	if (imageListPtr >= imageList.length) imageListPtr = 0;

	// Display the image.
	var nextImage = imageList[imageListPtr];
  
 	FadeInImage(pictureID, nextImage, backgroundID);
 	
 	// Update the caption.
	if (blUpdateCaption) {
		var caption = document.getElementById(captionID);
	
		caption.innerHTML = captionList[imageListPtr];
	}
  
 	// Update the counter.
	if (blUpdateCounter) {
		var counter = document.getElementById(counterID);
		
		// Increment the counter.
		imageListCounter += 1;
		
		// Wrap around.
		if (imageListCounter > imageList.length) imageListCounter = 1;
	
		counter.innerHTML = imageListCounter + " of " + imageList.length;
	}

	// Continue if either:
	//		we have not wrapped around to the original starting image or
	//		we are running in repeat mode (not stop mode)
	if ( (imageListPtr != imageListPtrStart) || (!blStop) ) {
    
		timeoutId = setTimeout ("RunSlideshow(" + displaySeconds + "," + blStop + ")", displaySeconds*1000);
	
		// Cache the next image to improve performance.
		nextImage = imageList[imageListPtr];
    
		if (slideCache[nextImage] == null) {
			slideCache[nextImage] = new Image;
			slideCache[nextImage].src = nextImage;
		}
	}
}


//
// Pause the slideshow.
// NOTE: BE SURE TO CALL InitSlideshow, TYPICALLY WHEN THE PAGE LOADS, BEFORE CALLING THIS FUNCTION!
//

function PauseSlideshow() {

	// Ensure slideshow is not running.
	if (timeoutId != undefined) clearTimeout(timeoutId);
	
}


//
// Step forward one picture.
// NOTE: BE SURE TO CALL InitSlideshow, TYPICALLY WHEN THE PAGE LOADS, BEFORE CALLING THIS FUNCTION!
//

function StepForward(blPerformFade) {

	// Ensure slideshow is not running.
	if (timeoutId != undefined) clearTimeout(timeoutId);
	
	// Go to next picture.
	imageListPtr += 1;
		
	// Wrap around.
	if (imageListPtr >= imageList.length) imageListPtr = 0;
	
	// Get the filespec of the next picture to display.
	var nextImage = imageList[imageListPtr];
		
	// Display the picture.
	if (blPerformFade)
	
 		FadeInImage(pictureID, nextImage, backgroundID);

	else {
	
 		var picture = document.getElementById(pictureID);

		picture.src = nextImage;
		
		// Ensure opacity is 100% in case slideshow was running and foreground picture was set to less than 100%.
		SetOpacity(picture, 100);
	}

	// Update the caption.
	if (blUpdateCaption) {
		var caption = document.getElementById(captionID);
	
		caption.innerHTML = captionList[imageListPtr];
	}

 	// Update the counter.
	if (blUpdateCounter) {
		var counter = document.getElementById(counterID);
	
		// Increment the counter.
		imageListCounter += 1;
		
		// Wrap around.
		if (imageListCounter > imageList.length) imageListCounter = 1;
	
		counter.innerHTML = imageListCounter + " of " + imageList.length;
	}

	// This is now the start if the user clicks the button to play the entire slideshow.
	imageListPtrStart = imageListPtr;
}


//
// Step back one picture.
// NOTE: BE SURE TO CALL InitSlideshow, TYPICALLY WHEN THE PAGE LOADS, BEFORE CALLING THIS FUNCTION!
//

function StepBack(blPerformFade) {

	// Ensure slideshow is not running.
	if (timeoutId != undefined) clearTimeout(timeoutId);
	
	// Go to previous picture.
	imageListPtr -= 1;
		
	// Wrap around.
	if (imageListPtr < 0) imageListPtr = imageList.length-1;
	
	// Get the filespec of the next picture to display.
	var nextImage = imageList[imageListPtr];
  
	// Display the picture.
	if (blPerformFade)
	
 		FadeInImage(pictureID, nextImage, backgroundID);

	else {
	
 		var picture = document.getElementById(pictureID);

		picture.src = nextImage;
		
		// Ensure opacity is 100% in case slideshow was running and foreground picture was set to less than 100%.
		SetOpacity(picture, 100);
	}

	// Update the caption.
	if (blUpdateCaption) {
		var caption = document.getElementById(captionID);
	
		caption.innerHTML = captionList[imageListPtr];
	}

 	// Update the counter.
	if (blUpdateCounter) {
		var counter = document.getElementById(counterID);
	
		// Decrement the counter.
		imageListCounter -= 1;
		
		// Wrap around.
		if (imageListCounter == 0) imageListCounter = imageList.length;
	
		counter.innerHTML = imageListCounter + " of " + imageList.length;
	}

	// This is now the start if the user clicks the button to play the entire slideshow.
	imageListPtrStart = imageListPtr;
}


//
// For clickable images, go to the specified page.
//

function SlideLink() {

	window.location = linkList[imageListPtr];
		
}


