/////////////////////
// Variables globales
var ActiveTab;   // Elément li de l'onglet actif
var ActiveText;  // Elément div (texte) correspondant à l'onglet actif
var TabElements; // Liste des éléments li des onglets
var TabTextElements; // Liste des éléments div des textes correspondant aux onglets

///////////////////////////////////////////////
// Initialisation
// Fonction exécutée au chargement de la page
function Init()
{
	// Récupère les éléments des onglets, et des textes associés
	GetTabs();
	// Associe l'événement clic à certains éléments
	EventClick();
	// Active le premier onglet, et montre le texte correspondant
	InitActiveTab(0);
}
///////////////////////////////////////////////////////////////
// Ajoute des fonctions à l'événement onload de la page
// Ces fonctions seront donc executées au chargement de la page
// func : function à ajouter
function addLoadEvent(func)
{
	// Récupère fonction déjà associée à l'événement onload
	var oldFunction = window.onload;
	// Défini la nouvelle fonction associée à onload
	window.onload = function() // On associe à l'événement onload une fonction anonyme (sans nom)
	{
		// Si une fonction était déjà assignée à l'événement onload on la conserve
		if (typeof oldFunction == "function")
		{
			oldFunction();
		}
		// On ajoute la nouvelle fonction
		func();
	}
}

///////////////////////////////////
// Ajoute la fonction Init
// à l'événement onload de la page
addLoadEvent(Init);

////////////////////////////////////
// Récupère les éléments des onglets, 
// et des textes associés
function GetTabs()
{
	// Récupère l'élément avec l'id = "U-MenuStage"
	var element = document.getElementById("U-MenuStage");
	// Récupère les élements li (onglets) contenu dans l'élément d'id = "U-MenuStage"
	TabElements = element.getElementsByTagName("li");

	// Récupère l'élément avec l'id = "D-TextStage"
	element = document.getElementById("D-TextStage");
	// Récupère les élements div (texte correspondant aux onglets) contenu dans l'élément d'id = "D-TextStage"
	TabTextElements = element.getElementsByTagName("div");
}
////////////////////////////////////////////////
// Associe l'événement click à certains éléments
function EventClick()
{
	// Parcours la liste des onglets et on associe à l'événement onclick (clic souris)
	// de chaque éléments li (onglet) la fonction ExpandCollapse
	for(var i = 0; i < TabElements.length; i++)
  	TabElements[i].onclick = function () { ExpandCollapse(this); };
}
/////////////////////////////////////////////////////
// Initialisation des onglets
// Active un onglet, et montre le texte correspondant
// Cache le texte des onglets non actifs
// Parametre
//    index : numéro de l'onglet (0, 1, 2, ...) à activer
function InitActiveTab(index)
{	
	// Parcours les éléments des onglets
	for(var i = 0; i < TabElements.length; i++)
	{
		if (i == index) 
		{
			TabElements[i].id = "L-Actif"; // Active l'élément
			ActiveTab = TabElements[i]; // Sauvegarde élément actif
			break; // Sort de la boucle
		}
	}
		
	// Parcours les éléments des textes associées aux onglets
	for(var i = 0; i < TabTextElements.length; i++)
	{
		if (i == index) // Le texte doit être montré
		{
			ShowElement(TabTextElements[i]);
			ActiveText = TabTextElements[i]; // Sauvegarde le texte actif
		}
		else // Le texte doit être caché
   		HideElement(TabTextElements[i]);
 	}
}
///////////////////////////////////////////////
// Affiche ou cache un élément sur un clic
// curElement : element sur lequel on a cliqué
function ExpandCollapse(curElement)
{
	ActiveTab.id=""; // Onglet précédemment actif devient inactif
	curElement.id = "L-Actif"; // Onglet cliqué devient actif 
	ActiveTab=curElement; // Sauvegarde onglet actif
	
	// Recherche de l'index (i=0, 1, 2, ...) de l'élément actif
	var i=-1;
	
	do
		i = i+1;
	while ( TabElements[i] != ActiveTab)
	
	// Cache l'ancient texte affiché
	HideElement(ActiveText);
	// Affiche le texte correspodant à l'onglet actif
	ShowElement(TabTextElements[i]);
	// Sauvegarde l'élément du texte affiché
	ActiveText = TabTextElements[i]							
}
///////////////////////////////
// Affiche un élément
// element : élément à afficher
function ShowElement(element) { element.style.display = "block"; }

/////////////////////////////
// Cache un élément
// element : élément à cacher
function HideElement(element) { element.style.display = "none"; }