/*Important note images variable should be an array of picture addresses, for example
images = {
	0:"pics/calendar/calendar1.jpg",
	1:"pics/calendar/calendar2.jpg"
}
then call function ImageFader(ImageTime, FadeTime, images)

ImageTime = in miniseconds how long the image will be displayed before fading occurs.
FadeTime = in miniseconds how long the fade will take.
*/

function ImageFader(ImageTime, FadeTime, images)
{
	//refrence pointer to itself to call functions defeined in itself.
	var _self = this;
	
	//initialising variables.
	this.Images = images;
	this.ImageTime = ImageTime;
	this.FadeTime = FadeTime;
	
	//creating variables.
	this.ImageElement;
	this.ImageOpacity;
	this.Timeout;
	this.ImageCount;
	
	this.init = function init(){
		_self.ImageOpacity = {0:100, 1:0};
		_self.ImageCount = 0;
		setTimeout(function(){_self.initRotation()}, 1000); //first image rotation timer.
	};
	
	this.initRotation = function initRotation(){
		_self.ImageElement = { 0:document.getElementById("image1"), 1:document.getElementById("image2")};
		_self.ImageCount += 1; //two images have been loaded in and an offset of one to the counter is required.
		setTimeout(function(){_self.initChangeImages()}, ImageTime); //calls on initial change images in (ImageTime) mini seconds.
	};
	
	this.Rotation = function Rotation(){
		if(_self.Images[++_self.ImageCount] == null){
			_self.ImageCount=0;
		}
		setTimeout(function(){_self.ChangeImages()}, _self.ImageTime);
	}
	
	//first change image swap.
	this.initChangeImages = function initChangeImages(){
		setTimeout(function(){_self.ChangeOpacity(_self.ImageOpacity[0], 0, _self.ImageOpacity[0]==100? -1 : 1)}, _self.FadeTime/100);
		setTimeout(function(){_self.ChangeOpacity(_self.ImageOpacity[1], 1, _self.ImageOpacity[1]==100? -1 : 1)}, _self.FadeTime/100);
		setTimeout(function(){_self.Rotation()}, _self.FadeTime*1.3);
	};
	
	this.ChangeImages = function ChangeImages(){
		
		//swaps the front and back "opacity buffers" to create the fade effect.
		temp = _self.ImageOpacity[0];
		_self.ImageOpacity[0]= _self.ImageOpacity[1];
		_self.ImageOpacity[1] = temp;
		//sets up the correct images in the "image buffers".
		_self.ImageOpacity[0] == 100 ? _self.ImageElement[0].src = _self.ImageElement[0].src : _self.ImageElement[0].src = _self.Images[_self.ImageCount];
		_self.ImageOpacity[1] == 100 ? _self.ImageElement[1].src = _self.ImageElement[1].src : _self.ImageElement[1].src = _self.Images[_self.ImageCount];
		
		//initiates the timers for the fade and the next rotation.
		setTimeout(function(){_self.ChangeOpacity(_self.ImageOpacity[0], 0, _self.ImageOpacity[0]==100? -1 : 1)}, _self.FadeTime/100);
		setTimeout(function(){_self.ChangeOpacity(_self.ImageOpacity[1], 1, _self.ImageOpacity[1]==100? -1 : 1)}, _self.FadeTime/100);
		setTimeout(function(){_self.Rotation()}, _self.FadeTime*1.4);
	};
	
	// Change opacity loops on itself untill the opacity value reaches 0 or 100.
	this.ChangeOpacity = function ChangeOpacity(opacity, element, sign){
		opacity+=sign;
		_self.ImageElement[element].style.opacity = opacity/100;
		_self.ImageElement[element].style.filter = 'alpha(opacity=' + opacity +')';
		//infinate loop timer, refered to by a variable. Variable acts like a flag.
		_self.Timeout = setTimeout(function(){_self.ChangeOpacity(opacity, element, sign)}, _self.FadeTime/100); 
		if(opacity == 0 || opacity == 100){
			clearTimeout(_self.Timeout); //clears timer before it reruns ChangeOpacity, thus exiting the infinate loop.
		}
	};
	
	document.onLoad = this.init(); //initiallises the loop
}