//initialisation
var preLoad = new Array();
var preLoadFull = new Array();
var preLoadAlts = new Array();

var white = new Image();
var prev_img = new Image();
var prev_img_hover = new Image();
var next_img = new Image();
var next_img_hover = new Image();

var speed = 2;
var image_no = 0;

//preload white image and arrow images
white.src = document.getElementById(spread_img_id).src;
prev_img.src = document.getElementById(prev_img_id).src;
prev_img_hover.src = document.getElementById("prev_hover_img").src;
next_img.src = document.getElementById(next_img_id).src;
next_img_hover.src = document.getElementById("next_hover_img").src;

//pre-load all the spreads
for (i = 0; i < p; i++) {
	preLoad[i] = new Image();
		var img_id = "img" + i;
		var img = document.getElementById(img_id);
			preLoad[i].src = img.src;
}

//pre-load all alts
for (i = 0; i < p; i++) {
	var alt_id = "alt" + i;
	var alt = document.getElementById(alt_id);
		preLoadAlts[i] = alt.innerHTML;
}


//produce pre-loads all the full spreads
for (i = 0; i < p; i++) {
	preLoadFull[i] = new Image();
		preLoadFull[i].src = "";
}

//fade in first image
change_image(white.src, preLoad[0].src, spread_div_id, spread_img_id);

//load the full spreads
for (i = 0; i < p; i++) {
	var img_id = "img_full" + i;
	var img = document.getElementById(img_id);
		preLoadFull[i].src = img.src;
}

//begin functions

function prev_hover(direction)
{
	if (direction == 'over')
	{
		change_image(prev_img.src, prev_img_hover.src, prev_div_id, prev_img_id);
	}
	else if (direction == 'back')
	{
		change_image(prev_img_hover.src, prev_img.src, prev_div_id, prev_img_id);
	}
}	

function prev_click()
{
	//set previous image
	prevIMGsrc = preLoad[image_no].src;
	
	//change image number
	image_no = (image_no -1 + p) % p;
	
	//change image
	nextIMGsrc = preLoad[image_no].src;
	change_image(prevIMGsrc, nextIMGsrc, spread_div_id, spread_img_id);
	
	//change the background back to white
	document.getElementById(spread_div_id).style.backgroundImage = "url(" + white.src + ")";
}

function next_hover(direction)
{
	if (direction == 'over')
	{
		change_image(next_img.src, next_img_hover.src, next_div_id, next_img_id);
	}
	else if (direction == 'back')
	{
		change_image(next_img_hover.src, next_img.src, next_div_id, next_img_id);
	}
}	


function next_click()
{
	//set previous image
	prevIMGsrc = preLoad[image_no].src;
	
	//change image number
	image_no = (image_no +1) % p;
	
	//change image
	nextIMGsrc = preLoad[image_no].src;
	change_image(prevIMGsrc, nextIMGsrc, spread_div_id, spread_img_id);
	
	//change the background back to white
	document.getElementById(spread_div_id).style.backgroundImage = "url(" + white.src + ")";
}

//function to change images
function change_image(prevIMGsrc, nextIMGsrc, divID, imgID)
{	
	var timer = 0;
	
	var div = document.getElementById(divID);
	var img = document.getElementById(imgID);
	
	//set the current image as background 
	div.style.background = "top url(" + prevIMGsrc + ") no-repeat";
	
	//make image transparent 
	changeOpac(0, imgID);
	
	//make new image
	img.src = nextIMGsrc;
	
	//fade image in
	for(i = 0; i <= 100; i++)
	{ 
		setTimeout("changeOpac(" + i + ",'" + imgID + "')",(timer * speed)); 
		timer++;
	}
	
	//change count label
	image_no_count = image_no + 1;
	document.getElementById(count_id).innerHTML = image_no_count + "/" + p;
	
	//set image expansion link
	document.getElementById(spread_url).href = preLoadFull[image_no].src;
	
	//set alt
	img.alt = preLoadAlts[image_no];
}

//change the opacity for different browsers 
function changeOpac(opacity, imgID) {
	var img = document.getElementById(imgID);
    img.style.opacity = (opacity / 100); 
    img.style.MozOpacity = (opacity / 100); 
    img.style.KhtmlOpacity = (opacity / 100); 
    img.style.filter = "alpha(opacity=" + opacity + ")"; 
}