<html>
<head>
<title>DOM Level 1 - Exotic Demos - The Dynamic 3D Text Illusion</title>

<script>

	////////////////////////////////////////////////////////////////////////////////
	// Produced by Marcio Galli for Netscape Communications.
	// Uses DOM 1 to dynamically create a set of text elements using 
	// the same content for all the texts, but with different sizes. 
	//
	// Each vertical slice that you see in the demo
	// comes from a text with a clipped area.
	//

	// The demo uses DOM Level 1 to create the text elements dynamically and
	// change style property. 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
	//

	var clipright=853;			// Right margin clipped area.
	var clipleft=2;				// Left margin clipped area.
	var fontsize=40;			// Font size.
	var posleft=50;				// Initial left position.
	var postop=200;				// Initial top position.
	var defaultString="gecko!";		// Default string.

	parentID="area";			// parent div element where the images
						// will be created. 


	// The generator function for creating all text elements inside divs.
	function generator() {

		// 90 texts are created...
		for(i=0;i<90;i++) {
			// node represents the area whose div 
			// elements include the text that will be created. 
			//
			node=document.getElementById(parentID);

			// Creates a div. 
			beforediv=document.createElement("DIV");

			// Prepares the attribute string using postop, posleft, clipright and clipleft.
			str="position:absolute;top:"+postop+"px;left:"+posleft+"px;width:860px;height:600px;font-size:"+fontsize+"pt;clip:rect(0px,"+clipright+"px,0px,"+clipleft+"px);overflow:hidden;";

			// Sets the style attribute with the created str. 
			beforediv.setAttribute("style",str);
	
			// Sets the id name. 
			beforediv.setAttribute("id","object"+i);

			// Creates the text node. 
			newText=document.createTextNode(defaultString);

			// Appends the new created text as a child of the the new div element. 
			beforediv.appendChild(newText);

			// Appends the new created div element as a child of the area div. 
			node.appendChild(beforediv);


			// Defines correct positioning for the next iteration...
			// Try changing the approach. :-)

//			// Approach one 
//			clipright-=9;
//			clipleft+=9;
//			fontsize+=4;
//			posleft-=5;
//			postop-=4;

			// Approach two 
			clipright-=9+((i/90)*10);
			clipleft+=9+((i/90)*10);
			fontsize+=4-((i/90)*3);
			posleft-=(4+((i/90)*10));
			postop-=4;

			// Approach three 
//			clipright-=8;
//			clipleft+=8;
//			fontsize+=4;
//			posleft-=5;
//			postop-=4;
		}
	}


	// 
	// start function. This function is called in the onload event in the body tag. 
	//
	function start() {
		setTimeout("anim()",dec); 
	}


	///////////////////////////////////////////////////////////////////////////////////
	// Now the animation. This is the animation of the panel in which the user types
	// the text string. Note that the panel comes from the top, then opens the window
	// to edit. After user hits enter the pane closes and goes back to the top. At this 
	// point, the generator function is called. 
	//
	// This  procedure uses DOM and CSS to set positioning 
	// and hide/show state for div elements. The generator function in the top of
	// the source code uses DOM Level 1 functions to create new HTML elements dynamically. 
	//

	dec=20;		// Global variable used for the animation. 

	// ------------------------- animation 1 part 1/2 ---------------------------------
	// First step of the animation procedure.
	// Animates the pane from the top to the correct position. 
	function anim() {
		// The dec counter is initialized with 20. This number is decreased by
		// one for each iteration until it reaches 0. 

		dec--;
		if(dec>0) {
			yy=parseInt(document.getElementById("lw").style.top);

			// NOTE that the top position is based on the dec counter. 
			// This is to make a gradual slowing effect. The velocity is decreased for
			// each iteration. :-)
			tt=yy+dec;
			document.getElementById("lw").style.top=tt+"px";

			setTimeout("anim()",dec);
		} else {
			// End the first animation, then call the second animation,
			// initializing the dec counter to 13. 
			//
			dec=13;
			setTimeout("anim2()",dec);
		}
	}


	// ------------------------- animation 1 part 2/2 ---------------------------------
	// Second step of the animation procedure.
	// Animates the left and right sub panes. Open. 
	//
	function anim2() {
		// The dec counter is initialized with 13. This number is decreased by
		// one for each iteration until it reaches 0. Same process again, but now,
		// the code is animating the left and right sub panes. 
		//
		dec--;
		if(dec>0) {
			x1=parseInt(document.getElementById("balll").style.left);
			x2=parseInt(document.getElementById("ballr").style.left);
			document.getElementById("balll").style.left=x1-dec+"px";
			document.getElementById("ballr").style.left=x2+dec+"px";
			setTimeout("anim2()",dec);
		} else {
			// The form (which includes the text field) is positioned 
			// in the correct place. The form was hidden in the -200 
			// position. 
			// 
			// Note: This is not the best way to hide an element. You can
			// hide / unhide with style also.
			//document.getElementById("areaform").style.visibility="visible";

			document.getElementById("areaform").style.left="225px";

		}
	}


	// Lognow function starts the reverse of the anim1 and anim2 function by 
	// starting the anim3 and anim4 animation process. 
	//
	function lognow() {

		// sets the dec 
		dec=13;
		// hides the form. 
		document.getElementById("areaform").style.visibility="hidden";
		// start log now animation..
		setTimeout("anim3()",dec);
	}

	// ------------------------- animation 2 part 1/2 ---------------------------------
	// First step of the animation procedure.
	// Animates the left and right sub panes. Closes. 
	//
	function anim3() {
		// The reverse animation of the anim2
		dec--;
		if(dec>0) {
			x1=parseInt(document.getElementById("balll").style.left);
			x2=parseInt(document.getElementById("ballr").style.left);
			document.getElementById("balll").style.left=x1+dec+"px";
			document.getElementById("ballr").style.left=x2-dec+"px";
			setTimeout("anim3()",dec);
		}
			else { 
			dec=24;
			setTimeout("anim4()",dec);
		}
	}

	// ------------------------- animation 2 part 2/2 ---------------------------------
	// Second step of the animation procedure.
	// Animates the pane from the top to the correct position. 
	//
	function anim4() {
		// This is the reverse animation of anim1.
		dec--;
		if(dec>0) {
			yy=parseInt(document.getElementById("lw").style.top);
			tt=yy-dec;
			document.getElementById("lw").style.top=tt+"px";
			setTimeout("anim4()",dec);
		} else {

			// Sets the value of defaultString with textfield at the end 
			defaultString=document.forms[0].login.value;

			// Calls generator to generate the characters. 
			generator();
		}
	}



</script>
</head>
<body bgcolor="white"  onload="start()">
<ul><ul><ul><ul><ul><ul>enter your ID in the test field to log in!!! I mean -- your name!! :-)
<div id="area" style="position:absolute;left:100px;top:100px;">
</div>

<div id="lw" style="position:absolute;top:-90px;left:-105px;">
<div id="ballr" style="position:absolute;left:83px;top:0px">
<a href="" onclick="lognow();return false;">
<img src="ballright.jpg" border=0></a>
</div>
<div id="balll" style="position:absolute;left:0px;top:1px">
<a href="" onclick="lognow();return false;"><img src="ballleft.jpg" border=0></a>
</div>

<div id="areaform" style="position:absolute;left:-225px;top:20px">
        <form name="f" onsubmit="lognow();return false;" style="width:100px;height:20px">
        <input type=text name="login" value="gecko!" size=7>
        </form>
</div>
<div id="helix" style="position:absolute;left:240px;top:-205px">
<img src="helix.gif">
</div>
</div>

</body>
</html>