var frameRate = 25;

function fader(red, green, blue, time) {
    // how many seconds should the animation happen over
    seconds = time / 1000;
    
    // how many times will the colour need to change
    loops = frameRate * seconds;
    
    // get the current background colour (this is the bit that breaks in IE)
    currentColor = document.getElementById('bg').style.backgroundColor;
    currentColor = currentColor.substring(4);
    currentColor = currentColor.replace(")", "");
    colorArray = currentColor.split(", ");
    
    // works out the difference between the current colour and the target colour
    // I've been a bit lazy here and assumed the R, G and B colours are all the same,
    // as such this script will only really work effectively on greyscale colours in its current form
    difference = colorArray[0] - red;
    
    // how much should the colour change each time to reach the target colour in the set time
    additions = difference / loops;
    
    doChange(colorArray[0], colorArray[1], colorArray[2], Math.ceil(additions), 1, loops);
}

function doChange(red, green, blue, adder, iteration, limit) {
    // for each loop create a new colour slightly light/darker then the last
    if (iteration < (limit+10) || red > 255 || red < 0) {
        newRed = red-adder;
        newGreen = green-adder;
        newBlue = blue-adder;
        newAdder = adder;
        newIteration = iteration+1;
        newLimit = limit;
        setTimeout("doChange(newRed,newGreen,newBlue, newAdder, newIteration, newLimit)", frameRate);
    }
    // convert the RGB value to Hex
    colour = "#" + RGBtoHex(red,green,blue);
    // change the colour
    document.getElementById('bg').style.backgroundColor = colour;
}

// these two functions were not written by me - I've had them lying around on my computer for ages - I'd love to credit the original author, but that seems a little impossible now
function RGBtoHex(posX,posY,posZ)
    {return toHex(posX)+toHex(posY)+toHex(posZ)}
function toHex(N) {
    if (N==null) return "00";
    N=parseInt(N); if (N==0 || isNaN(N)) return "00";
    N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
    return "0123456789ABCDEF".charAt((N-N%16)/16)
          + "0123456789ABCDEF".charAt(N%16);
}

// call this function to start the process - time in milliseconds - this example will first fade to black, then back to white
function fades(time) {
    fader(0,0,0,time)
    setTimeout("fader(255,255,255,3000)", time);
}