// create arrays of filenames for images. these must all be in the same directory
var panel1_images = new Array("1a.jpg", "1b.jpg", "1c.jpg");
var panel2_images = new Array("2a.jpg", "2b.jpg", "2c.jpg");
var panel3_images = new Array("3a.jpg", "3b.jpg", "3c.jpg");
var panel_images = new Array(panel1_images, panel2_images, panel3_images);
var panel_position = new Array (0, 0, 0);

function initImages() {
	if(document.getElementById) {
		// get directory for images
		var image_src = document.getElementById("image0").src;
		var last_slash = image_src.lastIndexOf("/");
		img_dir = image_src.substring(0, last_slash+1);
		startImages();
	}
}

function startImages() {
	// fade in 1st panel after 1 second
	window.setTimeout("rotateImage(0)", 1000);
	// fade in 2nd panel after 2 seconds
	window.setTimeout("rotateImage(1)", 2000);
	// fade in 3rd panel after 3 seconds
	window.setTimeout("rotateImage(2)", 3000);
	
	// repeat after 5 seconds
	window.setTimeout("initImages()", 5000);
}

function rotateImage(panel) {
	//	advance image cycle
	var next_position = panel_position[panel] + 1;
	if(next_position > panel_images[panel].length-1) {
		next_position = 0;
	}
	image_url = img_dir + panel_images[panel][next_position]
	swapImage(panel, image_url);
	panel_position[panel] = next_position;
}

function swapImage(panel, next_image_url) {
	// get HTML elements
	var holder_id = "holder" + panel;
	var image_id = "image" + panel;
	var holder = document.getElementById(holder_id);
	var image = document.getElementById(image_id);
	var current_image_url = image.src;
	
	// set div background to current image if current didn't fail to load
	holder.style.backgroundImage = "url(" + current_image_url + ")";
 	setOpacity(image, 0);
	
	// wait briefly for opacity to be set then load in new image
	window.setTimeout("replaceImage('"+image_id+"', '"+next_image_url+"')", 100);
}

function replaceImage(image_id, next_image_url) {
	var image = document.getElementById(image_id);
 	// hide current image
	
	// replace current image with new image and fade in when it's loaded
	image.src = next_image_url;
	image.onload = function() {
 		fadeIn(image_id,0);
 	}	
}

function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 1; // increase opacity by 1%
			// repeat opacity increase after 10ms
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 10);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}