//**********************************************************************************
//		Name:		banner.js
//		Purpose:		Used as a image swapping banner, using javascript and not flash.
//					Uses jquery library to perform animations etc. 
//		Author:		Stefan Sedich
//		Version:		0.3
//		Known Issues:	None at the moment.
//
//		Use:		var images = Array("images/template/mainimage2.jpg", "images/template/mainimage.jpg");
//					a = new Banner("bannerCon", images, 4000);	
//
//***********************************************************************************

/**
* Constructor, sets up the banner area, and then trigers the init method.
* Which finished off the initialisation of the banner.
*/
function Banner(inContainer, inImages, inInterval) {

	//Set member variables
	this.images = inImages;
	this.numImages = inImages.length;
	this.container = "#"+inContainer;
	this.upto = -1;
	this.interval = (inInterval != null) ? inInterval : 1000;
	this.imagesLoaded = 0;
	
	//Preload the images	
	$.preloadImages(this.images);
	
	//Pointer to this
	var _this = this;
	
	//Start the banner init when document is ready.
	$(document).ready(function() { _this.Init(); });

}

/**
* The main init function, used to initialize the drawing area
*/
Banner.prototype.Init = function() {
	
	var _this = this;
	
	//Clear the container, used 
	$(this.container).empty();
	
	//For each image, append it to the showcase area as an img, and a unique id.
	for(i=0;i<this.numImages;i=(i+1)) {
	
		//Add each image.
		/**
		* !! CHANGE THIS TO SETUP THE STYLE OF THE ADDED IMAGE !!
		*/
		$(this.container).append("<img style='position: absolute; left: 0px; display: none;' src='"+this.images[i]+"' id='bannerImage"+i+"' />");		 
		
		//Attach an onload to each image.
		$("#bannerImage"+i).bind("load", function(){ 
		   _this.ImageLoaded();
		});
					
	}

	//Show the first image.
	document.getElementById("bannerImage0").style.display = "block";		
	
}

/**
* Method used to see if all images are loaded. When they are it starts the animation.
*/
Banner.prototype.ImageLoaded = function() {
	
	//Increase the count of images loaded.
	this.imagesLoaded = (this.imagesLoaded + 1);
	
	if(this.imagesLoaded == this.numImages) {
	
		//If all images are loaded.
		//Setup for first image and start the animation.
		
		this.upto = 0;					
		var _this = this;
	
		setTimeout(function () { _this.SwapImage(); }, _this.interval); 
		
	}
}

/**
* Method called on timer to perform the image swap.
*/
Banner.prototype.SwapImage = function() {
	
	//Get the current image.
	var current = "#bannerImage"+this.upto;
	
	//Fade it out.
	$(current).fadeOut(1000);
	
	//Increment the image we are upto.
	this.upto = (this.upto + 1);
		
	if((this.upto + 1) > this.numImages) {
		
		//If we have passed all images, set the current image back to the first.
		this.upto = 0;
		var next = "#bannerImage"+this.upto;
		
		//Fade in the first image.
		$(next).fadeIn(1000);
		
	} else {
	
		//Otherwise fade in the next image.
		var next = "#bannerImage"+this.upto;
		$(next).fadeIn(1000);
		
	}
	
	//Setup the interval to call this method again.
	var _this = this;
	setTimeout(function () { _this.SwapImage(); }, this.interval); 
	
}