/**********************************************************
javascript functionality to allow a sequence of images to
fade in and out.

Presently this code relies on the images having their html
id tags explicitly named and those names should then be
used in the setInitialOpacity() function and in the array
declaration in the rotateImages() function.

created: 03/06/09
**********************************************************/

/*---------------------------------------------------------
initImages()
- sets the duration for the first image to be displayed
- calls to set the initial opacity of all images
- calls the rotate images functionality
----------------------------------------------------------*/
function initImages(){

				 var initialWait = 4000;	

				 setInitialOpacity()
				 setTimeout("rotateImages()",initialWait);		 

}

/*---------------------------------------------------------
setInitialOpacity()
- set the initial opacity of each of the images
----------------------------------------------------------*/
function setInitialOpacity(){
				 
				 setOpacity("rho_image1",100);
				 setOpacity("rho_image2",0);
		 				 				 				 
}

/*---------------------------------------------------------
rotateImages()
- include each of the image ids to be displayed in array declaration
- set the holdImgWait value as the duration each image should be displayed for
	before moving to the next image
- set the fadeDuration as the length of time the fade process takes
- functionality will loop round the image array to identify the current display
  and then set the next image to be faded in
- the function then calls itself recursively
----------------------------------------------------------*/
function rotateImages()
{ 				 
 
   var arrImg = new Array("rho_image1","rho_image2");	 
	 var noOfImgs;
	 var imgCount;
	 var nextImgPos;
	 var img;
	 var holdImgWait = 4000;
	 var fadeDuration = 3000;	
	 	 	 
	 noOfImgs = arrImg.length;
 
 	 //loop through the array of image id names
 	 for (imgCount=0;imgCount<=noOfImgs;imgCount=imgCount+1){ 			 
		 	 	 
		 //identify which image is presently fully opaque i.e. fully displayed		 
  	 if (IsFullyOpaque(arrImg[imgCount])){
		 
		 		//check here whether the image is last in the array sequence
				//and if not, then increment the image to be displayed by 1
				//if it is the last image, then start at the first image again
		 		if (imgCount!=noOfImgs-1){			
					 nextImgPos=imgCount + 1;
				}
   	 		else{
		 			 nextImgPos=0;
		 		}	 		 

				//call function to fade current image out and next image in
				fade(arrImg[nextImgPos],0,100,fadeDuration);
				fade(arrImg[imgCount],100,0,fadeDuration);
				
				break;				
  	 }	 
	 }	  	

	 //wait for the holdImgWait time, then call this function recursively
	 setTimeout("rotateImages()",holdImgWait); 

}

/*---------------------------------------------------------
fade(eID, startOpacity, stopOpacity, duration)
- takes the image id tag, start opacity, end opacity and duration of fade as arguments
- the 'fade in' or 'fade out' functionality is executed depending on the direction of the opacity change 
- function will call itself recusively, in steps, to ensure the fade occurs over the specified duration time
----------------------------------------------------------*/
function fade(eID, startOpacity, stopOpacity, duration) {

    var speed = Math.round(duration / 100);
    var timer = 0;
		
    if (startOpacity < stopOpacity){ // fade in
        for (var i=startOpacity; i<=stopOpacity; i++) {
            setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
            timer++;
        } return;
    }
    for (var i=startOpacity; i>=stopOpacity; i--) { // fade out
								
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
        timer++;
    }		
}

/*---------------------------------------------------------
setOpacity()
- cross browser functionality to set a specified image to a
  specified opacity level
- need to check ie 8
----------------------------------------------------------*/
function setOpacity(eID, opacityLevel) {

    var eStyle = document.getElementById(eID).style;
    eStyle.opacity = opacityLevel / 100;
    eStyle.filter = 'alpha(opacity='+opacityLevel+')';

}

/*---------------------------------------------------------
IsFullyOpaque()
- boolean check to find the currently displayed image
  i.e. where opacity equals 1
----------------------------------------------------------*/
function IsFullyOpaque(eID) {

		var eStyle;	

    eStyle = document.getElementById(eID).style;

		if(eStyle.opacity==1){
				return true;
		}
		else{
				return false;
		}
}