$(function(){
    $("#two-button").css({opacity: 0.99});
    $("#three-button").css({opacity: 0.99});
    $("#four-button").css({opacity: 0.99});
    $("#five-button").css({opacity: 0.99});
    $("#six-button").css({opacity: 0.99});
    $("#seven-button").css({opacity: 0.99});
    $("#eight-button").css({opacity: 0.99});
    $("#nine-button").css({opacity: 0.99});
    $("#ten-button").css({opacity: 0.99});
    $("#eleven-button").css({opacity: 0.99});
    $("#twelve-button").css({opacity: 0.99});
    $("#thirteen-button").css({opacity: 0.99});
    $("#fourteen-button").css({opacity: 0.99});
    $("#fifteen-button").css({opacity: 0.99});
    
    $("#content 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: 3
            }, 50 );
            // 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
            $("#section").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();
            })
        }
        //we reset the other buttons to default style
        $clicked.siblings(".button").animate({
            opacity: 0.99,
            borderWidth: 1
        }, 50 );
    });
});