// // // // // // // // // // // // // // //
// Fading Image Slideshow                 //
//        by Luke Godfrey                 //
//                                        //
// This script creates an image slideshow //
// that includes a fade transition        //
// between images.                        //
// // // // // // // // // // // // // // //

var xmlDoc = getXml("/scripts/slideshow.xml");
var slides = xmlDoc.getElementsByTagName("slide");
var slide;

// Check if using Internet Explorer
var usingIE = (navigator.appName == 'Microsoft Internet Explorer');

// Variables to load from xml
var images = [];
var speed;
var timeout;

// Load settings
speed = Number(xmlDoc.getElementsByTagName("slideshow")[0].getAttribute("speed"));
timeout = Number(xmlDoc.getElementsByTagName("slideshow")[0].getAttribute("timeout"));

if(isNaN(speed) || speed <= 0) {
	speed = 1;
};
if(isNaN(timeout) || timeout <= 0) {
	timeout = 6;
};

// Load slides
for(var i = 0;i < slides.length;i++) {
	slide = slides[i].childNodes;
	images[i] = [];
	
	for(var j = 0;j < slide.length;j++) {
		switch(slide[j].tagName) {
			case "img":
			images[i][0] = usingIE ? slide[j].text : slide[j].textContent;
			break;
			
			case "link":
			images[i][1] = usingIE ? slide[j].text : slide[j].textContent;
			break;
		};
	};
};

// Preload the images so that the fading works correctly
var image_preload = [];
for(var i = 0;i < images.length;i++) {
	image_preload[i] = new Image();
	image_preload[i].src = images[i][0];
};

// Identifiers
var object1 = "slideshow1";
var object2 = "slideshow2";
var img1 = "img1";
var img2 = "img2";
var a = "slidelink";

// The index in "images" we are currently using
var image = 0;

// Prevent speed being longer than timeout
if(speed > timeout) {
	speed = timeout;
};

// Prepare the speed and timeout variables
speed *= 10;
timeout *= 1000;

function changeOpacity(id,opacity) {
	var object = document.getElementById(id).style;
	/* object.opacity = (opacity / 100);*/
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity="+opacity+")";
};

function fadeOpacity(id,opacity) {
	var timer = 0;
	var object = document.getElementById(id).style;
	var original_opacity = object.MozOpacity;
	
	if(original_opacity > opacity) {
		for(var i = original_opacity;i >= opacity;i--) {
			setTimeout("changeOpacity('"+id+"',"+i+")",(timer*speed));
			timer++;
		};
	} else if(original_opacity < opacity) {
		for(var i = original_opacity;i <= opacity;i++) {
			setTimeout("changeOpacity('"+id+"',"+i+")",(timer*speed));
			timer++;
		};
	};
};

function fadeNextSlide() {
	if(image >= images.length) {
		image = 0;
	};
	
	// img2 is the new image, img1 is the old
	// first, make img1 = img2
	document.getElementById(img1).src = document.getElementById(img2).src;
	document.getElementById(img2).src = images[image][0];
	
	document.getElementById(a).href = images[image][1];
	
	changeOpacity(object2,0);
	fadeOpacity(object2,100);
	
	image++;
	
	setTimeout("fadeNextSlide()",timeout);
};

function doSlideshow() {
	document.getElementById(object1).style.zIndex = 1;
	document.getElementById(object2).style.zIndex = 2;
	
	changeOpacity(object1,100);
	fadeNextSlide();
};