function fader( id, colorstart, colorend, steps ) {

this.name = id + "Var";
eval(this.name + " = this");

this.id       = document.all ? document.all[ id ].style : document.getElementById( id ).style;
this.steps    = steps;
this.loop     = false;
this.colors   = new Array( this.steps);
this.stepping = 1;
this.colorIndex = 0;
this.timerId = false;
this.callback = false;
this.colorstart = colorstart;
this.colorend   = colorend;

this.begindelay = 0;
this.enddelay   = 0;
this.faderspeed = 40;

this.fadein  = fader_fadein;
this.fadein_handoff = fader_fadein_handoff;
this.fadein_actual = fader_fadein_actual;

this.fadeout = fader_fadeout;
this.fadeout_handoff = fader_fadeout_handoff;
this.fadeout_actual = fader_fadeout_actual;

var r1 = parseInt( this.colorstart.substring(0,2), 16 );
var g1 = parseInt( this.colorstart.substring(2,4), 16 );
var b1 = parseInt( this.colorstart.substring(4,6), 16 );

var r2 = parseInt( this.colorend.substring(0,2), 16 );
var g2 = parseInt( this.colorend.substring(2,4), 16 );
var b2 = parseInt( this.colorend.substring(4,6), 16 );

var rStep = ((r2 - r1) / this.steps );
var gStep = ((g2 - g1) / this.steps );
var bStep = ((b2 - b1) / this.steps );


var r1html;
var g1html;
var b1html;
var i;

	for (i = 0; i < this.steps; i++)
	{
                r1html = (Math.round(r1)).toString( 16 );
                if ( r1html.length==1) r1html  = "0" + r1html;
		g1html = (Math.round(g1)).toString( 16 );
                if ( g1html.length==1) g1html  = "0" + g1html;
		b1html = (Math.round(b1)).toString( 16 );
                if ( b1html.length==1) b1html  = "0" + b1html;

                this.colors[i] = "#" + r1html + g1html + b1html;

		r1 += rStep;
		g1 += gStep;
		b1 += bStep;
	}
	this.colors[ this.steps-1] = "#" + this.colorend;
}

function fader_fadein( callback, begindelay, enddelay ) {

        this.begindelay = begindelay;
        this.enddelay = enddelay;
        this.callback = false;
        if( callback ) this.callback = callback;
        this.colorIndex = 0;
        window.setTimeout( this.name + ".fadein_handoff()", this.begindelay );
}

function fader_fadein_handoff() {

        this.id.color = this.colors[0];
        this.id.visibility = "visible";
        this.fadein_actual();
}


function fader_fadein_actual() {

        this.colorIndex++;

        if( this.colorIndex >= this.steps ) {

                if( this.callback ){
                      window.setTimeout( this.name + ".callback()", this.enddelay );
                      return;
               }
               return;
        }

        this.id.color = this.colors[this.colorIndex];

        window.setTimeout( this.name + ".fadein_actual()"  , this.faderspeed );

}

function fader_fadeout( callback, begindelay, enddelay ) {

        this.begindelay = begindelay;
        this.enddelay = enddelay;
        this.callback = false;
        if( callback ) this.callback = callback;
        this.colorIndex = this.steps-1;
        window.setTimeout( this.name + ".fadeout_handoff()", this.begindelay );
}

function fader_fadeout_handoff() {

        this.id.color = this.colors[ this.steps-1 ];
        this.id.visibility = "visible";
        this.fadeout_actual();
}


function fader_fadeout_actual() {

        this.colorIndex--;

        if( this.colorIndex < 0 ) {

                this.id.visibility = "hidden";

                if( this.callback ){
                      window.setTimeout( this.name + ".callback()", this.enddelay );
                      return;
               }
               return;
        }

        this.id.color = this.colors[this.colorIndex];

        window.setTimeout( this.name + ".fadeout_actual()"  , this.faderspeed );

}