// Variables globales. IL N'Y A RIEN À AJOUTER.
let gTableauChaines = [] ;
let gTableauEntiers = [] ;
let gTableauBooleens = [] ;


/* TODO 0
*  init() : Déclaration des évènements nécessaires.
*  IL N'Y A RIEN À AJOUTER. À consulter seulement.
*/
function init(){
    // Bouton 1 : Créer tableau 1
    document.getElementById("bouton1").addEventListener("click", creerTableauChaines);

    // Bouton 2 : Créer tableau 2
    document.getElementById("bouton2").addEventListener("click", creerTableauEntiers);

    // Bouton 3 : Créer tableau 3
    document.getElementById("bouton3").addEventListener("click", creerTableauBooleens);

    afficherTableau('string', gTableauChaines) ;
}


/* TODO 1
*  creerTableauChaines() : Crée un tableau de noms et l'affiche.
*
*  À faire :
*  1 - Créer et affecter à la variable globale gTableauChaines un tableau contenant,
*       dans cet ordre, les noms "Pierre", "Jean" et "Jacques".
*/
function creerTableauChaines(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('string', gTableauChaines) ;
}


/* TODO 2
*  creerTableauEntiers() : Crée un tableau d'entiers et l'affiche.
*
*  À faire :
*  1 - Créer et affecter à la variable globale gTableauEntiers un tableau contenant,
*       dans l'ordre, les nombres entiers 1 à 4.
*
*   ATTENTION : on veut mettre des nombres dans le tableau, pas des chaînes de caractères.
*/
function creerTableauEntiers(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('number', gTableauEntiers) ;
}


/* TODO 3
*  creerTableauBooleens() : Crée un tableau de booléens et l'affiche.
*
*  À faire :
*  1 - Créer et affecter à la variable globale gTableauBooleens un tableau contenant,
*       dans cet ordre, les booléens suivants : true, false, true, true, false et false.
*
*   ATTENTION : on veut mettre des booléens dans le tableau, pas des chaînes de caractères.
*/
function creerTableauBooleens(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('boolean', gTableauBooleens) ;
}


// NE PLUS TOUCHER AU CODE À PARTIR D'ICI

function afficherTableau(type, tableau){

    if (tableau.length > 0 && typeof tableau[0] != type){
        alert('Mauvais type de valeurs dans le tableau!');
    }

    let texte = '<tr><td class="index" style="width: 160px; background: black; box-shadow: none;">index</td>';
    for (let i = 0 ; i < Math.max(gTableauChaines.length, gTableauEntiers.length, gTableauBooleens.length) ; i++){
        texte += '<td class="index">' + i + '</td>';
    }
    texte += '</tr>';

    tableaux = [gTableauChaines, gTableauEntiers, gTableauBooleens];
    tableauxNoms = ['gTableauChaines', 'gTableauEntiers', 'gTableauBooleens'];
    for (let i = 0 ; i < 3 ; i++){
        texte += '<tr><td class="zone" style="font-size: 20px; width: 160px; color: white; background: black; box-shadow: none;">' + tableauxNoms[i] + '</td>';
        for (let j = 0 ; j < tableaux[i].length ; j++){
            texte += '<td class="zone">' + tableaux[i][j] + '</td>';
        }
        texte += '</tr>';
    }

    document.getElementById('tableau').innerHTML = texte;
}