$(document).ready(function(){
  
  $("#blog div.button").css("opacity","0.5");
  $("#blog div.button:first").css("opacity","1");
  
  $(function () {
    
  	$("#blog div.button").click(function(event){
	  
  	  event.preventDefault();
		
  		var 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
  			});
  			//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
  			$("#posts").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();
  				$(this).parent().find("div.blurb").fadeIn();
  			});
  		}
  		//we reset the other buttons to default style
  		$(this).siblings().animate({
  			opacity: 0.5
  		});
  	});

  });
});