/**
 * Gestion d'une fiche composée d'onglet
 *
 * @author           Eric Giovannetti <eric@bleuroy.com>
 * @copyright   BleuRoy.com
 * @version        1.0.2
 */

/**
 * Vérifie que l'id "ficheOnglets" existe
 * @param {string}    _baliseOnglet          Définie la balise qui sera parsée pour créer les onglets (doit être uniquement utilisée pour les onglet)
 */ 
function ONGLETS_Initialisation(_baliseOnglet){
    if(document.getElementById('ficheOnglets')) {
        _baliseOnglet = _baliseOnglet.toUpperCase();
        ONGLETS_Gestion(_baliseOnglet);
    }
}

/**
 * Gère l'affichage dynamique du menu
 * @param {string}    _baliseOnglet          Définie la balise qui sera parsée pour créer les onglets (doit être uniquement utilisée pour les onglet)
 * @var {object}         ficheOnglets           Récupère l'élément ayant comme id "ficheOnglets"
 * @var {object}         onglets                     Récupère les divisions <div> contenues dans la variable fiche 
 * @var {object}         titre                         Récupère les éléments étant définis comme onglets
 * @var {string}         fiche                        Récupère l'élément ayant comme id "fiche"
 * @var {array}          paragraphe              Contient un élément paragraphe <p>
 * @var {object}         onglet                       Contient un élément lien <a>
 * @var {object}         titreOnglet              Récupère les ancres <a> contenues dans la variable fiche 
 * @var {object}         span                         Contient un élément span <span>
 * @var {string}         contenuSpan            Insère une chaine de caractère dans le span précédemment créé
 */
function ONGLETS_Gestion(_baliseOnglet){

    var ficheOnglets = document.getElementById('ficheOnglets');
    var onglets = ficheOnglets.getElementsByTagName('div');
    var titre = ficheOnglets.getElementsByTagName(_baliseOnglet);
    var fiche = document.getElementById("fiche");
    var paragraphe = document.createElement('p');
    var onglet, titreOnglet, span, contenuSpan;

    // Modifie les classes et les identifiants des éléments traités

    for (var i=0; i<onglets.length; i++) {
        if (onglets[i].className.indexOf('contenuOnglet') == 0) {
            onglets[i].id = 'contenuOnglet'+i;
            onglets[i].className = onglets[i].className + ' contenuOngletJS';
        }
    }
    fiche.className = fiche.className + " ficheOngletsJS";
    paragraphe.setAttribute("id", "listeOnglets");
   
    for (var i=0; i<titre.length; i++) {
        // Cache l'ensemble des titres des fiches
        titre[i].className = 'invisible';
        
        // Crée les onglets à partir du titre des fiches
        onglet = document.createElement('a');
        onglet.setAttribute('href', '#contenuOnglet'+(i+1));
        onglet.setAttribute('id', 'onglet'+(i+1));
        onglet.setAttribute('class', 'ongletJS');
        onglet.setAttribute('className', 'ongletJS');
        titreOnglet = document.createTextNode(titre[i].firstChild.nodeValue);
        onglet.appendChild(titreOnglet);
        paragraphe.appendChild(onglet);
        
        // Ajoute un séparateur entre les onglets
        if((i+1) != titre.length) {
            span = document.createElement('span');
            contenuSpan = document.createTextNode(' - ');
            span.appendChild(contenuSpan);
            paragraphe.appendChild(span);
        }
        
        // Gestion d'évènements au clic sur l'onglet
        onglet.onclick = function(event) {
            ONGLETS_affichage(this, event);
			return false;
        };
    }
    
    // Insertion du nouveau paragraphe contenant les onglets avant l'élément ayant l'id "fiche" qui se trouve dans l'élément parent ayant l'id "fiche-onglets"
    ficheOnglets.insertBefore(paragraphe, fiche);

    //  Activation par défaut du premier onglet et affichage de la fiche correspondante
    if(document.getElementById('contenuOnglet1')) {
        document.getElementById('contenuOnglet1').className = document.getElementById('contenuOnglet1').className.replace('JS','JSActif');
        document.getElementById('onglet1').className = 'ongletJSActif';
    }
}

/**
 * Gère l'affichage et masquage du menu
 * @param {object}    [_ongletActif]        Onglet qui subit l'action
 * @var {object}          listeOnglets            Récupère l'élément ayant comme id "listeOnglets"
 * @var {object}          onglets                    Récupère les ancres <a> contenues dans la variable listeOnglets 
 * @var {object}          fiche                       Récupère l'élément ayant comme id "fiche"
 * @var {object}          infosOnglets          Récupère les divisions <div> contenues dans la variable fiche 
 * @var {string}          numero                    Récupère le numéro de l'onglet activé
 * @var {object}         contenu                   Récupère l'élément correspondant au contenu de l'onglet activé
 */
function ONGLETS_affichage(_ongletActif){
    var listeOnglets = document.getElementById('listeOnglets');
    var onglets = listeOnglets.getElementsByTagName('a');
    var fiche = document.getElementById('fiche');
    var infosOnglets = fiche.getElementsByTagName('div');
    var numero, contenu;
    if(_ongletActif.className.indexOf('ongletJSActif') != 0) {
        // Désactivation de l'onglet actif et masque le contenu correspondant
        for (var i=0; i<onglets.length; i++) {
            if (onglets[i].className.indexOf('ongletJSActif') >= 0) {
                onglets[i].className = onglets[i].className.replace('JSActif','JS');
            }
        }
        
        for (var i=0; i<infosOnglets.length; i++) {
            if (infosOnglets[i].className.indexOf('contenuOngletJSActif') >= 0) {
                infosOnglets[i].className = infosOnglets[i].className.replace('JSActif','JS');
            }
        }
        
        // Affichage du nouvel onglet actif et du nouveau contenu actif
        _ongletActif.className = _ongletActif.className.replace('JS','JSActif');
        numero = _ongletActif.id.replace('onglet','');
        contenu = document.getElementById('contenuOnglet'+numero);
        contenu.className = contenu.className.replace('JS','JSActif');
    }
}