/**
* IMAGE FADER 
*
*/

function imageFader(){
	
	//reference to this "object"
	var thisObj = this;
	
	//hold the current image index
	var currentIndex = 0;
	
	//holds the fader image target element id
	var faderTargetElement = new Array();
	
	//holds the fader link target element id
	var linkElementId;
	
	//fade interval in milliseconds
	var fadeInterval;
	
	//fade speed in float (0.00)
	var fadeSpeed;
	
	//holds the images for the fader (index 1 = fader1 etc.)
	var image = new Array();
	//holds the image links
	var imgLink = new Array();
	//holds true or false if the link should open in a new window
	var linkExternal = new Array();
	//holds the currently active images (the one currently showing and the one to fade in)
	var activeImg = new Array();
	
	//the timeout resource if we want to clear the timeout 
	var timeout;
	
	var currentTargetImage = 0;
	
	
	/**
	* Initiate the image fader
	*
	* @param string targetElement the base name for the image fader target element
	* @param int interval the time interval between fades
	* @param int speed the fade speed (slow=>2 medium=>5 fast=>8)
	*/
	this.init = function (targetElementName, linkId, interval, speed){
		
		//build target element id:s
		faderTargetElement[0] = targetElementName + '1';
		faderTargetElement[1] = targetElementName + '2';
		
		//set the link element id
		linkElementId = linkId;
		
		//calculate the seconds into milliseconds
		fadeInterval = (interval * 1000);
		//calculate the fade speed
		fadeSpeed = parseFloat(speed / 100);
	}
	
	
	/**
	* Add an image to the fader
	*
	* @param string imagePath the image
	* @param string alt the image alternative text
	* @param string linkTarget the image link target
	* @param string linkTarget states if the link is internal or external.
	*/
	this.addImage = function(imagePath, alt, linkTarget, linkImageExternal){
		
		//set the add index
		index = image.length;
		
		//create a new image object and add it to the image array
		image[index] = new Image();
		image[index].src = imagePath;
		image[index].alt = alt;
		
		//add link data
		imgLink[index] = linkTarget;
		linkExternal[index] = linkImageExternal;
	}
	
	
	/**
	* Run the fader effect (start)
	*/
	this.run = function (){
		
		//LETS SET GET THE TWO FIRST IMAGES READY
		
		//get the target image elements
		imageElement1 = document.getElementById(faderTargetElement[0]);
		imageElement2 = document.getElementById(faderTargetElement[1]);
		
		//set opacity and hide the second image
		imageElement1.xOpacity = 1;
		imageElement2.xOpacity = 0;
		imageElement2.style.display = "none";
		
		//set the second image
		imageElement2.src = image[1].src;
		imageElement2.alt = image[1].alt;
		
		//add the image elements to the active array
		activeImg[0] = imageElement1;
		activeImg[1] = imageElement2;
		
		//this.linkImage(0);
		
		//if the broser can handle fading
		if(this.isFadeCompatableBrowser()){
			
			//fade the first image
		  	this.timeout = window.setTimeout( function(){ thisObj.fade(0) }, fadeInterval);
		}
		//if not
		else{
			
			//just switch the image
			this.timeout = window.setTimeout( function() { thisObj.switchImage(0) }, fadeInterval);
		}
	}
	
	
	/**
	* Set new image data to the targetImage
	*
	* @param int index of image to set
	* @param string the id of the target element
	*/
	this.setImage = function (imageIndex, targetImage){
		
		//we want the next index in line, if that index does not exist we start over from the beginning.
		imageIndex = image[imageIndex]?imageIndex:0;
	
		//get the target image to shift image on
		imageElement = document.getElementById(faderTargetElement[targetImage]);
	
		//if we have more than 2 images
		if(image.length > 2){
			//set the opacity to 0
			imageElement.xOpacity = 0;
			
			//set the new image
			imageElement.src = image[imageIndex].src;
			//set alt text
			imageElement.alt = image[imageIndex].alt;
			//add the image element to the active array
			activeImg[imageIndex] = imageElement;
		}
	}
	
	
	/**
	* Fade two images (fade out image 1 and fade in image 2)
	*
	* @param string/int targetImagePostfix  + targetImage string used as target image id so we know which image element is fading out.
	*/
	this.fade = function(targetImagePostfix){
		
		//get opacity for image at current index
		cOpacity = activeImg[currentIndex].xOpacity;
		
		//calculate the next index and get the opacity for that image
		nIndex = activeImg[currentIndex+1]?currentIndex+1:0;
		nOpacity = activeImg[nIndex].xOpacity;
		
		//increase/decrease opacity (fade)
		cOpacity -= fadeSpeed; 
		nOpacity += fadeSpeed;
		
		//set the new opacity to the images
		this.setOpacity(activeImg[currentIndex], cOpacity); 
		this.setOpacity(activeImg[nIndex], nOpacity);
		
		//lets make sure we are displaying the next image (opacity decides when shown)
		activeImg[nIndex].style.display = "block";
		
		//if the opacity for the current image
		if(cOpacity <= 0) {
			
			//set the next index to be the new current index
			currentIndex = nIndex;
			
			//set a new image (next image in image array)
			this.setImage((currentIndex+1), targetImagePostfix);
			
			//find out the target image postfix
			targetImagePostfix = (targetImagePostfix==0)? 1 : 0;
			//call the fade functtion after the fade interval has passed
			this.timeout = window.setTimeout( function(){ thisObj.fade(targetImagePostfix) }, fadeInterval);
			
		} 
		else {
			//call the fade function again (after 50 milliseconds)
			this.timeout = window.setTimeout( function(){ thisObj.fade(targetImagePostfix) }, 5);
		}
	}
	
	
	/**
	* Switch image
	*
	* @param string/int targetImagePostfix  + targetImage string used as target image id so we know which image element is fading out.
	*/
	this.switchImage = function (targetImagePostfix){
		
		//calculate the next index and get the opacity for that image
		nIndex = activeImg[currentIndex+1]?currentIndex+1:0;
		
		//lets make sure we are displaying the next image (opacity decides when shown)
		activeImg[nIndex].style.display = "block";
		
		//set the next index to be the new current index
		currentIndex = nIndex;
		
		//set a new image (next image in image array)
		this.setImage((currentIndex+1), targetImagePostfix);
		
		//find out the target image postfix
		targetImagePostfix = (targetImagePostfix==0)? 1 : 0;
		
		currentTargetImage = targetImagePostfix;
		
		//call the fade functtion after the fade interval has passed
		this.timeout = window.setTimeout( function(){ thisObj.switchImage(targetImagePostfix) }, fadeInterval);
	}
	
	
	/**
	* Check if the used browser can handle fading.
	*/
	this.isFadeCompatableBrowser = function (){
		
		//specify the none fade compatable browser ids
		noneCompatableBrowsers = new Array('MSIE 5.0', 'MSIE 5.5');
		
		//get the current browser version string
		navString = navigator.appVersion;
		
		//loop through the none compatable browsers
		for(i=0; i < noneCompatableBrowsers.length; i++){
		
			//if the current browser match any of the none compatable ones
			if(navString.indexOf( noneCompatableBrowsers[i] ) != -1 ){
				
				return false;
			}
		}
		
		return true;
	}
	
	
	/**
	* Set a new opacity value to the given obejct
	*
	* @param HtmlObject obj the given object.
	* @param int opacity the new opacity value.
	*/
	this.setOpacity = function(obj, opacity) {
			
			//set opacity value
			obj.xOpacity = opacity;
			
			//if opacity is greater than 0.99
			if(obj.xOpacity > 1.00) {
				//set it to .99 exactly
				obj.xOpacity = 1.00;
			}
			
			if(obj.xOpacity < 0){
				//set it to 0 exactly
				obj.xOpacity = 0;
				
				//hide the image
				obj.style.display = "none";
			}
			//set the style opacity for the object
			obj.style.opacity = obj.xOpacity;
			obj.style.MozOpacity = obj.xOpacity;
			obj.KhtmlOpacity = obj.xOpacity;
			obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}

	
}