/********************************************************************

	homeSlideshow.js - slideshow for the home page
	
	To make it work, startSlideshow() must be called sometime after the document has loaded
	
*********************************************************************/

var imagePaths = ['images/slide01.jpg', 'images/slide02.jpg', 'images/slide03.jpg', 'images/slide04.jpg'];
var imageShowTime = 5000; // time to show one image before the next image starts to show, in milliseconds
var swapTime = 750; // how much time the image swapping takes, in milliseconds
var startDelay = 500; // delay before the first image fades in - give the images some time to load


var imgs = [];

function preloadImages() {

	for (var i = 0; i < imagePaths.length; i++) {
		imgs[i] = new Image();
		imgs[i].src = imagePaths[i];
	}

	
}

var intervalId = '';
var imageIndex = 0;
var currentImgSrc = "";

function startSlideshow() {
	var div = document.getElementById("slideshow");
	//div.style.backgroundImage = "url('" + imgs[1].src + "')";
	div.innerHTML = '<img id="slideshowCurrentImage"  src="" style="display: none;"/>';
	//imageIndex = 1;
	
	setTimeout("showNextImage()", startDelay);
}

function showNextImage() {
	// init the fading out effect of the current image
	//doFadeOut(swapTime);
	var img = document.getElementById("slideshowCurrentImage");
	var div = document.getElementById("slideshow");
	img.style.display = "none";
	img.src = imgs[imageIndex].src;
	imageIndex = (imageIndex + 1) % imagePaths.length;
	img.style.display = "inline";
	imgFadeIn(swapTime)
}

function setOpacity(element, opacity) {
	// set the transparency property of element in all browsers
	element.style["-moz-opacity"] = opacity; // mozilla
	element.style.filter = "alpha(opacity=" + opacity * 100 + ")"; // IE
	element.style.opacity = opacity; // other browsers, like Opera
}

function doFadeOut(remainingTime) {
	var img = document.getElementById("slideshowCurrentImage");
	
	if (remainingTime <= 0) {
		// finish the fade out effect
		
		img.src = imgs[imageIndex].src;
		setOpacity(img, 1);
		
		// prepare the next image
		
		// the index of the next image in the slideshow
		imageIndex = (imageIndex + 1) % imagePaths.length;
		
		var div = document.getElementById("slideshow");
		div.style.backgroundImage = "url('" + imgs[imageIndex].src + "')";
		
		setTimeout("showNextImage()", imageShowTime);
	} else {
		var opacity = remainingTime / swapTime;
		setOpacity(img, opacity);
	
		setTimeout("doFadeOut(" + (remainingTime - 33) + ")", 33);
	}
}

function imgFadeIn(remainingTime) {
	var img = document.getElementById("slideshowCurrentImage");
	var div = document.getElementById("slideshow");
	if (remainingTime <= 0) {
		// finish the fade in effect
		div.style.backgroundImage = "url('" + img.src + "')";
		setOpacity(img, 0);
		// prepare the next image
		
		// the index of the next image in the slideshow
		
		setTimeout("showNextImage()", imageShowTime);
	} else {
		var opacity = 1 - remainingTime / swapTime;
		setOpacity(img, opacity);
	
		setTimeout("imgFadeIn(" + (remainingTime - 33) + ")", 33);
	}
}

preloadImages();