Miscellany

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head><title></title>

<script language=javascript type='text/javascript'>


function update_mouse_pos(event)
{

	var x = parseInt(mouseX(event));// - 10;
	var y = parseInt(mouseY(event));// - 50;

	document.getElementById('y2').value = x + "," + y;




}


function draw_rectangle(w,h,x,y)
{
	var bg = "";
	var bCol = "red";

	var rect = document.createElement("div");
	var style = rect.style;
	style.width = w +"px";
	style.height = h +"px";
	style.left = x +"px";
	style.top = y +"px";
	style.backgroundColor = bg;
	style.borderColor = bCol;
	// fixed
	style.position = "absolute";
	style.borderStyle = "solid"
	style.borderWidth = 2;
	return rect;
}


function load_image()
{
	document.getElementById('image_div').innerHTML = '';
	document.getElementById('image_div').innerHTML = "<img style='position: absolute; left: 10px; top: 50px' border='0' src='" + document.getElementById('image_file').value + "'>";
}


function mouseX(evt)
{
	if (evt.pageX)
		return evt.pageX;
	else if (evt.clientX)
   		return evt.clientX + (document.documentElement.scrollLeft ?
   			document.documentElement.scrollLeft :
   				document.body.scrollLeft);
	else
		return null;
}

function mouseY(evt)
{
	if (evt.pageY)
		return evt.pageY;
	else if (evt.clientY)
   		return evt.clientY + (document.documentElement.scrollTop ?
   			document.documentElement.scrollTop :
   				document.body.scrollTop);
	else
		return null;
}



//returns an array where x, y, width and height are in consecutive elements (respectively)
function calc_rect_params(x1, y1, x2, y2)
{
	var rect_params = new Array(4);

	/*
	element:
	0 = x
	1 = y
	2 = width
	3 = height
	*/

	if (x2 > x1 &&  y2 < y1)
	{
		rect_params[0] = x1;
		rect_params[1] = y2;
		rect_params[2] = parseInt(x2) - parseInt(x1);
		rect_params[3] = parseInt(y1) - parseInt(y2);
		document.getElementById('test_results').innerHTML = "if statment 1<br>";

	}
	else if (x2 < x1 && y2 < y1)
	{
		rect_params[0] = x2;
		rect_params[1] = y2;
		rect_params[2] = parseInt(x1) - parseInt(x2);
		rect_params[3] = parseInt(y1) - parseInt(y2);
		document.getElementById('test_results').innerHTML = "if statment 2<br>";
	}
	else if (x2 < x1 && y2 > y1)
	{
		rect_params[0] = x2;
		rect_params[1] = y1;
		rect_params[2] = parseInt(x1) - parseInt(x2);
		rect_params[3] = parseInt(y2) - parseInt(y1);
		document.getElementById('test_results').innerHTML = "if statment 3<br>";
	}
	else if (x2 > x1 && y2 > y1)
	{
		rect_params[0] = x1;
		rect_params[1] = y1;
		rect_params[2] = parseInt(x2) - parseInt(x1);
		rect_params[3] = parseInt(y2) - parseInt(y1);
		document.getElementById('test_results').innerHTML = "if statment 4<br>";
	}


	document.getElementById('test_results').innerHTML += "x1: " + x1 + "<br>";
	document.getElementById('test_results').innerHTML += "y1: " + y1 + "<br>";
	document.getElementById('test_results').innerHTML += "x2: " + x2 + "<br>";
	document.getElementById('test_results').innerHTML += "y2: " + y2 + "<br>";
	document.getElementById('test_results').innerHTML += "height: " + rect_params[3] + "<br>";
	document.getElementById('test_results').innerHTML += "width: " + rect_params[2] + "<br>";





	return rect_params;

}


function process_click(x, y)
{
	if (document.getElementById('x1').value == '' && document.getElementById('y1').value == '')
	{
		document.getElementById('x1').value = x;
		document.getElementById('y1').value = y;
	}
	else
	{
		document.getElementById('x2').value = x;
		document.getElementById('y2').value = y;

		var rect_params = new Array(4);

		rect_params = calc_rect_params(document.getElementById('x1').value,
										document.getElementById('y1').value,
										 document.getElementById('x2').value,
										  document.getElementById('y2').value);


		document.getElementById('x1').value = '';
		document.getElementById('y1').value = '';
		document.getElementById('x2').value = '';
		document.getElementById('y2').value = '';


		document.getElementById('image_div').appendChild(draw_rectangle(rect_params[2], rect_params[3], rect_params[0], rect_params[1]));

	}

}

</script>


</head>

<body>

<input type=file name='image_file' onChange="load_image();">

<input type=text name='x1'>
<input type=text name='y1'>
<input type=text name='x2'>
<input type=text name='y2'> 10px, 50px



<div id="image_div" onClick='javascript: process_click(mouseX(event), mouseY(event));' onMouseMove = 'javascript: update_mouse_pos(event);'>

</div>


<div id="test_results" style='position: absolute; left: 800px; top: 100px'>

</div>



</body>

</html>