/**********************************************
*	Scott Ladyman 2009
*
***********************************************/
function banner(params)
{
	//	the key of the currently displayed image
	this.key    = 0;
	//	target id
	this.image  = false;
	//	path to the images
	this.path   = "";
	//	store the found images.
	this.images = [];
	//	store the href link locations for each image, if one exists
	this.links  = [];
	
	//	speed of the fade in milliseconds
	this.speed	 = 1000;
	this.timeout = false;	
	//	delay between images in milliseconds
	this.delay  = 1000;


	this.paused = false;

	//	base methods - get DOM object
	var get = function(o)
	{
		o = ( typeof(o) == "string" ? document.getElementById(o) : o);
		if( typeof(o) != "object" ){
			alert("Could not find the target element object");
		}
		return o;
	};

	//	initalise the object
	this.init = function(params)
	{
		for(var key in params){
			switch(key){
				case "image" :
					//	set target element
					this.target(params[key]);
				break;
				case "path" :
					//	set the directory path for the images
					this.directory(params[key]);
				break;
				
				case "links" :
					//	set the parent element, the link as a clickable element to another location.
					this.hrefs(params[key]);
				break;
				
				default:
					if( key != "images"){
						this[key] = params[key];
					}
				break;	
			}
		};
		//	preload images
		//	ensure that the path was set as it could be requested after the images are passed
		//	and will cause a problem,
		if( params["images"] ){
			this.preload(params["images"]);
		}
	};


	//	preload the passed images
	//	var images MUST be an array. ["xxx.jpg", "asdd.gif", "...]
	this.preload = function(images, path)
	{
		if( typeof(path) == "string" ){
			this.directory(path);	
		}
		
		for(var i = 0; i < images.length; i++){
			//	preload the images		
			var img = new Image();
			img.src = this.path + images[i];
			//	add to stored image array
			this.images.push(img);
		}
	};	


	//	set the element to be used for the rolling image transition.
	this.target = function(t)
	{
		return this.image = (t ? get(t) : this.image);
	};
	
	
	//	set the location of the images, if needed
	this.directory = function(d)
	{
		return this.path = (d ? d : this.path);
	};
	
	
	//	must be an array
	this.hrefs = function(h)
	{
		return this.links = (h ? h : this.links);
	};
	
	
	this.play = function()
	{
		if( !this.paused ){
			var hov  = this.image;
			var p    = this.image.parentNode;
			var self = this;
			//	increment to next image...otherwise the currently on display will be faded twice.
			//	make sure that it loops and starts again if it reaches the end.
			this.key++;	
			if( this.key >= this.images.length ){
				this.key = 0;
			}
			
			//	check to see if a link exists for this image
			if(p.nodeName == "A" && this.links[this.key]){
				p.href = this.links[this.key];	
				hov = p;
			}
			//	set the image properties
			this.image.style.zIndex = 0;
			
			//	setup a hover event to pause the fading.
			/*
			hov.onmouseover = function(){
				self.paused = true;	
 			} 
 			//	continue the loading of the images
			hov.onmouseout = function(){
				self.paused = false;
//				self.key = (!self.key ? 0 : self.key-- );	
//				self.play();
			}
			*/			
						
			//	start the fade out.
			this.timeout = setTimeout(
				function(){
					//	check to ensure that the slideshow hasn't been paused	
					if( !self.paused ){
						//	clone the existing image
						var img = self.image.cloneNode(true);
						img.id  = self.image.id +"_"+ self.key;
						img.src = self.images[self.key].src;
						//	setup the location of the new image to be displayed
						img.style.position = "absolute";
						img.style.zIndex   =  img.style.zIndex + 1;
						//	hide so as to fade in.
						setopacity(img, 0);
						//	add it to the node structure
						p.insertBefore(img, p.firstChild);
						//	fade in next image
						self.timeout = setTimeout(
							function(){
 								//	start fading out the old image
								self.fade(img, 0, 101);
								//	fade into new image
								self.fade(self.image);
								//	swap over the target element 
								self.timeout = setTimeout(
									function(){
										self.image = img;
										//	loop and then continue to next image
										
										clearTimeout(self.timeout);
										self.play();
									}, self.speed
								);
 							}, self.speed
						);
					}
				}, self.delay
			);		
		}
	};
	
	
	this.fade = function(o, start, end)
	{
		//	inialise the parameters
		start = (start ? start : opacity(o));
		end   = (end   ? end : 0);	
		//
		var timer = 0;
		var speed = Math.round(this.speed/100);
		//	fade out
 		if( start > end ){
	    	for(var i = start; i >= end; i--){
	    		var t = setTimeout(
	    			function(){ 
		    			if( start <= 1 ){
		    				setopacity(o, 0);
		    				clearTimeout(t);
		    			}else{
		    				setopacity(o, start--);	
		    			}
	    			}, (timer*speed));
	        	timer++;
	        	
	        }
	    //	fade in...
	    }else if(start < end){
	    	for(var i = start; i <= end; i++){
	    		var t = setTimeout(
	    			function(){
		    			if( start >= 99 ){
		    				setopacity(o, 101);
		    				clearTimeout(t);
		    			}else{
		    				setopacity(o, start++);	
		    			}
	    			}, (timer*speed));
	            timer++;

	        }
        }
  	};	
	
	//	set the opacity
	var setopacity = function(obj, value)
	{
		obj.style.opacity 	   = (value/101).toFixed(2);  
		obj.style.MozOpacity   = (value/101).toFixed(2);
		obj.style.KhtmlOpacity = (value/100).toFixed(2);
		//	IE
		obj.style.filter 	   = "alpha(opacity=" + value + ")"; 
	};
	
	
	//	get the opacity
	var opacity = function(obj)
	{
		//	ensure that a number is returned
		var o = parseFloat(obj.style.opacity);
		if( isNaN(o) ){
			setopacity(obj, 101);	
			return 101;
		} 
		return o*100; 
	};
 	
 	//	initalise the parameters for the object once the object has been requested
	if( typeof(params) == "object" ){
		this.init(params);
	};	
};
//<img src="data:image/jpeg;base64,<?=base64encode("path/image.jpg");?>" />