$(function(){
			$("#navMedia-button").css({
				opacity: 0.6
			});		
			$("#navAbout-button").css({
				opacity: 0.6
			});
			$("#navContact-button").css({
				opacity: 0.6
			});		
			$("#navPage-wrap div.button").click(function(){
				$clicked = $(this);
				// if the button is not already "transformed" AND is not animated
				if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
					$clicked.animate({
						opacity: 1,
						borderWidth: 5
					}, 600 );
					// each button div MUST have a "xx-button" and the target div must have an id "xx" 
					var idToLoad = $clicked.attr("id").split('-');
					//search through the content for the visible div and fade it out
					$("#navContent").find("div:visible").fadeOut("fast", function(){
						//once the fade out is completed, start to fade in the right div
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
				//we reset the other buttons to default style
				$clicked.siblings(".button").animate({
					opacity: 0.6,
					borderWidth: 1
				}, 600 );
			});
		});