// Les noms des différentes sections
var tabContents=new Array("contentAccueil","contentMusique","contentCalendrier","contentContact");
var tabTitles=new Array("titleAccueil","titleMusique","titleCalendrier","titleContact");
	
// ATTENTION: Ces éléments de style doivent être mis à jour lors de changements dans la CSS
// Aller les chercher dans le DOM??
var activeTitleColor = "#0f2c66";
var inactiveTitleColor = "#CCCCCC";
var activeTitleBackground = "#CCCCCC";
var inactiveTitleBackground = "url('images/fondBlancTransparentv2.gif')";

function clicks(noElement) {
	idContent = tabContents[noElement];
	idTitle = tabTitles[noElement];
	
	// On effectue le toggle d'affichage des blocs de content
	result = toggle(idTitle, idContent, noElement);
	
	// On arrange les éléments de navigation après le Toggle
	if (result == "block") {
		for (var i=0; i < 4; i++){			
			if (tabContents[i] != idContent) {
				//alert(tab[i]);
				document.getElementById(tabContents[i]).style.display="none";
				document.getElementById(tabTitles[i]).style.color = inactiveTitleColor;
				document.getElementById(tabTitles[i]).style.background = inactiveTitleBackground;
				if (i != 0)
					document.getElementById(tabTitles[i]).style.margin= "0 0 0 0";
			}
		}	
	}
}

function toggle(idTitle, idContent, noElement) {
	if (document.getElementById(idContent).style.display == "block") {
		document.getElementById(idContent).style.display="none";
		document.getElementById(idTitle).style.color=inactiveTitleColor;
		document.getElementById(idTitle).style.background = inactiveTitleBackground;
		if (noElement != 0)
			document.getElementById(idTitle).style.margin = "0 0 0 0";
		return "none"; 
	} else {
		document.getElementById(idContent).style.display="block";
		document.getElementById(idTitle).style.color= activeTitleColor;
		document.getElementById(idTitle).style.background = activeTitleBackground;
		if (noElement != 0)
			document.getElementById(idTitle).style.margin = "1em 0 0 0";
		return "block"; 
	}
}