$(document).ready(function(){
	
	//Banner Rotation Options
		var random		= false;	//Randomize photo rotation.
		var delay 		= 11000;	//In milliseconds.
		var fadedelay 	= 1500;	 	//In milliseconds.


	//Get Banner Data.
	    $.getJSON("/js/cms_banners/query_banners.php", function(data){
			var images = new Array();
			var descriptions = new Array();
			
			//Assign Images.
				for(var i=0; i<=(data.banners.length - 1); i++){
					var banner = data.banners[i];
					
					images[i] = banner.Media;
				}


			//Assign Image Descriptions.
				for(var j=0; j<=(data.banners.length - 1); j++){
					var banner = data.banners[j];
					
					if(banner.Description.length > 175){
						descriptions[j] = banner.Description.slice(0, 175) + "...";	
					} else {
						descriptions[j] = banner.Description;
					}
				}
				
				
			//Banner Rotation
				var banner_count = images.length -1;
				var k = 0;
				var action = "";
				var rotationTimer = "";
				var transitionStatus = 1;
				
				function banner_rotation(){
					//Rollover photo if photo being requested is larger or lower than
					//the total number of banners.
					if(k > banner_count){
						k = 0;
					} else if(k < 0){
						k = banner_count;
					}
					
					//Transition layer 2 in.
					if(transitionStatus == 0){
						$('#layer2').css({ backgroundImage: 'url(/CMS/Media/' + images[k] + ')' });
						$('#layer2').animate({ opacity: '1' }, fadedelay);
						
						$('#photo_description_02').html(descriptions[k]);
						$('#photo_description_02').animate({ opacity: '1' }, fadedelay);
						$('#photo_description_02').css({ zIndex:'120' }, fadedelay);
						
						$('#photo_description_01').animate({ opacity: '0' }, fadedelay);
						$('#photo_description_01').css({ zIndex:'110' }, fadedelay);
						
						transitionStatus = 1;
					//Transition layer 2 out.
					} else {
						$('#layer1').css({ backgroundImage: 'url(/CMS/Media/' + images[k] + ')' });
						$('#layer2').animate({ opacity: '0' }, fadedelay);
						
						$('#photo_description_01').html(descriptions[k]);
						$('#photo_description_01').animate({ opacity: '1' }, fadedelay);
						$('#photo_description_01').css({ zIndex:'120' }, fadedelay);
						
						$('#photo_description_02').animate({ opacity: '0' }, fadedelay);
						$('#photo_description_02').css({ zIndex:'110' }, fadedelay);	
						
						transitionStatus = 0;
					}
					
					k++;
					rotationTimer = setTimeout(banner_rotation, delay);
				}
				banner_rotation();
				
			//Banner Rotation Controlls
				//Move back one photo/description.
					$("#prev").click(function(){						
						//Clears all existing timers. Prevents multiple instances of
						//timers/delays.
						clearTimeout(rotationTimer);
						
						//Force photo to layer 2. No transition.
						if(transitionStatus == 0){ transitionStatus = 1; } else { transitionStatus = 0;}
						
						//Decrement photo rotation. Because the banner_rotation increments
						//up one photo above the visible photo, we need to compensate by
						//decrementing by 2.
						k = k-2;
						banner_rotation();
						
						//Debug photo increment and action.
						console.debug(k + " : " + "prev");
					});
				
				//Pause the rotation.
					$("#pause").click(function(){						
						//Clears all existing timers. Prevents multiple instances of
						//timers/delays.
						clearTimeout(rotationTimer);
						
						//Debug photo increment and action.
						console.debug(k + " : " + "pause");
					});
				
				//Move forward one photo/description.
					$("#next").click(function(){
						//Clears all existing timers. Prevents multiple instances of
						//timers/delays.
						clearTimeout(rotationTimer);
	
						//Force photo to layer 2. No transition.
						if(transitionStatus == 0){ transitionStatus = 1; } else { transitionStatus = 0;}
	
						//Increment photo rotation. Because the banner rotation increments
						//up one photo above the visible photo, we do not need to perform
						//a increment on the photo count. Just call the banner_rotation function.
						banner_rotation();
						
						//Debug photo increment and action.
						console.debug(k + " : " + "next");
					});

				//Collapse description box
					$("#collapse").click(function(){
						$("#banner_descriptions").stop().slideToggle("slow");
						$("#banner_controls").animate({
							height: "25px"
						});
						//Debug photo increment and action.
						console.debug(k + " : " + "collapse");
					});
	    });
});