/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified by Robert Carbajal
*		Changes made:
*			- Stop/restart functionality
*			- Forward/backward manual navigation
*			- Added ability to show a specific image for a given index
***********************************************/

/*********************************
 ***** Configuration Section *****
 *********************************/
//var slideshow_width = 260;  //set image width (px)
//var slideshow_height = 158; //set image height (px)
//var pause = 2000;  //set pause time between slides (ms)
var fadeTime = 10;  //set speed for fading between pics (ms) (lower values = faster fading)
var isAuto = false;  //set whether the fading automatically cycles on load
var isReverse = false;  //set whether to cycle forward or backward through the image array (fadeImages)
//var imageCSSClass = "";

if(!pause) var pause = 2000;
if(!slideshow_width) var slideshow_width = 260;
if(!slideshow_height) var slideshow_height = 158;
if(!imageCSSClass) var imageCSSClass = "";

/*
 * Each element in the array below must be specified as:
 * ["{PATH}", "{URL (optional)}", "{value for "target" attribute of link (optional)}", "{alt text for image tag (optional)}"]
 * e.g.
 * 	fadeImages[0] = ["/images/pic.jpg", "http://www.google.com", "_blank"]; //creates an image that opens up a new window to google.com
 *	fadeImages[1] = ["/images/pic.jpg", "", "", ""]; //just creates the image with no <a> tag
 */
if(!fadeImages || !fadeImages.length) fadeImages = new Array();

/*************************************
 ***** End Configuration Section *****
 *************************************/

var isSetTimeout = true;
var timeout = null;
var ie4 = document.all;
var dom = document.getElementById;
var curpos = 10;
var degree = 10;
var curcanvas = "canvas0";
var curimageindex = 0;
var crossobj = null;
var fadeInterval = null;
var canvasWidth = slideshow_width > 0 ? "width: " + slideshow_width + "px;" : "";
var canvasHeight = slideshow_height > 0 ? "height: " + slideshow_height + "px;" : "";
var otherFunc = null;

//preload images
var preloadedImages = new Array();
for(var i = 0; i < fadeImages.length; i++) {
	preloadedImages[i] = new Image();
	preloadedImages[i].src = fadeImages[i][0];
} //end for

//write out image display section
if(ie4 || dom)
	document.write('<div style="margin-left: auto; margin-right: auto;"><div style="position:relative;'+canvasWidth+canvasHeight+'overflow:hidden;"><div id="canvas0" style="position:absolute;'+canvasWidth+canvasHeight+'top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;"></div><div id="canvas1" style="position:absolute;'+canvasWidth+canvasHeight+'top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div></div>');
else {
	var altText = fadeImages[0][3] ? 'alt="' + fadeImages[0][3] + '"' : 'alt=""';
	document.write('<div style="margin-left: auto; margin-right: auto;"><img name="defaultslide" class="' + imageCSSClass + '" src="' + fadeImages[0][0] + '" ' + altText + ' /></div>');
} //end else

/**
 * function to perform fading between images
 */
function fadePic() {
	if(curpos < 100) {
		curpos += 10;
		if(tempobj.filters)
			tempobj.filters.alpha.opacity = curpos;
		else
			tempobj.style.MozOpacity = curpos / 101;
	} //end if
	else {
		clearInterval(fadeInterval);
		var currentCanvas = ie4 ? eval("document.all." + curcanvas) : document.getElementById(curcanvas);

		if(isAuto) {
			setNextImageIndex();

			crossobj = currentCanvas;
			crossobj.innerHTML = insertImage(curimageindex);
			crossobj.style.visibility = "hidden";

			timeout = setTimeout("rotateImage()", pause);
			isSetTimeout = true;
		} //end if
		else {
			var objPrevImage = currentCanvas;
			objPrevImage.style.visibility = "hidden";
		} //end else

		//if nav buttons exist, set onclick events
		var backButton = document.getElementById("backButton");
		if(backButton) backButton.onclick = previousImage;
		var nextButton = document.getElementById("forwardButton");
		if(nextButton) nextButton.onclick = nextImage;
	} //end else
} //end function fadePic

/**
 * function to write out image HTML
 */
