// switchImgAndBground.js
var startImg = 'imageA'; // id of initial img tag
var endImg = 'imageB'; // id of final img tag
var delay = 300; // time to wait before start effect (millisec)
var step = 100; // number of steps (2 - 255)
var startColor = 'ffffff'; // start color
var endColor = '000000'; // end color

function switchImgAndBground() {
    setTimeout('doSwitchImgAndBground()', delay);
}

function doSwitchImgAndBground() {
    fade(0, '0x' + startColor.substring(0, 2), '0x' + startColor.substring(2, 4), '0x' + startColor.substring(4, 6), '0x' + endColor.substring(0, 2), '0x' + endColor.substring(2, 4), '0x' + endColor.substring(4, 6), step);
}

function setOpacity(objId, value) {
    var obj = document.getElementById(objId);
    obj.style.filter = 'alpha(opacity=' + value + ')';
    obj.style.MozOpacity = value / 100;
    obj.style.opacity = value / 100;
}

hexa = new makearray(16);
for (var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10] = 'a';
hexa[11] = 'b';
hexa[12] = 'c';
hexa[13] = 'd';
hexa[14] = 'e';
hexa[15] = 'f';

function makearray(n) {
    this.length = n;
    for (var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return '00';
    else if (i > 255)
        return 'ff';
    else
        return '' + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setbgColor(r, g, b) {
    var hr = hex(r);
    var hg = hex(g);
    var hb = hex(b);
    document.bgColor = '#' + hr + hg + hb;
}

function fade(i, sr, sg, sb, er, eg, eb) {
    setbgColor(Math.floor(sr * ((step-i)/step) + er * (i/step)),
               Math.floor(sg * ((step-i)/step) + eg * (i/step)),
               Math.floor(sb * ((step-i)/step) + eb * (i/step)));
    setOpacity(startImg, (step-i)/step * 100);
    setOpacity(endImg, 100 - (step-i)/step * 100);
    i++;
    if (i <= step)
        setTimeout('fade(' + i + ', \'' + sr + '\', \'' + sg + '\', \'' + sb + '\', \'' + er + '\', \'' + eg + '\', \'' + eb + '\')', 10);
}