<HTML>
<head>
<title>DOM demonstration, the 3d resize effect</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. 
	//
	// Uses DOM Level 1 to create the text elements dynamically and
	// to 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
	//

	////////////////////////////////////////////////////////////////////////////////
	// start function 
	//
	// This function is called when the page is loaded. See the onload="start()" attribute
	// in the body tag. 
	//
	function start() {
		door=document.getElementById("door");
		door.addEventListener("mousedown",beginDrag, false);
		gorender('geckosmic.jpg');
	}

	///////////////////////////////////////////////////////////////////////////////////
	////
	///   Creates multiple images based on the same URL. For each image, makes a
	//    fine clipping and positions it to simulate a perspective effect. Also 
	//    changes the width and height of the images. 
	//
	function gorender(urlimage) {

		// Since gorender 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. 
		// 
		node=document.getElementById("dd_area");
		for(i=0;i<node.childNodes.length;i++) {
			mycelnode=node.childNodes.item(i);
			node.removeChild(mycelnode);
		}

		// These variables are necessary for the next for statement, which produces the 
		// first wall in the left side. These are internal variables used for the
		// positioning, clipping and width/height resize.
		//
		var clipright=555;		// Right margin clipped area.
		var cliptop=30;			// Top margin clipped area.
		var clipbottom=5;		// Bottom margin clipped area.
		var clipleft=40;		// Left margin clipped area.
		var posleft=-160;		// Left position of the div.
		var postop=-45;			// Top position of the div.
		var ww=210;			// Aux value for width and height.
		var www=0;			// Aux value for width and height.

		// Unfortunately, the comments here do not explain the theory used 
		// to make the distort effect illusion in any detail. 30 Images are created, each one
		// with its own clipping, positioning, width and height. 
		//
		// Loop creating all images inside div elements. 
		for(i=30;i>0;i--) {

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

			// Sets all styles properties necessary..
			beforediv.setAttribute("style","position:absolute;top:"+postop+"px;left:"+posleft+"px;width:600px;height:400px;clip:rect("+cliptop+"px,"+clipright+"px,"+clipbottom+"px,"+clipleft+"px);overflow:hidden;");

			// Sets the name of the div in the id attribute. 
			beforediv.setAttribute("id","image"+i);

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

			// Sets src, width and height attributes.
			insidediv.setAttribute("src",urlimage);
			www=ww+(8*i);		
			insidediv.setAttribute("width",""+www+"");
			www=ww+(8*i);		
			insidediv.setAttribute("height",""+www+"");

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

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

			// Increments variables to ensure the effect.
			clipright-=4;
			clipleft+=4;
			postop+=4;
			clipbottom+=8;
		}

		// Internal variables used for the positioning, clipping and width/height resize.
		//
		var clipright=575;		// Right margin clipped area.
		var cliptop=30;			// Top margin clipped area.
		var clipbottom=235;		// Bottom margin clipped area.
		var clipleft=20;		// Left margin clipped area.
		var posleft=170;		// Left position of the div. 
		var postop=70;			// Top position of the div. 
		var ww=220;			// Aux value for width and height.
		var www=0;			// Aux value for width and height.

		// Loop creates all images inside div elements. 
		for(i=1;i<30;i++) {
			// Creates the div element where an image will be included. 
 			//
			beforediv=document.createElement("DIV");

			// Sets all styles properties necessary..
			beforediv.setAttribute("style","position:absolute;top:"+postop+"px;left:"+posleft+"px;width:600px;height:400px;clip:rect("+cliptop+"px,"+clipright+"px,"+clipbottom+"px,"+clipleft+"px);overflow:hidden;");

			// Sets the name of the div in the id attribute. 
			beforediv.setAttribute("id","image2	"+i);

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

			// Sets src, width and height attributes.
			insidediv.setAttribute("src",urlimage);
			www=ww+(8*i);		
			insidediv.setAttribute("width",""+www+"");
			www=ww+(8*i);		
			insidediv.setAttribute("height",""+www+"");

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

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

			// Increments variables in keeping with the effect. 
			clipright-=8;
			clipleft+=8;
			postop-=4;
			posleft-=4;
			clipbottom-=8;
		}

		// Creates a single image in the center without effect. Just one image 
		// with correct clipping and resize to match with positioning of all
		// elements in the page. 
		//
		beforediv=document.createElement("DIV");
		beforediv.setAttribute("style","position:absolute;top:80px;left:-40px;width:265px;height:300px;clip:rect(20px,35px,146px,40px);overflow:hidden;");
		beforediv.setAttribute("id","image3"+i);
		insidediv=document.createElement("img");
		insidediv.setAttribute("src",urlimage);
		insidediv.setAttribute("width",300);
		insidediv.setAttribute("height",180);
		beforediv.appendChild(insidediv);
		node.appendChild(beforediv);
	}

	//-------------------------------------------------------------------------------------
	// DOM2/Event Model - Drag Support for the Dynamic Table
	// These three methods are event handlers:
	// doDrag(e), beginDrag(e) and endDrag(e)
	//
	// beginDrag was registered in the start function.
	// doDrag and endDrag are registered in beginDrag function. 
	//
	// NOTE: You can "copy and paste" this "drag and drop"-based piece of code. Just
	// remember to change the ID of the "door" element to the ID of the element you 
	// want to drag. 
	// 

	//-------------------------------------------------------------------------------------
	// doDrag event - called when dragging
	//
	function doDrag(e) {

		// Calculates the difference from the last stored position to 
		// the current position. 
		//
	        var difX=e.clientX-window.lastX;
	        var difY=e.clientY-window.lastY;

		// Retrieves the X and Y position (left and top style properties) 
		// of door div element. 
		//
	        var newX = parseInt(document.getElementById("door").style.left)+difX;
	        var newY = parseInt(document.getElementById("door").style.top)+difY;

		// Sets the new position for the door div element. 
		//
	        document.getElementById("door").style.left=newX+"px";
	        document.getElementById("door").style.top=newY+"px";
	
		// Stores the current mouse position as last position. 
		//
	        window.lastX=e.clientX;
	        window.lastY=e.clientY;
	}

	//----------------------------------------------------------------------------
	// When drag begins, this function is called. 
	// This event handler was registered in the table constructor function (dd_dynatable).
	//
	function beginDrag(e) {

		// Stores the current mouse position
	        window.lastX=e.clientX;
	        window.lastY=e.clientY;
		
		// Register doDrag event handler to receive onmousemove events. 
	        window.onmousemove=doDrag;

		// Register endDrag event handler to receive onmouseup events. 
	        window.onmouseup=endDrag;
	}
	
	//----------------------------------------------------------------------------
	// Called when the mouse button is released.
	// This event handler was registered in beginDrag function. 
	//
	function endDrag(e) {
		// Release doDrag event handler assignment. 
	        window.onmousemove=null;
	}

