var initList = initList || [];
initList.push(function() {
    //Hide everything, only the name of exercises is showed.
    $('.arrow').hide();
    $('.menu').hide();
    $('.problem').hide();
    $('.development').hide();
    $('.answer').hide();
    $('.status').hide();
    $('.board').hide();
    $('.problem').addClass('active-btn');
    $('.stage2').hide();
    $('.stage3').hide();

    sg.showExercise = function (exercise) {
        var $this = $(exercise);
        var $before = $('.exercise.active');

        //Hide the before active exercise.
        $before.children().hide();
        $before.find('.menu').children().hide();
        $before.find('.name').removeClass('active-btn').show();
        $before.removeClass('active').addClass('collapse');

        //Show the new active exercise.
        $this.removeClass('collapse').addClass('active');
        $this.children().show();
        $this.find('.name').addClass('active-btn');
        $this.find('.menu').children().show('slide',500);

        //Show problem

    }
    sg.showStage = function (exercise, stage){
        var $exercise = $(exercise);
        switch(stage){
            case '1':
                $exercise.find('.board').children().hide();
                $exercise.find('.board .stage1').show('clip',300);
                $exercise.find('.menu').find('.active-btn').removeClass('active-btn');
                $exercise.find('.menu').find('.problem').addClass('active-btn');
                $exercise.find('.menu').find('.status').animate({left:'127px'},1000);
                break;
            case '2':
                $exercise.find('.board').children().hide();
                $exercise.find('.board .stage2').show('clip',300);
                $exercise.find('.menu').find('.active-btn').removeClass('active-btn');
                $exercise.find('.menu').find('.development').addClass('active-btn');
                $exercise.find('.menu').find('.status').animate({left:'397px'},1000);
                var $answer = $exercise.find('.menu').find('.answer');
                if($answer.hasClass('disable')){
                    $exercise.find('.menu').find('.answer').addClass('btn-hover').removeClass('disable'); 
                    $exercise.find('.menu').find('.answer').click(
                        function(){
                            sg.showStage(exercise,'3')
                        });
                }
                break;
            case '3':
                $exercise.find('.board').children().hide();
                $exercise.find('.board .stage3').show('clip',300);
                $exercise.find('.menu').find('.active-btn').removeClass('active-btn');
                $exercise.find('.menu').find('.answer').addClass('active-btn');
                $exercise.find('.menu').find('.status').animate({left:'667px'},1000);
                break;
        }
    }
});