$(document).ready(function(){

 $("#main-text div.button").css("opacity","0.5");
 $("#main-text div.button:first").css("opacity","1");

 $(function () {

 	$("#main-text 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
 		});
 	});

 });
});