$j(function() {

    $j(".group").css({
        opacity: 0.3
    });

    $j(".spillhjul .group").click(function() {

        $clicked = $j(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('-');

            //we search trough the content for the visible div and we fade it out
            $j("#contentSpill").find("div:visible").fadeOut("fast", function() {
                //once the fade out is completed, we start to fade in the right div
                $j(this).parent().find("#" + idToLoad[0]).fadeIn();
            })
        }

        //we reset the other buttons to default style
        $clicked.siblings(".group").animate({
            opacity: 0.4,
            borderWidth: 1
        }, 600);

    });
});