$(document).ready(function() {
	slideIn("#home_content");	
	slideDiv("#content-background");
						
	$("#navigation a").click(function(event) {

		// generate variables
		var $this = $(this);
		var id = $this.attr("href");
		var oldDivId = $("div.visible").attr("id");
		
    
	// update navigation
		$("#navigation a.selected").removeClass("selected");
		$this.addClass("selected");
	
	// fade visible image out and add class="hidden"
    	// $("#content-images img").not(".hidden").fadeOut("slow");
		// $("#content-images img").not(".hidden").addClass("hidden");

	// fade new image in and remove class="hidden"
		//	$(id).fadeIn("slow");
		//	$(id).removeClass("hidden");
		
		// OLD CODE THAT WORKS - fade visible image out and new image in
		$("#content-images img").not(".hidden").fadeOut(1000, function () {
       		$("#content-images img").not(".hidden").addClass("hidden");
			$(id).fadeIn(1000);
			$(id).removeClass("hidden");
    	});	
	
	// slide out content background div to the left
		
	// slide out content to the left
		$("#content div.content-text.visible").animate({ left: "-320px" }, 1000, function() {
			$(id + "_content").animate({ left: "0px" }, 1000).addClass("visible");
		}).removeClass("visible");
		
		$("#content-background").animate({ left: "-320px" }, 1000).animate({ left: "0px" }, 1000).addClass("visible")
		// $("div.visible").removeClass("visible");
		//slideOut("#" + oldDivId);
		
	// slide in content to the right
		//	$(id+"_content").animate({ left: "0px" }, 1500 );
		//	$(id+"_content").addClass("visible");
		//slideIn(id + "_content");
		
	// slide in content background div to the right
		//slideDivOutAndIn("#content-background");

		event.preventDefault();
	});
});
		
// Functions
		
/*
		
		// update nav link classes
		function updateClass() {
			$("#navigation a.selected").removeClass("selected");
			$this.addClass("selected");
		}
		
		*/
		
		// slide content out
		function slideOut(divId){	
			$(divId).animate({ left: "-640px" }, 1000 );
			$(divId).removeClass("visible");
		}
				
		// slide content in
		function slideIn(divId){	
			$(divId).animate({ left: "0px" }, 1000 );
			$(divId).addClass("visible");
		}
		
		// initial slide background div 
			function slideDiv(divId){	
			$(divId).animate({ left: "0px" }, 1000 );
		}
		
		// slide background div out and in
			function slideDivOutAndIn(divId){	
			$(divId).animate({ left: "-320px" }, 1000 ).animate({ left: "0px" }, 1000 );
		}