//pour commencer avec les elements fermés de l'accordeon au départ
var stretchers = $$('div.accordeon');
stretchers.each(function(item){
	item.setStyles({'height': '0', 'overflow': 'hidden'});
});

//au chargement de la page , pour eviter certain bug sur safari 
window.onload = function(){ 
		
	var togglers = $$('h5.toggler'); //on met dans la variable togglers tous les div H5 de la page appartenant a la classe toggler. C'est la syntaxe $$ de element de Mootools qui permet cela très facilement
	
	var bgFx = []; //variable pour la gestion des couleurs de fond
	
	//pour chaque element de l'accordeon
	togglers.each(function(toggler, i){
		toggler.defaultColor = toggler.getStyle('background-color');
		
		//fx creation 
		bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
	});

	// creation de l'effet accordeon
	//syntaxe : new Fx.Accordion(quel_div_visible, quel_div_a_afficher, {options eventuelles});
	var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,
		
		onActive: function(toggler, i){
			bgFx[i].toColor('#d40404'); //quand un element est actif
			toggler.getFirst().setStyle('color', '#ffffff');
		},
	
		onBackground: function(toggler, i){
			bgFx[i].clearTimer(); //quand un element n'est actif
			toggler.setStyle('background-color', toggler.defaultColor);
			toggler.getFirst().setStyle('color', '#ffffff');
		}
	});
	
	//permet de reouvrir directement le bon element 
	//grace à l'url test.html#cat_a_ouvrir
	function checkHash(){
		var found = false;
		$$('h5.toggler a').each(function(link, i){
			if (window.location.hash.test(link.hash)){
				myAccordion.showThisHideOpen(i);
				found = true;
			}
		});
		return found;
	}

	if (!checkHash()) myAccordion.showThisHideOpen(0);
	 

};