// JavaScript Document

var imageArray = new Array();
var nextImageNo = 1;
var shownImage = "main_image_1";
var hiddenImage = "main_image_2";
var fadeOutLevel = 100;
var fadeInLevel = 0;
var timer;
var fader;
var newDimensions = new Array();
var galleryWidth = 575;
var galleryHeight = 300;

//loads the image name passed into the imageArray. this is done to preload all the images we are going to use. PHP can use this
//function to pre load all images before the showImages function is excecuted using onLoad
function loadImage(imageFile) {
	var i = imageArray.length++;
	imageArray[i] = new Image();
	imageArray[i].src = imageFile;
}


function scaleImage(image,maxWidth,maxHeight) {
	var ratio;
	
	var newWidth = maxWidth;
	var newHeight = maxHeight;
	
	var origWidth = image.width;
	var origHeight = image.height;
	
	ratio = origWidth/origHeight;

	
	if(newWidth/newHeight > ratio) {
		newWidth = newHeight * ratio;
	} else {
		newHeight = newWidth/ratio;
	}
	
	newDimensions = [];
	newDimensions.push(newWidth);
	newDimensions.push(newHeight);
	newDimensions.push(newWidth/2);
	newDimensions.push(newHeight/2);
	
	return newDimensions;
}



function startTimer() {
	timer = setInterval("changeImage()",5000);
}


function startCycle() {
	
	scaleImage(imageArray[0],galleryWidth,galleryHeight);
	document.getElementById("main_image_1").src = imageArray[0].src;
	document.getElementById("main_image_1").width = newDimensions[0];
	document.getElementById("main_image_1").height = newDimensions[1];
	document.getElementById("image_placer_1").style.marginLeft = "-" + newDimensions[2] + "px";
	document.getElementById("image_placer_1").style.marginTop = "-" + newDimensions[3] + "px";
	
	
	scaleImage(imageArray[1],galleryWidth,galleryHeight);
	document.getElementById("main_image_2").src = imageArray[1].src;
	document.getElementById("main_image_2").width = newDimensions[0];
	document.getElementById("main_image_2").height = newDimensions[1];
	document.getElementById("image_placer_2").style.marginLeft = "-" + newDimensions[2] + "px";
	document.getElementById("image_placer_2").style.marginTop = "-" + newDimensions[3] + "px";

/*
	for(i=0;i<imageArray.length;i++) {
		scaleImage(imageArray[i],100,100);
		document.getElementById("image_holder_"+i).src = imageArray[i].src;
		document.getElementById("image_holder_"+i).width = newDimensions[0];
		document.getElementById("image_holder_"+i).height = newDimensions[1];
	}
*/
	//moveSlider(250,250);
	startTimer();
}


function changeImage() {
	
	currentImage = 0;
	fader = setInterval("nextImage()",10);
}


//this simply cycles through each image in the imagesArray.
function nextImage() {
	
	if(fadeOutLevel == 0) {
		clearInterval(fader);
	
		if(shownImage == "main_image_1") {
			
			shownImage = "main_image_2";
			shownPlacer = "image_placer_2";
			hiddenImage = "main_image_1";
			hiddenPlacer = "image_placer_1";
		} else {
			shownImage = "main_image_1";
			shownPlacer = "image_placer_1";
			hiddenImage = "main_image_2";
			hiddenPlacer = "image_placer_2";
		}
		
		nextImageNo++;
		if(nextImageNo > (imageArray.length-1)) {
			nextImageNo = 0;
		}
		
		//scaleImage(imageArray[nextImageNo]);
		
		scaleImage(imageArray[nextImageNo],galleryWidth,galleryHeight);
		
		document.getElementById(hiddenImage).src = imageArray[nextImageNo].src;
		document.getElementById(hiddenImage).width = newDimensions[0];
		document.getElementById(hiddenImage).height = newDimensions[1];
		document.getElementById(hiddenPlacer).style.marginLeft = "-" + newDimensions[2] + "px";
		document.getElementById(hiddenPlacer).style.marginTop = "-" + newDimensions[3] + "px";
		fadeInLevel = 0;
		fadeOutLevel = 100;
		
	} else {	
		fadeIn(hiddenImage);
		fadeOut(shownImage);
	}
}



function fadeIn(imageHolder) {
	var image = document.getElementById(imageHolder);
	
	//if the opacity is less than zero then set it to zero and stop the fadout timer
	if(fadeInLevel==100) {
		image.style.opacity = 1;
		image.style.filter = 'alpha(opacity = 100)';
	} else {
		fadeInLevel += 5;
		var opacity = fadeInLevel/100;
		image.style.opacity = opacity;
		image.style.filter = 'alpha(opacity = ' + (opacity*100) + ')';
	}
}



function fadeOut(imageHolder) {
	var image = document.getElementById(imageHolder);
	
	//if the opacity is less than zero then set it to zero and stop the fadout timer
	if(fadeOutLevel==0) {
		image.style.opacity = 0;
		image.style.filter = 'alpha(opacity = 0)';
	} else {
		fadeOutLevel -= 5;
		var opacity = fadeOutLevel/100;
		image.style.opacity = opacity;
		image.style.filter = 'alpha(opacity = ' + (opacity*100) + ')';
	}
}




function jumpTo(index) {
	clearInterval(timer);
	clearInterval(fader);
	
	nextImageNo = index + 1;
	
	if(nextImageNo > (imageArray.length-1)) {
		nextImageNo = 0;
	}

		if(shownImage == "main_image_1") {
			
			shownImage = "main_image_2";
			shownPlacer = "image_placer_2";
			hiddenImage = "main_image_1";
			hiddenPlacer = "image_placer_1";
		} else {
			shownImage = "main_image_1";
			shownPlacer = "image_placer_1";
			hiddenImage = "main_image_2";
			hiddenPlacer = "image_placer_2";
		}

	scaleImage(imageArray[index],galleryWidth,galleryHeight);
	document.getElementById(shownImage).src = imageArray[index].src;
	document.getElementById(shownImage).width = newDimensions[0];
	document.getElementById(shownImage).height = newDimensions[1];
	document.getElementById(shownPlacer).style.marginLeft = "-" + newDimensions[2] + "px";
	document.getElementById(shownPlacer).style.marginTop = "-" + newDimensions[3] + "px";
		
	scaleImage(imageArray[nextImageNo],galleryWidth,galleryHeight);
	document.getElementById(hiddenImage).src = imageArray[nextImageNo].src;
	document.getElementById(hiddenImage).width = newDimensions[0];
	document.getElementById(hiddenImage).height = newDimensions[1];	
	document.getElementById(hiddenPlacer).style.marginLeft = "-" + newDimensions[2] + "px";
	document.getElementById(hiddenPlacer).style.marginTop = "-" + newDimensions[3] + "px";
		
	document.getElementById(shownImage).style.opacity = 1;
	document.getElementById(shownImage).style.filter = 'alpha(opacity = 100)';
	document.getElementById(hiddenImage).style.opacity = 0;
	document.getElementById(hiddenImage).style.filter = 'alpha(opacity = 0)';

	fadeOutLevel = 100;
	fadeInLevel = 0;
	
	startTimer();
}



function pause() {
	clearInterval(timer);
	clearInterval(fader);

	document.getElementById(shownImage).style.opacity = 1;
	document.getElementById(shownImage).style.filter = 'alpha(opacity = 100)';
	document.getElementById(hiddenImage).style.opacity = 0;
	document.getElementById(hiddenImage).style.filter = 'alpha(opacity = 0)';

	fadeOutLevel = 100;
	fadeInLevel = 0;
}