$('document').ready(function() {

    // set opacity to nill on page load
    $("#bordeaucontent").css({"width":"0", 'opacity':'.82'});
    $('#bordeau_menu').removeClass('clickme');
    $('#bordeau_menu').addClass('clickmeNot1');

    $("#zalencontent").css({"width":"0", 'opacity':'.82'});
    $('#zalen_zalen').removeClass('clickme');
    $('#zalen_zalen').addClass('clickmeNot2');
    $("#nieuwscontent").css({"width":"0", 'opacity':'.87'});

    // -------------------------------------------------------------------------
    // BORD'EAU
     // on mouse over
    $("#bd").hover(function () {
        // animate opacity to full
        $("#bordeaucontent").stop().animate({
            'width':539
        }, 'slow');
    },
    // on mouse out
    function () {
        // animate opacity to nill
        $("#bordeaucontent").stop().animate({
            'width': 0
        }, 'slow');
        $('.clickme').css('color','white');
    });


    // -------------------------------------------------------------------------
    // ZALEN
    // on mouse over
    $("#zln").hover(function () {
        // animate opacity to full
        $("#zalencontent").stop().animate({
            'width':539
        }, 'slow');
    },
    // on mouse out
    function () {
        // animate opacity to nill
        $("#zalencontent").stop().animate({
            'width': 0
        }, 'slow');
        $('.clickme').css('color','white');
    });


    // -------------------------------------------------------------------------
    // NIEUWS
    // on mouse over
    $("#nws").hover(function () {
        // animate opacity to full
        $("#nieuwscontent").stop().animate({
            'width':539
        }, 'slow');
    },
    // on mouse out
    function () {
        // animate opacity to nill
        $("#nieuwscontent").stop().animate({
            'width': 0
        }, 'slow');
        $('.clickme').css('color','white');
    });
    // -------------------------------------------------------------------------
    // -------------------------------------------------------------------------
    // catch clicks
    $('.clickme').live('click', function() {
        switch($(this).attr('id')) {
            case 'bordeau_menu':

                if($('#bordeau_reservatie_content').css('display') == 'block') $('#bordeau_reservatie_content').hide('slow');
                if($('#bordeau_openingsuren_content').css('display') == 'block') $('#bordeau_openingsuren_content').hide('slow');
                if($('#bordeau_menu_content').css('display') != 'block') $('#bordeau_menu_content').show('slow');

                $(this).addClass('clickmeNot1').removeClass('clickme');
                $(this).css('color','#603320');
                if($('#bordeau_openingsuren').hasClass('clickmeNot1')) {
                    $('#bordeau_openingsuren').removeClass('clickmeNot1').addClass('clickme');
                    $('#bordeau_openingsuren').css('color','#fff');
                }
                if($('#bordeau_reservatie').hasClass('clickmeNot1')) {
                    $('#bordeau_reservatie').removeClass('clickmeNot1').addClass('clickme');
                    $('#bordeau_reservatie').css('color','#fff');
                }
            break;
            case 'bordeau_openingsuren':

                if($('#bordeau_menu_content').css('display') == 'block') $('#bordeau_menu_content').hide('slow');
                if($('#bordeau_reservatie_content').css('display') == 'block') $('#bordeau_reservatie_content').hide('slow');
                if($('#bordeau_openingsuren_content').css('display') != 'block') $('#bordeau_openingsuren_content').show('slow');
                
                $(this).removeClass('clickme').addClass('clickmeNot1');
                $(this).css('color','#603320');
                if($('#bordeau_menu').hasClass('clickmeNot1')) {
                    $('#bordeau_menu').removeClass('clickmeNot1').addClass('clickme');
                    $('#bordeau_menu').css('color','#fff');
                }
                if($('#bordeau_reservatie').hasClass('clickmeNot1')) {
                    $('#bordeau_reservatie').removeClass('clickmeNot1').addClass('clickme');
                    $('#bordeau_reservatie').css('color', '#fff');
                }
            break;
            case 'bordeau_reservatie':

                if($('#bordeau_openingsuren_content').css('display') == 'block') $('#bordeau_openingsuren_content').hide('slow');
                if($('#bordeau_menu_content').css('display') == 'block') $('#bordeau_menu_content').hide('slow');
                if($('#bordeau_reservatie_content').css('display') != 'block') $('#bordeau_reservatie_content').show('slow');

                $(this).removeClass('clickme').addClass('clickmeNot1');
                $(this).css('color','#603320');
                
                if($('#bordeau_openingsuren').hasClass('clickmeNot1')) {
                    $('#bordeau_openingsuren').removeClass('clickmeNot1').addClass('clickme');
                    $('#bordeau_openingsuren').css('color','#fff');
                }
                if($('#bordeau_menu').hasClass('clickmeNot1')) {
                    $('#bordeau_menu').removeClass('clickmeNot1').addClass('clickme');
                    $('#bordeau_menu').css('color','#fff');
                }
            break;
            case 'zalen_info':
/*                $(this).removeClass('clickme').addClass('clickmeNot2');
                $(this).css('color','#ebad1d');
                $('#zalen_zalen').removeClass('clickmeNot2').addClass('clickme');
                $('#zalen_zalen').css('color','#fff');
*/
            break;
        }

        return false;
    });

});