function insertImage(i) {
	var altText = fadeImages[i][3] ? 'alt="' + fadeImages[i][3] + '"' : 'alt=""';
	var tempContainer = fadeImages[i][1] != "" ? '<a href="' + fadeImages[i][1] + '" target="' + fadeImages[i][2] + '">' : "";
	tempContainer += '<img src="' + fadeImages[i][0] + '" class="' + imageCSSClass + '" style="'+canvasWidth+canvasHeight+'" ' + altText + ' />';
	tempContainer = fadeImages[i][1] != "" ? tempContainer + '</a>' : tempContainer;
	return tempContainer;
} //end function insertImage

/**
 * function to continue cycling through the list of images
 */
function rotateImage() {
	if(ie4 || dom) {
		//if nav buttons exist, set onclick to do nothing to prevent errors in script execution
		var backButton = document.getElementById("backButton");
		if(backButton) backButton.onclick = function() { return false; };
		var nextButton = document.getElementById("forwardButton");
		if(nextButton) nextButton.onclick = function() { return false; };

		//reset canvas opacity
		resetCanvas(curcanvas);

		//set new image to be visible
		crossobj = tempobj = ie4 ? eval("document.all." + curcanvas) : document.getElementById(curcanvas);
		crossobj.style.zIndex++;
		crossobj.style.visibility = "visible";

		//set time for fading
		fadeInterval = setInterval("fadePic()", fadeTime);

		//define next canvas
		curcanvas = curcanvas == "canvas0" ? "canvas1" : "canvas0";
	} //end if
	else {
		document.images.defaultslide.src = fadeImages[curimageindex][0];
		if(fadeImages[curimageindex][3]) document.images.defaultslide.alt = fadeImages[0][3];
	} //end else
	
	//call other function if one was specified
	if(otherFunc) otherFunc();
} //end function rotateImage

/**
 * function to reset canvas opacity
 */
function resetCanvas(canvasId) {
	curpos = 10;
	crossobj = ie4 ? eval("document.all." + canvasId) : document.getElementById(canvasId);

	if(crossobj.filters)
		crossobj.filters.alpha.opacity = curpos;
	else if(crossobj.style.MozOpacity)
		crossobj.style.MozOpacity = curpos / 101;
} //end function resetCanvas

/**
 * function to set the next index in the image array that is to be displayed
 */
function setNextImageIndex(idx) {
	if(!isNaN(idx)) {
		if(idx >= fadeImages.length)
			curimageindex = fadeImages.length - 1;
		else if(idx < 0)
			curimageindex = 0;
		else
			curimageindex = idx;
	} //end if
	else {
		if(isReverse)
			curimageindex = curimageindex == 0 ? fadeImages.length - 1 : curimageindex - 1;
		else
			curimageindex = curimageindex < fadeImages.length - 1 ? curimageindex + 1 : 0;
	} //end else
} //end function setNextImageIndex

/**
 * function to set the next image to be displayed
 */
function prepCurImage() {
	crossobj = ie4 ? eval("document.all." + curcanvas) : document.getElementById(curcanvas);
	crossobj.innerHTML = insertImage(curimageindex);
} //end function prepCurImage

/**
 * function to manually display the next image in the image list
 */
function nextImage() {
	isReverse = false;
	setNextImageIndex();
	prepCurImage();
	rotateImage();
} //end function nextImage

/**
 * function to manually display the previous image in the image list
 */
function previousImage() {
	isReverse = true;
	setNextImageIndex();
	prepCurImage();
	rotateImage();
} //end function previousImage

/**
 *
 */
function gotoImage(idx) {
	isReverse = false;
	setNextImageIndex(idx);
	prepCurImage();
	rotateImage();
} //end function gotoImage

/**
 * function to start image cycling
 */
function start(customFunc) {
	if(customFunc) otherFunc = customFunc;
	prepCurImage();
	rotateImage();
} //end function start

/**
 * function to stop image cycling
 */
function stop() {
	isAuto = false;
	curimageindex = curimageindex == 0 ? fadeImages.length - 1 : curimageindex - 1;

	if(isSetTimeout) {
		clearTimeout(timeout);
		isSetTimeout = false;
	} //end if
} //end function stop