</script>
</head>
<body onload="start();">
<!-- Just another other image element - piece of the house -->
<div id="lbt2" style="position:absolute;left:13px;top:49px;">
<img src="top4.gif">
</div>
<!-- Just another other image element - piece of the house -->
<div id="lbt2" style="position:absolute;left:2px;top:120px;">
<img src="top3.gif">
</div>
<!-- Just other image element - piece of the house -->
<div id="left" style="position:absolute;left:57px;top:139px;">
<img src="top1.gif">
</div>
<!-- This is the area in which all images are created. -->
<div id="dd_area" style="position:absolute;left:240px;top:170px;">
</div>
<!-- Just another other image element - piece of the house -->
<div id="left" style="position:absolute;left:103px;top:155px;">
<img src="tleft.gif">
</div>
<!-- Just another other image element - piece of the house -->
<div id="right" style="position:absolute;left:548px;top:155px;">
<img src="tright.gif">
</div>
<!-- Just another other image element - piece of the house -->
<div id="top" style="position:absolute;left:124px;top:160px;">
<img src="t01.gif">
</div>
<!-- Just another other image element - piece of the house -->
<div id="bottom" style="position:absolute;left:124px;top:400px;">
<img src="t02.gif">
</div>
<!-- -->
<div id="lbt" style="position:absolute;left:57px;top:139px;">
<img src="top2.gif">
</div>
<!-- this is the front wall of the house -- the one with a window and a door -->
<div id="door" style="position:absolute;left:120px;top:159px;">
<img src="door.gif">
<div id="comment" style="position:absolute;left:2px;top:2px;">
you can drag this wall
</div>
</div>

<!-- The form with the URL text field and the button. -->
<!-- Note that onclick event of the text field calls gorender function to generate all images -->
<form>
<input type=text name="urlimage" value="">
<input type=button onclick="gorender(document.forms[0].urlimage.value)" value="fetch image">
</form>
</body>
</HTML>