/**
 * Custom Home Page Image Fading based on Selected Nav Item
 * required jquery.animate.color.min.js
 * http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
 */
$(document).ready(function(){

	//index of the selected image
	var firstLoad = true;
	var imageFadeMsec = 200;
	var navFadeMsec = 200;
	var selectedIndex = 3;
	
	var imagesArr = $('#homeConcertImages > img');
	var navArr = $('#homeConcertLinks > a');
	
	//init the current selected image
	handleMouseOver(selectedIndex, navArr[selectedIndex]);
	
	//add click event to all nav a items
	navArr.each(function(index, el) {
		$(el).mouseover(function() {
			handleMouseOver(index, this);
		});
	});
	
	function handleMouseOver(navIndex, navEl) {

		if (navIndex != selectedIndex || firstLoad) {
			
			firstLoad = false;

			//do image fades
			var currVisibleImageEl = $(imagesArr[selectedIndex]);
			var newlySelectedImageEl = $(imagesArr[navIndex]);
			currVisibleImageEl.fadeOut(imageFadeMsec);
			newlySelectedImageEl.fadeIn(imageFadeMsec);

			//do menu animation
			var currSelectedNavEl = $(navArr[selectedIndex]);
			var newlySelectedNavEl = $(navEl);

			currSelectedNavEl.animate({ 
				backgroundColor: "#ffffff",
				fontSize: '16px',
				color: '#333333'
			}, navFadeMsec); //reset old
			newlySelectedNavEl.animate({ 
				backgroundColor: "#de2414",
				fontSize: '20px',
				color: '#ffffff'
			}, navFadeMsec); //style new

			selectedIndex = navIndex; //update the selectedIndex
		}
	}

});