// ##########################################
//  ZOOM-BOX
// ##########################################

// ==========================================
//  variable definition
// ==========================================

/* flag that determines an ongoing dragging action */
var dragging = false;

/* size of draggable area */
var areawidth = 500;
var areaheight = 500;

/* coordinates of initial mouse press */
var top = 0;
var left = 0;

/* position and dimensions of rectangle */
var rect = {left: 0, top: 0, width: 0, height: 0};

/* used only for debugging */
var evtx = 0;
var evty = 0;
var tgtid = '';


// ==========================================
//  events
// ==========================================

window.onload=zoombox_init;


// ==========================================
//  utility function adapted from Recipe 9.3, JS & DHTML Cookbook */
// ==========================================
  function getPositionedEventCoords(evt) {
	var elem = (evt.target) ? evt.target : evt.srcElement;
	var coords = {left:-1, top:-1};
	var targetok = false;
	if(evt.layerX) {	/* Mozilla */
		/* note: this won't account for borders, so if the */
		/* element has borders, the coordinates may be offset */
		coords.left = evt.layerX;
		coords.top = evt.layerY;
		if (elem.id == "rect") {
			coords.left += rect.left;
			coords.top += rect.top;
		}
	} else if (evt.x) {	/* IE, Opera, Konqueror */
		/* Opera reports quirky values for offsetX/Y, but x/y
		 * gives more reliable values. IE & Konqueror report
		 * the offset coordinate reference reliably, but x/y
		 * are even easier to handle. */
		coords.left = evt.x;
		coords.top = evt.y;
	} else if (evt.offsetX) { /* fallback just in case */
		coords.left = evt.offsetX;
		coords.top = evt.offsetY;
		if (elem.id == "rect") {
			coords.left += rect.left;
			coords.top += rect.top;
		}
	}

/*
	cur = (evt.currentTarget) ? evt.currentTarget.id : '?';
	from = (evt.fromElement) ? evt.fromElement.id : '?';
	to = (evt.toElement) ? evt.toElement.id : '?';
	rel = (evt.relatedTarget) ? evt.relatedTarget.id : '?';
	x = (evt.x) ? evt.x : '?';
	y = (evt.y) ? evt.y : '?';
	document.getElementById("debug").value += "left: " + coords.left + " top:" + coords.top + " elem:" + elem.id + " curtgt:" + cur + " from: " + from + " to: " + to + " rel: " + rel + " x: " + x + " y: " + y + "\n";
*/
	
	if (elem.id != "rect" && elem.id != "img")
		return {top: -1, left: -1};

	/* debugging */
/*
	evtx = coords.left;
	evty = coords.top;
	tgtid = elem.id;
	setstatus();
*/
	return coords;
}

  /* debugging function */
  function setstatus() {
	document.getElementById("dragging").checked=dragging;
	document.getElementById("top").value=top;
	document.getElementById("left").value=left;
	document.getElementById("evtx").value=evtx;
	document.getElementById("evty").value=evty;
	document.getElementById("tgtid").value=tgtid;
}

  function mousedown(evt) {

	/* compensate for different event models */
	evt = (evt) ? evt : ((window.event) ? event : null);
	if(!evt) return false;

	coords = getPositionedEventCoords(evt);
	var elem = document.getElementById("rect");
	elem.style.top = rect.top = top = coords.top;
	elem.style.left = rect.top = left = coords.left;
	elem.style.width = rect.width = 0;
	elem.style.height = rect.height = 0;
	elem.style.display = "block";
	dragging = true;

	return false;
}

  function mousemove(evt) {
	if (!dragging) return;

	/* compensate for different event models */
	evt = (evt) ? evt : ((window.event) ? event : null);
	if(!evt) return false;

	coords = getPositionedEventCoords(evt);
	var elem = document.getElementById("rect");

	var pos = {top: 0, left: 0, height: 0, width: 0};

	/* calculate rectangle position and dimensions */
	pos.height = Math.abs(coords.top - top);
	pos.width = Math.abs(coords.left - left);
	pos.left = (coords.left < left) ? coords.left : left;
	pos.top = (coords.top < top) ? coords.top : top;
	
	/* check for bad values: if outside area, don't change rectangle */
	if(pos.top < 0 || pos.left < 0 
	   || pos.left + pos.width >= areawidth
	   || pos.top + pos.height >= areaheight)
		return false;
		
	/* change the rectangle */	
	rect = pos;
	elem.style.height = rect.height + "px";
	elem.style.width = rect.width + "px";
	elem.style.left = rect.left + "px";
	elem.style.top = rect.top + "px";
		
	return false;
}

  function mouseup() {
	dragging = false;

	/* debugging */
/*
	setstatus();
*/
	/*alert(getCoord());*/
    document.forms["map"].elements["left"].value = rect.left
    document.forms["map"].elements["top"].value = rect.top
    document.forms["map"].elements["width"].value = rect.width
    document.forms["map"].elements["height"].value = rect.height
    document.forms["map"].submit()
	return false;
  }

  function zoombox_init () {
	var imgcont = document.getElementById("imgcontainer");
	imgcont.onmousedown = mousedown;
	imgcont.onmousemove = mousemove;
	imgcont.onmouseup = mouseup;
  }

function check() {
    return true;
}