
/**
 * Fonction appelée l'init (body onload) de la page HTML
 * 
 * Elle va mettre en couleur tous les éléments de la page
 * 
 * @param {*} titre : le texte à décomposer en haut de la page. 
 */
function colorisationListes(titre) {
    var liens = document.querySelectorAll("#laNav ul li");
    var liensSeparateur = document.querySelectorAll("#laNav ul li.separateur");
    var liensA = document.querySelectorAll("#laNav ul li a");


    // gère la couleur qui entoure le lien (une petite bordure)
    for (var i = 0, max = liens.length; i < max; i++) {
        var coul = colorHSL(i, max, 100, 60, 1, true);
        liens[i].style.backgroundColor = coul;
        var comp = colorHSL(i, max, 100, 1, 1, false);
        liens[i].style.color = comp;
    }

    // gère la couleur du texte des liens 
    for (var i = 0, max = liensA.length; i < max; i++) {
        var comp = colorHSL(i, max, 80, 40, 1, true);
        liensA[i].style.color = comp;
        comp = colorHSL(i, max, 80, 40, 1, true);
        liensA[i].style.borderColor = comp;
    }

    // gère la couleur des éléments (des LI) ayant la class separateur
    for (var i = 0, max = liensSeparateur.length; i < max; i++) {
        var coul = colorHSL(i, max, 100, 60, 1, false);
        liensSeparateur[i].style.backgroundColor = coul;
    }

    // coloriage du titre
    decompTitre(titre, "#titre");
}

/**
 * En récupérant différents données, la fonction retourne une couleur.
 * L'idée est de pouvoir appelé plusieurs fois cette fonction pour qu'elle renvoie des couleurs
 * différentes et avec des teintes le plus différent possible.
 * 
 * exemple colorHSL(0, 10)
 * Cela signifie que la fonction devra choisir parmis 10 couleurs (sur les 360 teintes possibles) et 
 * retournera la première qui répond à ce critère 
 * soit : hsla(0, 60%, 60%, 0.5583857526246161)
 * Si ensuite la fonction est appelée avec : colorHSL(1, 10)
 * hsla(36, 60%, 60%, 0.3408045841130676)
 * 
 * La première valeur de hsla() est 0, puis 36, puis 72... on aura donc des couleurs les mieux réparties sur le cercle chromatique.
 * 
 * hsla(72, 60%, 60%, 0.5919605858042591)
 * hsla(108, 60%, 60%, 0.19420515793046245)
 * hsla(144, 60%, 60%, 0.2992409368280968)
 * hsla(180, 60%, 60%, 0.885133102398495)
 * hsla(215, 60%, 60%, 0.41717502697557296)
 * hsla(251, 60%, 60%, 0.16409368921018874)
 * hsla(287, 60%, 60%, 0.014490874244956764)
 * hsla(323, 60%, 60%, 0.6984194049076546)
 * 
 * @param {*} v : la valeur de référence qui déterminera la teinte
 * @param {*} max : le nombre max de couleur qu'il faudra générer
 * @param {*} sat : la saturation
 * @param {*} lum : la luminosité
 * @param {*} a : l'alpha (la transparence)
 * @param {*} comp_b : un booléen indiquant si on souhaite récupéré la couleur, ou la couleur complémentaire. 
 */
function colorHSL(v, max, sat, lum, a, comp_b) {
    // si max n'exsite pas alors max = 360;
    max = max || 360;
    // si sat n'exista pas alors sat = 60
    sat = sat || 60;
    lum = lum || 60;
    // si a  n'exsite pas alors il sera égale à un nombre aléatoire compris entre 0 et 1.
    a = a || Math.random();

    // calcul de la couleur
    var c = Math.round((v / max) * 359) % 360;
    // la complémentaire se trouve à l'aooposée sur le cercle chromatique, soit 180° de plus.
    // tout en veillant de ne pas dépasser 360
    var c2 = (c + 180) % 360;

    c = comp_b ? c2 : c;

    return "hsla(" + c + ", " + sat + "%, " + lum + "%, " + a + ")";
}
