// main function to process the fade request //
function fadeAll(id, element, start, end, child, steps, speed) {
    var childID = child || 'anchor' + id;
    colorFade(id, element, start, end, steps, speed);

    if (start == '2e2e2e')
        colorFade(childID, 'text', 'ffffff', '000000', steps, speed);
    else
        colorFade(childID, 'text', '000000', 'ffffff', steps, speed);
}
function colorFade(id, element, start, end, steps, speed) {
    var startrgb, endrgb, er, eg, eb, step, rint, gint, bint, step;
    var target = document.getElementById(id);
    steps = steps || 10;
    speed = speed || 10;
    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, element, steps, er, eg, eb, rint, gint, bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id, element, 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 + ')';
        if (element == 'background') {
            target.style.backgroundColor = color;
        } else if (element == 'border') {
            target.style.borderColor = color;
        } else {
            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 + ')';
        if (element == 'background') {
            target.style.backgroundColor = color;
        } else if (element == 'border') {
            target.style.borderColor = color;
        } else {
            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;
}