// JavaScript Document
// setup the initial colour - in this case white
var currentColour = {r: 242, g: 109, b: 38};
// and create an empty object ready to hold the target colour
var targetColour = {};

function initFade(rTarget, gTarget, bTarget) {
    // store the red, green and blue parts of the target colour in our object
    targetColour = {r: rTarget, g: gTarget, b: bTarget};
    // and start the fade
    setTimeout('fade()', 100);
}

function whiteFade(rTarget, gTarget, bTarget) {
    // store the red, green and blue parts of the target colour in our object
    targetColour = {r: rTarget, g: gTarget, b: bTarget};
    // and start the fade
    setTimeout('fade()', 100);
}

function fade() {
    // adjust the red, green and blue parts of the colour towards the target colour
    currentColour.r += (targetColour.r - currentColour.r) / 5;
    currentColour.g += (targetColour.g - currentColour.g) / 5;
    currentColour.b += (targetColour.b - currentColour.b) / 5;

    var rr = Math.round(currentColour.r);
    var rg = Math.round(currentColour.g);
    var rb = Math.round(currentColour.b);
    // apply the new colour to the document
    document.getElementsByTagName('body')[0].style.backgroundColor = 'rgb(' + rr + ',' + rg + ',' + rb + ')';
    // if we've not reached the target colour yet run the fade function again in 100 milliseconds
    if (targetColour.r != rr || targetColour.g != rg || targetColour.b != rb) {
        setTimeout('fade()', 100);
    }
}