// JavaScript Document

/*!

  Rotating Div Content
  
   Uasage: onLoad="panelLooper();
   Navigation: <li onClick="loadRotatingPanel(0)" onMouseOver="imageOver('navImage1')" onMouseOut="imageOut('navImage1')">

 
   Author: Ryan C Kipe

   This script relesed under the GNU General Public Release: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This script is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    GNU General Public License <http://www.gnu.org/licenses/>

*/


/*
Create arrays setting the panel id as the values for rDivs
and the image id as the values for rNavs
*/
	var rDivs = new Array(); // 
		rDivs[0]="panelOne";   
		rDivs[1]="panelTwo";
		rDivs[2]="panelThree";
		rDivs[3]="panelFour";
		rDivs[4]="panelFive";
		rDivs[5]="panelSix";
		
	  var rNavs = new Array(); // 
		rNavs[0]="navImage1";   
		rNavs[1]="navImage2";
		rNavs[2]="navImage3";
		rNavs[3]="navImage4";
		rNavs[4]="navImage5";
		rNavs[5]="navImage6";
		
/*
  Set gobal variables so looptimer's clearTimeout and index can be modified by other functions 	
*/
	var loopTimer;
	var i = 0;
	
	var fadeTimer;
	var ai = 0;
	var aii = 40;
	
/*
panelLooper() loops thru rDivs using the panel id to select which content should be loaded into currentDisplay
then the div with the id 'rotatingContent' has it contents replaced using innerHTML.
when the panelLooper reaches the end of the rDivs array the else statement reset the index to the first 
value and starts the if statement of another cycle thru the rDivs array. This creates the endless loop.
*/
	
function panelLooper() {
	
	if ( i <= 5) 
	{
		panelFadeOut(i);
		i++;
	}
	else
	{
		i = 0;
		panelFadeOut(i);
		i++;	
	}
	
	loopTimer = setTimeout('panelLooper()',9900); /*5000 set the time between rotation*/
}	

function loadSelectedPanel(selectedPanel){
	
	clearTimeout(loopTimer);
	clearTimeout(fadeTimer);
	panelFadeOut(selectedPanel);
	
}
	
function panelFadeOut(selectedPanel){

	var element = document.getElementById('rotatingContent');
	var currentDisplay = document.getElementById(rDivs[selectedPanel]).innerHTML;
	
	if(aii >= 0)
	{
	OpVal = aii*.025
	element.style.opacity = OpVal;
  	element.style.filter = 'alpha(opacity = ' + (OpVal*100) + ')';
	--aii;
	fadeTimer = setTimeout('panelFadeOut(' + selectedPanel + ')',40);
	}	
	else{
	/* stop fade effect */
	clearTimeout(fadeTimer);
	navIndicator(selectedPanel);
	/* load selected panel */
	document.getElementById('rotatingContent').innerHTML = currentDisplay;
	fadeIn()
	aii = 40;	
	}
	
	
}	
function fadeIn(){

	var element = document.getElementById('rotatingContent');
	
	
	if(ai <= 80)
	{
	OpVal = ai*.0125
	element.style.opacity = OpVal;
  	element.style.filter = 'alpha(opacity = ' + (OpVal*100) + ')';
	ai++;
	fadeTimer = setTimeout('fadeIn()',40);
	}	
	else{
	clearTimeout(fadeTimer);
	ai = 0
	}
	
	
}
				
function imageOver(a){	
	
	if (document.getElementById(a).src.slice(-18,-5) != 'ButtonSelected'){
 		document.getElementById(a).src = 'images/pButtonOver.png';	
 	}
}
		
function imageOut(b){

	if(document.getElementById(b).src.slice(-18,-5) != 'ButtonSelected'){

		document.getElementById(b).src = 'images/pButtonBase.png';
	}
}



function navIndicator(selectedPanel){

	var i=0;
		for (i=0;i<=5;i++)
		{
			if (i==selectedPanel)
			{
			document.getElementById(rNavs[i]).src = 'images/pButtonSelected.png';
			}
			else{
			document.getElementById(rNavs[i]).src = 'images/pButtonBase.png';
			}
		}		
}