//Times are in milliseconds
var ImageTime1 = 1500;
var FadeTime1 = 1500;

Images1 = {
	0:"pics/calendar/calendar1.jpg",
	1:"pics/calendar/calendar2.jpg"
}

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

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

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

function initRotation1(){
	ImageElement1 = { 0:document.getElementById("image3"), 1:document.getElementById("image4")};
	ImageOpacity1 = { 0:100, 1:0};
	ImageCount1 += 1; //two images have been loaded in and an offset of one to the counter is required.
	setTimeout(function(){initChangeImages1()}, ImageTime1); //calls on initial change images in (ImageTime) mini seconds.
}

function Rotation1(){
	if(Images1[++ImageCount1] == null){
		ImageCount1=0;
	}
	setTimeout(function(){ChangeImages1()}, ImageTime1);
}

//first change image swap.
function initChangeImages1(){
	setTimeout(function(){ChangeOpacity1(ImageOpacity1[0], 0, ImageOpacity1[0]==100? -1 : 1)}, FadeTime1/100);
	setTimeout(function(){ChangeOpacity1(ImageOpacity1[1], 1, ImageOpacity1[1]==100? -1 : 1)}, FadeTime1/100);
	setTimeout("Rotation1()", FadeTime1*1.3);
}

function ChangeImages1(){
	
	//swaps the front and back "opacity buffers" to create the fade effect.
	temp1 = ImageOpacity1[0];
	ImageOpacity1[0]=ImageOpacity1[1];
	ImageOpacity1[1] = temp1;
	//sets up the correct images in the "image buffers".
	ImageOpacity1[0] == 100 ? ImageElement1[0].src = ImageElement1[0].src : ImageElement1[0].src = Images1[ImageCount1];
	ImageOpacity1[1] == 100 ? ImageElement1[1].src = ImageElement1[1].src : ImageElement1[1].src = Images1[ImageCount1];
	
	//initiates the timers for the fade and the next rotation.
	setTimeout(function(){ChangeOpacity1(ImageOpacity1[0], 0, ImageOpacity1[0]==100? -1 : 1)}, FadeTime1/100);
	setTimeout(function(){ChangeOpacity1(ImageOpacity1[1], 1, ImageOpacity1[1]==100? -1 : 1)}, FadeTime1/100);
	setTimeout("Rotation1()", FadeTime1*1.4);
}

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