// JavaScript Document for image rotator
var theImageUp = 0; //the number of the array element that is to be shown 0 = 1st image/caption in the array
var canClick = true; //a boolean for allowing the ability to click on a button
var alphaAmount = .05 //increasing this amount will increase the speed at which the images fade in and out;
var fadeTime = 25 //increasing this will decrease the speed at which the images fade in and out, if too high, it will look like the image is skippin alpha levels;
var numImages = theImages.length;  //determines the number of images based on the length of the image URL array
var part = 'none';
var fadingIntervalSecond;
var fadingIntervalSecond2;
var opacityCounter = 1;
document.getElementById("imageDisplayed").src = theImages[theImageUp];
document.getElementById('theCaption').innerHTML = theCaptions[theImageUp];
document.getElementById('imageNumber').innerHTML = String(theImageUp + 1) + " / " + String(numImages);
document.getElementById('imageDisplayed').style.opacity = 1;	
document.getElementById('theCaption').style.opacity = 1;	


/*if the user can click a button, it calculates which image to bring up based on whether the clicked back or next
then it starts the fadeOut sequence/function, clicking is also disabled while the coded animation runs*/
function updateImage(theChange){
	if(canClick == true){
		if(opacityCounter >= .6){
			theImageUp += theChange;
			if(theImageUp >= numImages){
				theImageUp = 0;
			}else if(theImageUp <= -1){
				theImageUp = numImages -1;
			}
			fadeOut();
		}
	}
}

//changes the src of the displayed image and the text in the caption and image numbering system
function changeImage(){	
	document.getElementById("imageDisplayed").src = theImages[theImageUp];
	document.getElementById('theCaption').innerHTML = theCaptions[theImageUp];
	document.getElementById('imageNumber').innerHTML = String(theImageUp + 1) + " / " + String(numImages);
	clearTimeout(fadingIntervalSecond);
	fadeBack();
}

//subtracts the alphaAmount from the caption and the image and sets a timeout to loop, once the alpha is 0, the timer is clearead and 2 other functions run
function fadeOut(){
	canClick = false;
	opacityCounter -= alphaAmount;
	document.getElementById('imageDisplayed').style.opacity = opacityCounter;	
	document.getElementById('theCaption').style.opacity = opacityCounter;
	if(opacityCounter <= 0){
		opacityCounter = 0;
		opacityCounter = 0;
		changeImage();
	}else{
		fadingIntervalSecond = setTimeout("fadeOut()",fadeTime);
	}
}
function fadeBack(){
	fadingIntervalSecond2 = setTimeout("fadeBack()",fadeTime);
	opacityCounter += alphaAmount;
	document.getElementById('imageDisplayed').style.opacity = opacityCounter;	
	document.getElementById('theCaption').style.opacity = opacityCounter;	
	if(opacityCounter >= 1){
		clearTimeout(fadingIntervalSecond2);
		canClick = true;
	}
}