$(document).ready(function(){
	var margins = {  
		panel1: 0,  
		panel2: -655,  
		panel3: -1310,  
		panel4: -1965,  
		panel5: -2620  
	}   
	
	animateIt($("#spot-nav li a.on"));
	$("#spot-nav li a").click(function(e){
		//stop browser default
		e.preventDefault();
		animateIt($(this));
	}); 
	
	//handle nav click
	function animateIt(a) {
			var a = a;
			var panel = a.attr("href");

			//remove on states for all nav links
			$("#spot-nav a").removeClass("on");
			$("#spot-nav li a").animate({ opacity: 0.60 }, 1 );
			$("#slider .content").slideUp();
							
			//add on state to selected nav link
			a.addClass("on");
			a.animate({ opacity: 1.0 }, 1 );
							
			//set margin of slider to move
			$("#slider").animate({
				marginLeft: margins[panel.split("#")[1]]
			}, function() {
					$(panel).children("div").css("bottom", "0px");
					setTimeout(
					function() {
						$(panel).children("div").slideDown();	
					}, 500);
				}
			);                   
	}
	
	//hide descriptive text
	$("#slider .content").hide();

	//show descriptive text on mouseover (hide on mouseout)
	$("#slider li").hover(
		function() {
			$(this).children("div").slideDown();
		}, function() {
			$(this).children("div").slideUp();
	});
	
	$("#slider .content").animate({ opacity: 0.70 }, 1 );
	$("#spot-nav li a").hover(
		function() {
			$(this).animate({ opacity: 1.0 }, 1 );
		}, function() {
			isOn = $(this).hasClass("on");
			if (!isOn) {
				$(this).animate({ opacity: 0.60 }, 1 );
			}
	});
});