<HTML>
<head>
<title>From Dynatable demo - produced by Marcio Galli</title>
<script>
	//-------------------------------------------------------------------------------------
	// start function 
	//
	// This function is called when the page is loaded. 
	// See the onload="start()" attribute in the body tag. 
	//
	function start() {
		//--------------------------------------------------------------------
		// Adding beginDrag function as event listener for mousedown event
		// at dd_image and dd_resize elements. 
		//
		// NOTE: dd_image is the div that contains the jpg image.  
		// dd_resize is a small image used as icon to resize the dd_image.
		//
		document.getElementById("dd_image").addEventListener("mousedown",beginDrag, false);
		document.getElementById("dd_resize").addEventListener("mousedown",beginDrag, false);

	}

	//-------------------------------------------------------------------------------------
	// doDrag event - called when dragging
	//
	function doDrag(e) {
		
		// Calculates the difference between the last mouse position
		// and the current position. 
		//
	        var difX=e.clientX-window.lastX;
	        var difY=e.clientY-window.lastY;

		// If mode equals resize... (see beginDrag function)
		//
		if(dd_mode=="resize") {

			// Then the drag operation is just for the little resize icon.
			// 

			// Retrieves the x and y position for the dd_resize2 div and adding 
			// the dif value.
			// NOTE that the dd_resize2 includes the dd_resize image (icon).
			//
		        var newX1 = parseInt(document.getElementById("dd_resize2").style.left)+difX;
		        var newY1 = parseInt(document.getElementById("dd_resize2").style.top)+difY;
	
			// Sets the new position 
		        document.getElementById("dd_resize2").style.left=newX1+"px";
		        document.getElementById("dd_resize2").style.top=newY1+"px";

		} else {
			// Same thing but now for dd_area...
			// In this case the user is dragging the image instead the little resize icon. 
			//
		        var newX1 = parseInt(document.getElementById("dd_area").style.left)+difX;
		        var newY1 = parseInt(document.getElementById("dd_area").style.top)+difY;

		        document.getElementById("dd_area").style.left=newX1+"px";
		        document.getElementById("dd_area").style.top=newY1+"px";
		}

		// Stores the current mouse position.
		//
	        window.lastX=e.clientX;
	        window.lastY=e.clientY;

	}

	//----------------------------------------------------------------------------
	// When drag begins, this function is called.. see addEventListener calls 
	// in start function. 
	//
	function beginDrag(e) {
		e.preventDefault();

		// Stores the current mouse position for further use.
		//
	        window.lastX=e.clientX;
	        window.lastY=e.clientY;

		// Register doDrag event handler to receive generic onmousemove events. 
		//
	        window.onmousemove=doDrag;

		// Register endDrag event handler to receive generic onmouseup events. 
		//
	        window.onmouseup=endDrag;

		// Verify the attribute of the event's target. 

		myattr=e.target.getAttribute("ID");

		if(myattr=="dd_resize") {
			// If the attribute's value is dd_resize,
			// the user clicked over the dd_resize image, 
			// and the dd_mode should be resized.

			dd_mode="resize";
		} else {
			// Else the user just clicked over the image, so the mode is set to drag. 
			//
			dd_mode="drag";			
		}
	}
	
	//----------------------------------------------------------------------------
	// Called when the mouse button is released
	//
	function endDrag(e) {

		// Releases the onmousemove event.

	        window.onmousemove=null;

		// If the operation is resize then...
		if(dd_mode=="resize") {
			
			// DOM Steps to resize the image.

			// Stores the x and y position of the dd_resize2 icon area and the dd_image are
			var oldX1 = parseInt(document.getElementById("dd_resize2").style.left);
		        var oldY1 = parseInt(document.getElementById("dd_resize2").style.top);
			var oldX2 = parseInt(document.getElementById("dd_image").style.left);
		        var oldY2 = parseInt(document.getElementById("dd_image").style.top);

 			// Since user was resizing by dragging the dd_resize2 div element, the
			// oldX1 and oldY1 values represent the new resize position. 

			// In this case, the difference between oldX1 and oldX2 is the new width.
			ddx=oldX1-oldX2;
	
			// And the difference between oldY1 and oldY2 is the new height.
			ddy=oldY1-oldY2;

			// Dynamicallty sets the width and height attributes.
			imagg=document.getElementById("img");
			imagg.setAttribute("width",""+ddx+"");
			imagg.setAttribute("height",""+ddy+"");

			// dd_area is an area in the background of the image. It is a border.
			// Its width and height values are the same as those for ddx and ddy plus 2 pixels. 
			// NOTE that dd_area in the HTML is a single div with gray background, 
			// so the size can be changed directly by setting style width and height
			// properties. 
			//
			ndx=ddx+2;
			document.getElementById("dd_area").style.width=ndx+"px";
			ndy=ddy+2;
			document.getElementById("dd_area").style.height=ndy+"px";
		}
	}
</script>
</head>
<body onload="start()">
<div id="dd_area"  style="position:absolute;left:0px;top:0px;width:598px;height:216px;background-color:gray">
<div id="dd_image" style="position:absolute;left:1px;top:1px">
<img id="img" src="geckosmic.jpg" width="597" >
</div>
<div id="dd_resize2" style="position:absolute;left:599px;top:217px;">
<img id="dd_resize" src="resizeicon.gif">
</div>
</div>
</body>
</HTML>