/*
ORIGINAL SCRIPT ON CSS TRICKS
http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
*/

$(function(){
		
			$("#page1-button")
				.css({'color':'#79a100', 'background':'url(assets/ui/work-navarrow.png) no-repeat right 15px'});
			$("#page2-button")
				.css({'color':'#666666'});
			$("#page3-button")
				.css({'color':'#666666'});
			$("#page4-button")
				.css({'color':'#666666'});
			$("#page5-button")
				.css({'color':'#666666'});
			$("#pageNav div.button").click(function(){
				
				$clicked = $(this);
				
				// if the button is not already "transformed" AND is not animated
				if ($clicked.css("color") != "#79a100" && $clicked.is(":not(animated)")) {
					
					$clicked.css({'color':'#79a100', 'background':'url(assets/ui/work-navarrow.png) no-repeat right 15px'});
					
					// each button div MUST have a "xx-button" and the target div must have an id "xx" 
					var idToLoad = $clicked.attr("id").split('-');
					
					//we search trough the content for the visible div and we fade it out
					$("#pageWrapper").find("div:visible").fadeOut("fast", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find("#"+idToLoad[0]).fadeIn("normal");
					})
				}
				
				//we reset the other buttons to default style
				$clicked.siblings(".button").css({'color':'#666666','background':'none'});
				
			});
		});