<HTML>
<head>
<title>DOM Level 1 Demo, 3D can - 3D resize / clip</title>
<script type="text/javascript">

	////////////////////////////////////////////////////////////////////////////////
	// 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. 
	//
	// 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
	//

	///////////////////////////////////////////////////////////////////////////////////
	////
	///   Creating multiple images based on the same URL. 
	//    For each image, make a fine clipping and position it to simulate 
	//    a distortion effect. Also change the width and height of the images. 
	//
	function gen(urls) {

		// Get the object for the dd_area div element. All the images will be 
		// created as a child of dd_area, inside div elements. 
		//
		var node=document.getElementById("dd_area");
		
		// Since gen function can be called many times (see the onclick attribute of 
		// the form button in the HTML section of this page) the following script
		// removes all child nodes of the dd_area div element before starting 
		// to generate the images. 
		// 
		for(var i=0;i < node.childNodes.length;i++) {
			var mycelnode=node.childNodes.item(i);
			node.removeChild(mycelnode);
		}
	
		// Internal variables used for the positioning, clipping and width/height resize.
		//
		var clipright=399;		// Right margin clipped area.
		var clipleft=0;			// Left margin clipper area.
		var posleft=2;			// Left position of the div.
		var postop=40;			// Top position of the div.
		var pi=3.141516;		// Approximate PI value. 
		var clipdx=0;			// width for the clipped area.

		// Loop creating all images inside div elements. 

		for(var i=0;i<29;i++) {

 			// Creates the div element where an image will be included. 
 			//
			var beforediv=document.createElement("DIV");

			// qq value ranges from 0 to 1 and then to zero again. It's based on
			// sin function and also on the number of steps in this for statement. 
			//
			var qq=Math.sin((i/29)*pi);

			// The div element's top position is a fixed value (40) plus a variable value. 
			// Note that the variable value is qq value (0-1) times 15, so it produces 
			// a value which is based on the sin function and ranges from 0-15).
			// 
			postop=40+(qq*15);	// This way, the pair (postop,posleft) makes a curve 
						// effect based on sin function. 

			var clipright2=clipright-clipdx;	// clipright2 is a fine variation over clipright
							// it's the value of the clipright plus an extra 
							// clipping value (clipdx) that is the same 
							// as the width value of the clipped area. 

			clipright2=clipleft+clipdx;

			// Setting all style properties necessary..

			beforediv.setAttribute("style","position:absolute;top:"+postop+"px;left:"+posleft+"px;width:400px;height:350px;clip:rect(0px,"+clipright2+"px,400px,"+clipleft+"px);overflow:hidden;");

			// Setting the name of the div in the id attribute. 

			beforediv.setAttribute("id","image"+i);

			// Creating the image...
			var insidediv=document.createElement("img");

			// Setting src, width and height attributes.
			insidediv.setAttribute("src",urls);
			insidediv.setAttribute("width",400);
			insidediv.setAttribute("height",295);			

			// Appending the img as a child of the div element. 
			beforediv.appendChild(insidediv);

			// Appending the div element as a child of the dd_area div element. 
			node.appendChild(beforediv);

			// Incrementing variables.
			clipdx=1+qq*10;
			clipright-=clipdx;
			clipleft+=clipdx;
			posleft-=0.8;
		}
	}

</script>
</head>
<body onload="" bgcolor="#aaaaaa">
<!-- This is the area in which the images will be created -->
<div id="dd_area" style="position:absolute;left:200px;top:100px;">
</div>
<!-- this is the top of the can -->
<div id="c1"  style="position:absolute;left:200px;top:105px;">
<img src="tamp.gif"></img>
</div>
<!-- this is the png with shadow and light effect-->
<div id="light"  style="position:absolute;left:183px;top:130px;">
<img src="light.png">
</div>
<!-- this is the bottom of the can -->
<div id="c1"  style="position:absolute;left:200px;top:425px;">
<img src="tamp2.gif"></img>
</div>
<!-- The form and the button that calls gen function pass the text field value as an argument. -->
<div id="fields">
<form>
<input type=text name="namef" value="image1.jpg"></input>
<input type=button onclick="gen(document.forms[0].namef.value)" value="fetch image url"></input>
</form>
</div>
</body>
</HTML>