var started = false;
var changetimer;
var fadetimer;
var frame_rate = 50; //50 frames per second
var animation_time = 2; //number of seconds animation will last
var current_frame = 1;
var frame_total = frame_rate*animation_time;
var frontimg, backimg;
var num_of_images = 10;
var time_between_change = 3; //seconds between image fades
var imgs = new Array(num_of_images);
var base_dir = "images/front-rotation/";
var images_loaded = 0;
var next_img = 2;

function crossfade() {
	if (!started) {
		fadetimer = setInterval(crossfade, 1000/frame_rate);
		started = true;
	} else {
		frontimg.style.filter="alpha(opacity=" + 100*(1-(current_frame/frame_total)) + ")";
		backimg.style.filter="alpha(opacity=" + 100*(current_frame/frame_total) + ")";
		frontimg.style.opacity = 1 - (current_frame/frame_total);
		backimg.style.opacity = current_frame/frame_total;
		current_frame+=1;
		if(current_frame>frame_total) {
			clearInterval(fadetimer);
			current_frame = 1;
			started = false;
			var temp = frontimg;
			frontimg = backimg;
			backimg = temp;
			backimg.src = imgs[next_img].src;
			if(++next_img == num_of_images) {
				next_img = 0;
			}
			setTimeout(crossfade, 1000*time_between_change);
		}
	}
}

function imgload() {
	images_loaded++;
	if(images_loaded == num_of_images) {
		fadetimer = setTimeout(crossfade, 1000*time_between_change);
	}
}

function imgstart() {
	if(document.title == "Children Matter Network - Belonging") {
		base_dir = "../../images/front-rotation/belonging/";
		num_of_images = 14;
	} else if(document.title == "Children Matter Network - Enjoyment") {
		base_dir = "../../images/front-rotation/enjoyment/";
		num_of_images = 9;
	} else if(document.title == "Children Matter Network - Power and Esteem") {
	    base_dir = "../../images/front-rotation/power_esteem/";
	    num_of_images = 17;
	}
	for(var i=0; i < num_of_images; i++) {
		imgs[i] = new Image();
		imgs[i].onload = imgload;
		imgs[i].src = base_dir + i + ".jpg";
	}

	backimg = document.getElementById("i1");
	frontimg = document.getElementById("i2");
}

// set the onload function to the function defined above
//window.onload = start;