ACC SHELL

var NOTHING = 0;
var FIRST = 1;
var SECOND = 2;

var state = NOTHING;

var from_x = -1;
var from_y = -1;
var to_x = -1;
var to_y = -1;

var want_aspect_ratio = false;
var wanted_ratio = 5.0 / 4.0;

function resize_rect()
{
	var temp;
	
	var x1 = Math.min(from_x, to_x);
	var y1 = Math.min(from_y, to_y);
	var x2 = Math.max(from_x, to_x);
	var y2 = Math.max(from_y, to_y);
	
	if(want_aspect_ratio)
	{
		if(y1 - y2 == 0)
		{
			// we want the empty box to be at the point
			// where it all started
			x1 = x2 = from_x;
			y1 = y2 = from_y;	
		}
		else
		{
			var ratio = Math.abs(x1 - x2) / Math.abs(y1 - y2);
			
			//alert(ratio);
			
			if(ratio < wanted_ratio)
			{
				// y needs to be altered
				var new_height = Math.abs(x1 - x2) * (1 / wanted_ratio);
				
				if(to_y < from_y)
				{
					y1 = y2 - new_height;
					to_y = y1;
				}
				else
				{
					y2 = y1 + new_height;
					to_y = y2;
				}
			}
			else
			{
				// x needs to be altered
				var new_width = Math.abs(y1 - y2) * wanted_ratio;
				
				if(to_x < from_x)
				{
					to_x = x1 = x2 - new_width;
					
				}
				else
				{
					to_x = x2 = x1 + new_width;
				}
			}
			
			//ratio = Math.abs(x1 - x2) / Math.abs(y1 - y2);
			
			//if(Math.abs(ratio - wanted_ratio) > 0.01)
				//alert(ratio);
		}			
	}
	
	
	
	image_pos = absolute_position(document.getElementById("image"));
	
	change_element_position(document.getElementById("top"), x1 + image_pos[0], y1 + image_pos[1]);
	change_element_position(document.getElementById("left"), x1 + image_pos[0], y1 + image_pos[1]);
	
	change_element_position(document.getElementById("bottom"), x1 + image_pos[0], y1 + image_pos[1] + (y2 - y1));
	change_element_position(document.getElementById("right"), x1 + image_pos[0] + (x2 - x1), y1 + image_pos[1]);
					
	change_element_size(document.getElementById("top"), x2 - x1, 1);
	change_element_size(document.getElementById("left"), 1, y2 - y1);	
	change_element_size(document.getElementById("bottom"), x2 - x1, 1);
	change_element_size(document.getElementById("right"), 1, y2 - y1);	
	
	
}

function reset_coords()
{
	from_x = from_y = -1;
	to_x = to_y = -1;
}

function absolute_position(obj)
{
	var curleft = curtop = 0;

	if (obj.offsetParent) 
	{
		do{
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
	
			obj = obj.offsetParent;
			
			if(!obj)
				break;
		}while (1);

		
		return [curleft,curtop];
	}
	
	return [obj.offsetLeft, obj.offsetTop];
}

// http://dunnbypaul.net/js_mouse/
function get_mouse_xy(e) 
{ 
	mouse_x = 0;
	mouse_y = 0;
	
		if(!e)
			e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

		if(e)
		{	 
		if(e.pageX || e.pageY)
		{ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
  			mouse_x = e.pageX;
  			mouse_y = e.pageY;
  			
  			//algor = '[e.pageX]';
  			//if(e.clientX || e.clientY)
  			//algor += ' [e.clientX] '
  		}
		else
			if(e.clientX || e.clientY)
			{ // works on IE6,FF,Moz,Opera7
		 		mouse_x = e.clientX + document.body.scrollLeft;
			    mouse_y = e.clientY + document.body.scrollTop;
			    
			    //algor = '[e.clientX]';
			    //if (e.pageX || e.pageY) algor += ' [e.pageX] '
			}
	}
	
	
	return [mouse_x, mouse_y];
}

function change_element_size(element, w, h)
{
	if(element.style)
		element = element.style;
		
	if(element.resizeTo)
		element.resizeTo(w, h);
		
	var noPx = document.childNodes ? 'px' : 0;
	
	element.width = w + noPx;
	element.pixelWidth = w;
			
	element.height = h + noPx;
	element.pixelHeight = h;
}

function change_element_position(element, to_x, to_y)
{
	var noPx = document.childNodes ? 'px' : 0;

	if(element.style) 
		element = element.style; 
	
	element.left = to_x + noPx;
	element.top = to_y + noPx;
}

function on_mousemove(e)
{
	if(state != FIRST)
		return;
		
	image_pos = absolute_position(document.getElementById("image"));
	
	mouse_pos = get_mouse_xy(e);
			
	to_x =  mouse_pos[0] - image_pos[0];
	to_y =  mouse_pos[1] - image_pos[1];
	
	resize_rect();
					
}

function on_mouseclick(e)
{
	mouse_pos = get_mouse_xy(e);
	
	//alert("stav: " + state);
	
	if(state == NOTHING)
	{
		state = FIRST;
		
		image_pos = absolute_position(document.getElementById("image"));
		
		from_x = mouse_pos[0] - image_pos[0];
		from_y = mouse_pos[1] - image_pos[1];
		to_x = from_x;
		to_y = from_y;
		
		document.getElementById("from_x").setAttribute("value", from_x);
		document.getElementById("from_y").setAttribute("value", from_y);
		
		resize_rect();
		
		return;
	}
	
	if(state == FIRST)
	{
		//	alert("!");
		state = SECOND;
		
		image_pos = absolute_position(document.getElementById("image"));
		
		//alert("height before" + (to_y - from_y));
		to_x = mouse_pos[0] - image_pos[0];
		to_y = mouse_pos[1] - image_pos[1];
				
		resize_rect();
		
		//alert("height after" + (to_y - from_y));
		
		document.getElementById("to_x").setAttribute("value", to_x);
		document.getElementById("to_y").setAttribute("value", to_y);
		
		resize_rect();
		
		return;
	}
	
	if(state == SECOND)
	{
		state = FIRST;
		
		image_pos = absolute_position(document.getElementById("image"));
		
		from_x = mouse_pos[0] - image_pos[0];
		from_y = mouse_pos[1] - image_pos[1];
		to_x = from_x;
		to_y = from_y;		
		
		resize_rect();
		
		document.getElementById("from_x").setAttribute("value", from_x);
		document.getElementById("from_y").setAttribute("value", from_y);
		
					
		
		return;
	}
}

function init()
{
	var doc = document.getElementById("image");
	
	document.getElementById("left").onclick = on_mouseclick;
	document.getElementById("top").onclick = on_mouseclick;
	document.getElementById("bottom").onclick = on_mouseclick;
	document.getElementById("right").onclick = on_mouseclick;
	
	doc.onmousemove = on_mousemove;
	doc.onclick = on_mouseclick;
}