
	////////////////////////////////////////////////////////////////////////////////
	// Produced by Marcio Galli for Netscape Communications.
	// Uses DOM 1 and CSS to change color. 
	//
	// References:
	//
	// http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html
	// http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/
	// http://www.geckonnection.com
	//
	// This is a basic color fade in effect. There are 6 elements in the HTML 
	// section at the end of this document. Each one is a div that contains 
	// a text node. When the page is loaded, the colorfade animation procedure is called. 
	//
	// It moves the text whose id is "text"+el to the right and at the same
	// time changes the color from white (255,255,255) to gray.
	// When both the background and the text are white (255,255,255), 
	// it creates a transparency effect.
	//

	///////////////////////////////////////////////////////////////////////////////////////
	// Variables used as parameters for the animation. 
	// 
	cc=20;			// Number of frames in the animation.
	aa=255;			// Initial value used as color parameter for Red, Green and Blue channels. 
	tt=800;			// Aux counter - the left position of the element. 
	el=0;			// Index of the element. 

	function colorfade() {
		
		// Animates until cc >0. It's an animation in 20 steps. Note that cc was initialized with 20. 
		if(cc>0) {
			tt-=cc;			// tt value increased by cc. NOTE that 
						// tt value is used to update the left position. 
						// It's using the acceleration approach. In the beginning 
						// the position is updated by high values (20,19,18..)
						// and in the end it's updated by low values (4,3,2..).
						
			// It will produce a gradual slowing effect. 

			// Sets the left position using tt parameter. 
			document.getElementById("text"+el).style.left=tt+"px";

			// aa color value. Decreasing by 5 units. 
			aa-=5;

			// Sets the color value. 
			document.getElementById("text"+el).style.color="rgb("+aa+","+aa+","+aa+")";

			// Decreases the animation counter. 
			cc--;

			// Call colorfade again...
			setTimeout("colorfade()",20);
	
		} else {
			// Reset all animation parameters except the el index. 
			cc=20;
			aa=255;
			tt=800;
			// Call again the colorfade procedure increasing the el index until all 
			// elements (see HTML section bellow) are animated. The last element animated
			// is the sixth element. 
			if(el<4) {
				el++;
				setTimeout("colorfade()",20);
			}
		}
	}
