//Times are in milliseconds
var ImageTime = 1000;
var FadeTime = 1000;

Images = {
	0:"pics/about/about_1.jpg",
	1:"pics/about/about_2.jpg",
	2:"pics/about/about_3.jpg"
}

var ImageElement; 	//stores the images paths being used.
var ImageOpacity; 	//stores the image opasity being applied to the ImageElement corresponding images.
var Timeout;		//used to timeout a fade when required, stopping the infinate fade loop.
var ImageCount = 0; //counter used to keep track of the last image displayed.

document.onLoad = init(); //initiallises the loop

function init(){
	setTimeout("initRotation()", 100); //first image rotation timer.
}

function initRotation(){
	ImageElement = { 0:document.getElementById("image1"), 1:document.getElementById("image2")};
	ImageOpacity = { 0:100, 1:0};
	ImageCount += 1; //two images have been loaded in and an offset of one to the counter is required.
	setTimeout(function(){initChangeImages()}, ImageTime); //calls on initial change images in (ImageTime) mini seconds.
}

function Rotation(){
	if(Images[++ImageCount] == null){
		ImageCount=0;
	}
	setTimeout(function(){ChangeImages()}, ImageTime);
}

//first change image swap.
function initChangeImages(){
	setTimeout(function(){ChangeOpacity(ImageOpacity[0], 0, ImageOpacity[0]==100? -1 : 1)}, FadeTime/100);
	setTimeout(function(){ChangeOpacity(ImageOpacity[1], 1, ImageOpacity[1]==100? -1 : 1)}, FadeTime/100);
	setTimeout("Rotation()", FadeTime*1.3);
}

function ChangeImages(){
	
	//swaps the front and back "opacity buffers" to create the fade effect.
	temp = ImageOpacity[0];
	ImageOpacity[0]=ImageOpacity[1];
	ImageOpacity[1] = temp;
	//sets up the correct images in the "image buffers".
	ImageOpacity[0] == 100 ? ImageElement[0].src = ImageElement[0].src : ImageElement[0].src = Images[ImageCount];
	ImageOpacity[1] == 100 ? ImageElement[1].src = ImageElement[1].src : ImageElement[1].src = Images[ImageCount];
	
	//initiates the timers for the fade and the next rotation.
	setTimeout(function(){ChangeOpacity(ImageOpacity[0], 0, ImageOpacity[0]==100? -1 : 1)}, FadeTime/100);
	setTimeout(function(){ChangeOpacity(ImageOpacity[1], 1, ImageOpacity[1]==100? -1 : 1)}, FadeTime/100);
	setTimeout("Rotation()", FadeTime*1.4);
}

// Change opacity loops on itself untill the opacity value reaches 0 or 100.
function ChangeOpacity(opacity, element, sign){
	opacity+=sign;
	ImageElement[element].style.opacity = opacity/100;
	ImageElement[element].style.filter = 'alpha(opacity=' + opacity +')';
	//infinate loop timer, refered to by a variable. Variable acts like a flag.
	Timeout = setTimeout(function(){ChangeOpacity(opacity, element, sign)}, FadeTime/100); 
	if(opacity == 0 || opacity == 100){
		clearTimeout(Timeout); //clears timer before it reruns ChangeOpacity, thus exiting the infinate loop.
	}
}