// main function to process the fade request //
function colorFade(id, fade, col) {

    var start;
    var end;
    if (fade == '0') {
        start=col;
        end='4E4E4E';
    }else{
        start='4E4E4E';
        end=col;
    }
   
    var startrgb, endrgb, er, eg, eb, step, rint, gint, bint;
    var target = document.getElementById(id);
    steps = 20;
    speed = 15;
    clearInterval(target.timer);
    endrgb = colorConv(end);
    er = endrgb[0];
    eg = endrgb[1];
    eb = endrgb[2];
    if (!target.r) {
        startrgb = colorConv(start);
        r = startrgb[0];
        g = startrgb[1];
        b = startrgb[2];
        target.r = r;
        target.g = g;
        target.b = b;
    }
    rint = Math.round(Math.abs(target.r - er) / steps);
    gint = Math.round(Math.abs(target.g - eg) / steps);
    bint = Math.round(Math.abs(target.b - eb) / steps);
    if (rint == 0) { rint = 1 }
    if (gint == 0) { gint = 1 }
    if (bint == 0) { bint = 1 }
    target.step = 1;
    target.timer = setInterval(function() { animateColor(id, steps, er, eg, eb, rint, gint, bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id, steps, er, eg, eb, rint, gint, bint) {
    var target = document.getElementById(id);
    var color;
    if (target.step <= steps) {
        var r = target.r;
        var g = target.g;
        var b = target.b;
        if (r >= er) {
            r = r - rint;
        } else {
            r = parseInt(r) + parseInt(rint);
        }
        if (g >= eg) {
            g = g - gint;
        } else {
            g = parseInt(g) + parseInt(gint);
        }
        if (b >= eb) {
            b = b - bint;
        } else {
            b = parseInt(b) + parseInt(bint);
        }
        color = 'rgb(' + r + ',' + g + ',' + b + ')';
        target.style.color = color;
        target.r = r;
        target.g = g;
        target.b = b;
        target.step = target.step + 1;
    } else {
        clearInterval(target.timer);
        color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
        target.style.color = color;
    }
}

// convert the color to rgb from hex //
function colorConv(color) {
    var rgb = [parseInt(color.substring(0, 2), 16),
    parseInt(color.substring(2, 4), 16),
    parseInt(color.substring(4, 6), 16)];
    return rgb;
}