var startRGB = new Array(163, 126, 70); // couleur générale des liens de style.css
var targetRGB = new Array(192, 192, 192); // silver

window.onload = function()
{
    var links = document.getElementsByTagName('a');
    for(var i = 0; i < links.length; i++)
    {
        if(links[i].className != 'normal')// Nom de l'attribut class auquel on ne souhaite pas appliquer cet effet
        {
            links[i].id = 'trans' + i; // 1
            links[i].curRGB = new Array(startRGB[0], startRGB[1], startRGB[2]); // 2
            links[i].onmouseover = doTrans; // 3
            links[i].t_over = false;
            links[i].onmouseout = clTrans;
            links[i].t_out = false;
        }
    }
}
//   1. On attribue un id à chacun des liens pour pouvoir (plus loin) les manipuler facilement via setInterval.
//   2. On sauvegarde la couleur courante ; ça évitera de devoir la rechercher.
//   3. On définit les évènements et on initialise les timers :
//      doTrans sera la fonction pour la transition vers la couleur targetRGB et clTrans, la fonction pour la transition vers la couleur startRGB.
//      t_over et t_out sont les variables qui nous serviront à vérifier l'état de nos liens.

function doTrans()
{
    if(this.t_out) // 1
    {
        clearInterval(this.t_out);
        this.t_out = false;
    }
    if(this.t_over) return null; // 2
    this.t_over = setInterval('rgbTrans(\'' + this.id + '\',\'' + targetRGB[0] + '\',\'' + targetRGB[1] + '\',\'' + targetRGB[2] + '\')', 50); // 3
}
//   1. t_out est le timer qui correspond à l'intervalle utilisé pour la transition vers la couleur de départ. S'il est différent de false, s'il est actif, on le désactive et on lui donne la valeur false.
//   2. Si t_over est déjà actif, on arrête la fonction.
//   3. Sinon on l'active en exécutant la fonction de transition (rgbTrans) à intervalle régulier (ici, 50 ms).

function clTrans()
{
    if(this.t_over)
    {
        clearInterval(this.t_over);
        this.t_over = false;
    }
    if(this.t_out) return null;
    this.t_out = setInterval('rgbTrans(\'' + this.id + '\',\'' + startRGB[0] + '\',\'' + startRGB[1] + '\',\'' + startRGB[2] + '\')', 50);
}
// Idem, pour l'événeent onmouseout.

function rgbTrans(id, r, g, b)
{
    var link = document.getElementById(id); // 1
    var i = 25; // 2
    var curRGB = new Array(link.curRGB[0],link.curRGB[1],link.curRGB[2]); // 3
    var destRGB = new Array(parseInt(r),parseInt(g),parseInt(b)); // 4
    if(curRGB[0] == destRGB[0] && curRGB[1] == destRGB[1] && curRGB[2] == destRGB[2]) // 5
    {
        if(link.t_over)
        {
            clearInterval(link.t_over);
            link.t_over = false;
        }
        if(link.t_out)
        {
            clearInterval(link.t_out);
            link.t_out = false;
        }
        return null;
    }
    for(var j = 0; j < 3; j++) // 6
    {
        if(curRGB[j] > destRGB[j])
        {
            curRGB[j] = curRGB[j]-i > destRGB[j] ? curRGB[j]-i : destRGB[j];
        }
        else if(curRGB[j] < destRGB[j])
        {
            curRGB[j] = curRGB[j]+i < destRGB[j] ? curRGB[j]+i : destRGB[j];
        }
    }
    link.curRGB = curRGB; // 7
    link.style.color = 'rgb('+curRGB[0]+','+curRGB[1]+','+curRGB[2]+')'; // 8
}
   //1. On sauvegarde l'élément dont l'id est en paramètre de la fonction.
   //2. On définit la valeur qui servira à incrémenter et décrémenter les valeurs des couches (rouge, bleu, vert) de la couleur.
   //3. On sauvegarde le tableau des valeurs des couches de la couleur courante.
   //4. On sauvegarde le tableau des valeurs des couches passées en paramètres de la fonction.
   //5. Si les valeurs de la couleur courante sont identiques à celles passées en paramètres, on désactive le timer actif et on arrête la fonction.
   //6. On effectue une boucle sur les trois valeurs de la couleur courante et on incrémente ou on décrémente la valeur courante en fonction de la valeur de destination.
   //7. On sauvegarde les valeurs de la couleur courante.
   //8. On applique la couleur courante.