$(function(){
    $("#button-1").addClass("active");
    $("#button-1").css({
        borderWidth: 0
    });
	$("#button-2").css({
		opacity: 0.3
	});
	$("#button-3").css({
		opacity: 0.3
	});
	$("#button-4").css({
		opacity: 0.3
	});
	$("#button-5").css({
		opacity: 0.3
	});
	$("#button-6").css({
		opacity: 0.3
	});
	$("#button-7").css({
		opacity: 0.3
	});
	$("#button-8").css({
		opacity: 0.3
	});
	$("#button-9").css({
		opacity: 0.3
	});
	
	// This will hold our timer
    var myTimer = {};

    $("#page-wrap div.button").mouseenter(function(){
    	$clicked = $(this);
    	$.clearTimer(myTimer);
    	
    	// 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: 0
    		}, 50 );
    		$("div").removeClass("active");
    		$clicked.addClass("active");
    		
    		// each button div MUST have a "xx-button" and the target div must have an id "xx" 
    		var idToLoad = $clicked.attr("id").split('-');
    		myTimer = $.timer(400,function(){
        		//we search trough the content for the visible div and we fade it out
        		$(".sub-content").find("div:visible").fadeOut("fast", function(){
        			//once the fade out is completed, we start to fade in the right div
        			$(this).parent().find("#chapel-"+idToLoad[1]).fadeIn();
        		});
		    });
    	}
    	
    	//we reset the other buttons to default style
    	$clicked.siblings(".button").animate({
    		opacity: 0.5,
    		borderWidth: 0
    	}, 50 );
    	
    });
});