/*************************************************************************
*
*
* JavaScript ImageFader
* by Anthony Drendel
* http://goneeast.com
*
* Inspired by Carl Camera's CSS Photo Shuffler by Carl Camera (http://iamacamera.org)
* SetOpacity Function from Photo Fade by Richard Rutter (http://clagnut.com)
* 
* License: Creative Commons Attribution 2.5 License
* http://creativecommons.org/licenses/by/2.5/
*
*
**************************************************************************/

var imageId = "slideshow";
var imageArray = new Array(
	"files/cutout1.png",
    "files/cutout2.png",
    "files/cutout3.png",
    "files/cutout4.png",
    "files/cutout5.png",
    "files/cutout6.png",
    "files/cutout7.png",
    "files/cutout8.png",
    "files/cutout9.png",
	"files/cutout10.png",
    "files/cutout11.png",
    "files/cutout12.png",
    "files/cutout13.png",
    "files/cutout14.png",
    "files/cutout15.png",
    "files/cutout16.png"
    );

var secondsToWait = 4;
var secondsToFade = 1;
var imageArraySize = imageArray.length;
var opacity = 100;
var randomnumber = Math.floor(Math.random()* imageArraySize);
var nextImage = randomnumber;

window.onload = imageFaderStart;

function imageFaderStart() {
	var firstImage = Math.floor(Math.random() * imageArraySize);
	var originalImage = document.getElementById(imageId);
	originalImage.style.backgroundImage = "url("+ imageArray[firstImage] + ")";
	preloadImages();
	setTimeout("fadeOut()",secondsToWait*1000);
}

function preloadImages() {
	slideshowImage1 = new Image(255,405);
	slideshowImage1.src="files/cutout1.png";
	slideshowImage2 = new Image(266,405);
	slideshowImage2.src="files/cutout2.png";
	slideshowImage3 = new Image(252,405);
	slideshowImage3.src="files/cutout3.png";
	slideshowImage4 = new Image(258,405);
	slideshowImage4.src="files/cutout4.png";
	slideshowImage5 = new Image(255,405);
	slideshowImage5.src="files/cutout5.png";
	slideshowImage6 = new Image(255,405);
	slideshowImage6.src="files/cutout6.png";
	slideshowImage7 = new Image(292,405);
	slideshowImage7.src="files/cutout7.png";
	slideshowImage8 = new Image(260,405);
	slideshowImage8.src="files/cutout8.png";
	slideshowImage9 = new Image(267,405);
	slideshowImage9.src="files/cutout9.png";
	slideshowImage10 = new Image(260,405);
	slideshowImage10.src="files/cutout10.png";
	slideshowImage11 = new Image(300,405);
	slideshowImage11.src="files/cutout11.png";
	slideshowImage12 = new Image(249,405);
	slideshowImage12.src="files/cutout12.png";
	slideshowImage13 = new Image(282,405);
	slideshowImage13.src="files/cutout13.png";
	slideshowImage14 = new Image(265,405);
	slideshowImage14.src="files/cutout14.png";
	slideshowImage15 = new Image(254,405);
	slideshowImage15.src="files/cutout15.png";
	slideshowImage16 = new Image(276,405);
	slideshowImage16.src="files/cutout16.png";
}

function fadeOut() {
	var fadingOutImageId = document.getElementById(imageId);
	var fadeDelta = 100 / (30 * secondsToFade);	
	if (opacity < 2*fadeDelta) {
		opacity = 0;
		setOpacity(fadingOutImageId,opacity);
		if (nextImage >= imageArraySize) {
			nextImage = 0;
		}
		fadingOutImageId.style.backgroundImage = "url("+ imageArray[nextImage] + ")";
		setOpacity(fadingOutImageId,opacity);
		nextImage++;
		fadeIn();
	}
	else {
		opacity = opacity - fadeDelta;
		setOpacity(fadingOutImageId,opacity);
		setTimeout("fadeOut()",30);
	}
}

function fadeIn() {
	var fadingInImageId = document.getElementById(imageId);
	var fadeDelta = 100 / (30 * secondsToFade);
	if (opacity > (100 - (2*fadeDelta))) {
		opacity = 100;
		setOpacity(fadingInImageId,opacity);
		setTimeout("fadeOut()",secondsToWait*1000);
	}
	else {
		opacity = opacity + fadeDelta;
		setOpacity(fadingInImageId,opacity);
		setTimeout("fadeIn()",30);
	}
}

function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	
	/* Internet Explorer */
	obj.style.filter = "alpha(opacity:"+opacity+")";
	
	/* Safari, Konqueror */
	obj.style.KHTMLOpacity = opacity/100;
	
	/* Old Mozilla and Firefox */
	obj.style.MozOpacity = opacity/100;
	
	/* new Safari, Firefox, Mozilla, CSS3 */
	obj.style.opacity = opacity/100;
}