$(document).ready(function(){
			
			//Web Portfolio
			$("#thruhiketrilogyWEB-button").css({
				opacity: 1.0
			});
			$("#stephenjlattanziWEB-button").css({
				opacity: 0.5
			});
			$("#billhineWEB-button").css({
				opacity: 0.5
			});
			$("#meodysseyWEB-button").css({
				opacity: 0.5
			});

			
			//Branding Portfolio
			$("#ersLogo-button").css({
				opacity: 0.5
			});
			$("#pricefallsLogo-button").css({
				opacity: 0.5
			});
			$("#thruhiketrilogyLogo-button").css({
				opacity: 0.5
			});
			$("#stephenjlattanziLogo-button").css({
				opacity: 0.5
			});
			$("#billhineLogo-button").css({
				opacity: 0.5
			});
			$("#meodysseyLogo-button").css({
				opacity: 0.5							   
			});
			
			//Graphic Design Portfolio
			$("#ccaseyThesis-button").css({
				opacity: 0.5
			});
			
			//Print Portfolio
			$("#ersPrint-button").css({
				opacity: 0.5							 
			});
			$("#alieofthemindPrint-button").css({
				opacity: 0.5							 
			});
			$("#pricefallsPrint-button").css({
				opacity: 0.5
			});
			$("#thruhiketrilogyPrint-button").css({
				opacity: 0.5
			});
			$("#stephenjlattanziPrint-button").css({
				opacity: 0.5
			});
			$("#billhinePrint-button").css({
				opacity: 0.5
			});
			
			//Work In Progress Portfolio
			$("#eliseogdenWEB-button").css({
				opacity: 0.5		  
			});
			$("#pricefallsWEB-button").css({
				opacity: 0.5		  
			});
		
		
		
		
			$("#container li.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)"))
				{
					//we animate it (remember the reference for optimisation ?)
					$clicked.animate({
						opacity: 1,
						borderWidth: 0
					}, 600 );
					
					//we "calculate" the id to shown (each button div MUST have a "xx-button" and the target div must have an id "xx" )
					//yet again the reference
					var idToLoad = $clicked.attr("id").split('-');
					//we search trough the content for the visible div and we fade it out
					$("#right").find(".portfolioContantWrap:visible").fadeOut("fast", function(){
						//once the fade out is completed, we 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.5,
					borderWidth: 0
				}, 600 );
				
			});
		});