$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function()
    {       
        var k = 0;
        var inp = $("#firstpane p.menu_head"); 
        index = inp.index(this);   
        menu_item = inp[index]; 
        if ($ (this).next ().hasClass ('menu_body')) {
            var onext = $ (this).next ();
            
            k = 1;
            $("#firstpane p.menu_head").css('height','28px');
            $(this).css({color:"#0093d0"});
            if(index == 0)  
            {
                menu_item.style.backgroundImage = 'url(/images/button_home_active.jpg)';
            }
            if(index == 1)  
            {
                menu_item.style.backgroundImage = 'url(/images/button_activiteiten_active.jpg)';
            }
            if(index == 2)  
            {
                menu_item.style.backgroundImage = 'url(/images/button_faciliteiten_active.jpg)';
            }
            if(index == 3)  
            {
                menu_item.style.backgroundImage = 'url(/images/button_informatie_active.jpg)';
            }    
            $(this).next("div.menu_body").slideToggle(400).siblings("div.menu_body").slideUp(800);    
            $(this).css({height:"31px"});    
        }
        
        if(index>0)
            var prev = inp[index-1];
        if(index+1<$("#firstpane p.menu_head").size())
            var next = inp[index+1];        
        
        for(var i = 0; i<=3; i++)
        {
            if(index != i)
            {
                menu_item = inp[i];
                if(i == 0)  
                {
                    menu_item.style.backgroundImage = 'url(/images/button_home.jpg)';
                }
                if(i == 1)  
                {
                    menu_item.style.backgroundImage = 'url(/images/button_activiteiten.jpg)';
                }
                if(i == 2)  
                {
                    menu_item.style.backgroundImage = 'url(/images/button_faciliteiten.jpg)';
                }
                if(i == 3)  
                {
                    menu_item.style.backgroundImage = 'url(/images/button_informatie.jpg)';
                }
            }
        }
        
           $(this).siblings().css({color:"#666666"});  
           
           $(this).siblings().css({'width':'208px'});   
           
           if(k == 1)
            $ (this).next ().css('background','none');  
    });
    $("#firstpane p.menu_head").mouseover(function()
    {
        
        var inp = $("#firstpane p.menu_head");
        
        var indexover = inp.index(this);
        
        if(indexover != index && indexover == 0)
        {    
            $(this).css({backgroundImage:"url(/images/button_home_over.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'}); 
        } 
        if(indexover == 1 && indexover != index)
        {
            $(this).css({backgroundImage:"url(/images/button_activiteiten_over.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'});    
        }
        if(indexover == 2 && indexover != index)
        {
            $(this).css({backgroundImage:"url(/images/button_faciliteiten_over.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'});   
        }
        if(indexover == 3 && indexover != index)
        {
            $(this).css({backgroundImage:"url(/images/button_informatie_over.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'});   
        }            
    }
    );
    $("#firstpane p.menu_head").mouseout(function()
    {
        var inp = $("#firstpane p.menu_head");

        var indexover = inp.index(this);
        if(indexover != index && indexover == 0)
        {
            $(this).css({backgroundImage:"url(/images/button_home.jpg)"});  
            $(this).css({'width':'208px'});  
        }
        if(indexover == 1 && indexover != index)
        {
            $(this).css({backgroundImage:"url(/images/button_activiteiten.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'});   
        }
        if(indexover == 2 && indexover != index)
        {
            $(this).css({backgroundImage:"url(/images/button_faciliteiten.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'});   
        }
        if(indexover == 3 && indexover != index)
        {
            $(this).css({backgroundImage:"url(/images/button_informatie.jpg)"});  
            $(this).css({'padding-left':'0px'}); 
            $(this).css({'width':'208px'});   
        }            
    }
    );
    
});