var id_old;
$(document).ready(function() {
    
    var $winheight = $(window).height();
		
	var $center = $winheight/2;
	
	var $slidesheight = $winheight + (535-$center) ;
	$("div#slides").css({
		height: $slidesheight+'px'
	});
    
    
    var switches = $('#switches > li');
    var slides = $('#slides > div');
    switches.each(function(idx) {
            $(this).data('slide', slides[idx]);
        }).hover(   //Evénement hover
        function() {

            id_old = $('#switches > .active').attr('idi');   //ancien id sur lequel on se trouvait
            id = ($(this).attr('idi'));  //id de l'élément sur lequel on se trouve

            textColor = ($(this).attr('color'));
            $("ul#switches a").css({
                color: textColor
            });
            
            if(id_old != id) {  //Si l'élément actif n'est pas le meme que l'ancien élément actif
                switches.removeClass('active');
                slides.removeClass('active');
                             
                $(this).addClass('active'); //Ajoute la class "active" à l'élément du menu actif              
                
                switches.each(function(idx) {
                        
                        var fade = $('#sl'+idx);
                        if (fade.is(':animated')) {
                            fade.stop(1,1).fadeOut(500);
                        }
                });

                $('#sl'+id_old).fadeOut(500, function() {   //Effet fadeOut sur l'ancien élément
                    $('#sl'+id).fadeIn(500);              //Effet fadeIn sur l'élément actif
                });    
                
                
                 
            }
        });
});