/*var photoArray = new Array("images/home1.jpg", "images/home2.jpg", "images/home3.jpg", "images/home4.jpg", "images/home5.jpg", "images/bank1.jpg", "images/bank2.jpg");
	var currentPhoto=0;
	function rotateMain(){
		var photoDiv = $('#header-photo');
		var photoImg = $('#headerImg');
		photoDiv.css('backgroundImage','url(' + photoArray[currentPhoto] + ')');
		photoImg.css('display','none');
		if(currentPhoto != photoArray.length-1){
			currentPhoto += 1;
		}else{
			currentPhoto = 0;
		}
		photoImg.attr('src', photoArray[currentPhoto]);
		photoImg.fadeIn(4000);
		setTimeout("rotateMain()",6000);
	}*/
	if(window.location.href.indexOf('index.php') > -1 || window.location.href.indexOf('.php') == -1){
		var randomnumber = 0;
	}else{
		var randomnumber = Math.floor(Math.random()*7);
	}
	
	var imageArray = new Array("headerImg1", "headerImg2", "headerImg3", "headerImg4", "headerImg5", "headerImg6", "headerImg7");      //list of id's of the images to rotate
	var counter = randomnumber;     //this var determines which image is the current image and which will show next
	var zIdx = 1; //z index that increments to continually put the next picture on the top of the last
	var timer;
	function rotateImgs(){    
		//set array number of the next image.  If the counter = imageArray.length then the next image is the first
		nextImage = counter == imageArray.length-1 ? 0 : counter + 1;
		
		var objNext = $('#' + imageArray[nextImage]);   //get next image element
		var objCurrent = $('#' + imageArray[counter]);  //get current image element
		//make next image be on top of the current image
		objNext.css('zIndex',zIdx);
		setTimeout(function(){$('#headerImgTitle').html(objNext.attr('title'))},2500);
		//fade in the next image and when that's done hide the previous image so it can be faded in later. Change the number in this line to change fade time
		objNext.fadeIn(5000,function(){objCurrent.css('display','none');});
		
		counter = counter == imageArray.length-1 ? 0 : counter += 1;  //increment counter by one or reset to 0 if at end of loop
		
		zIdx += 1;    //increment z-index variable so it will continue to put the next image on top of the last
		
		timer = setTimeout("rotateImgs()",5000);  //do the whole thing over again 5 seconds later(3 seconds to fade in and 2 seconds to view)
	}
	//Rotate the images once the page loads.
	$(document).ready(function(){
		$('#headerImg' + (randomnumber+1)).css('display','block');
		$('#headerImgTitle').html($('#headerImg' + (parseInt(randomnumber)+1)).attr('title'));
		setTimeout('rotateImgs()',2000);
		if(window.location.href.indexOf('portfolio.php') > -1){
			var shade = $('#shader');	
			shade.css('opacity',0.8);
			shade.css('height', parseInt(document.body.clientHeight+100) + 'px');
		}
	});
	
	function navHeaderImg(cmd){
		if( cmd == 'rewind'){
			clearTimeout(timer);
			$('#header-photo > .headerImage').css({display:'none',zIndex:1});
			counter = counter == 0 ? imageArray.length-1 : counter -= 1;
			$('#' + imageArray[counter]).css({zIndex: zIdx}).fadeIn(1000);
			$('#headerImgTitle').html($('#' + imageArray[counter]).attr('title'))
			$('#stopButton').css('display','none');
			$('#playButton').css('display','block');
			//zIdx += 1;
		}else if( cmd == 'play'){
			timer = setTimeout("rotateImgs()",5000);
			$('#playButton').css('display','none');
			$('#stopButton').css('display','block');
			$('#headerImgTitle').html('resuming...');
		}else if( cmd == 'stop'){
			clearTimeout(timer);
			$('#stopButton').css('display','none');
			$('#playButton').css('display','block');
			$('#headerImgTitle').html('stopping...');
		}else{
			clearTimeout(timer);
			$('#header-photo > .headerImage').css({display:'none',zIndex:1});
			counter = counter == imageArray.length-1 ? 0 : counter += 1;
			$('#' + imageArray[counter]).css({zIndex: zIdx}).fadeIn(1000);
			$('#headerImgTitle').html($('#' + imageArray[counter]).attr('title'))
			$('#stopButton').css('display','none');
			$('#playButton').css('display','block');
		}
	}
	
	function clearTimer(){
		clearTimeout(timer);
	}