/**********************************************************
 * file       : imageselect.js
 * date       : 06-2005
 * author     : Ivo Verburgh
 * description: This file contains the javascript functions to select a region  of an image
 *              it works together with imageselect.php
 **********************************************************/

var Selecting = 0; //this value contains the state of selecting
var gEnv = new getenv(); //these are the environmental values
var gOsOfst = (gEnv.isIE ? 2 : 0); //this is the offset that the browser has from itself
var gXoffset = gOsOfst; //the offset of the selected item on X-axes
var gYoffset = gOsOfst; //the offset of the selected item on Y-axes
var gaPos = new Array(4); //the array with the four needed coordinates

//this function handles all the clicking of the mouse and acts accordingly
function start_select(event) {
	//check if the element of which the click came is the right one
	if(event.srcElement.className != 'box')
		return;
	//get the image
	var doc = document.getElementById("image");

	//if selecting is 3, that means that selecting starts again so the select field must be reset
	if (Selecting == 3) {
		Selecting = 0;
		var d = document.getElementById("p");
		d.style.left = "0px";
		d.style.top = "0px";
		d.style.width = "0px";
		d.style.height = "0px";			
	}
	
	//selecting is 2, that means that changing the select field is done, so the coordinates need to be set
	if (Selecting == 2) {
		Selecting = 3;
		doc.style.cursor = "default";
		setPosition();
	}
	//selecting is 0, that means that selecting has to be started, the cursor is going to be changed and the
	//offset is calculated
	if (Selecting == 0) {
		Selecting = 1;
		doc.style.cursor = "crosshair";
        
        plaatje = event.target ? event.target : event.srcElement;

		gXoffset += findPosX(plaatje);
		gYoffset += findPosY(plaatje);
	}

	//selecting is 1, that means that selecting started and that the left corner is known
	if (Selecting == 1) {
		var o = document.getElementById("imgdesc");
		o.innerHTML += "<div id='p' class='box' style='display:none'><span></span></div>";
		var d = document.getElementById("p");
		var pos = new eventDocPos(event);
		//the left corner of the selected field is saved
		gaPos[0] = pos.x - gXoffset;
		gaPos[1] = pos.y - gYoffset;
		d.style.left = pos.x + "px";
		d.style.top = pos.y + "px";
		d.style.width = "0px";
		d.style.height = "0px";
		d.style.display = "block";
		Selecting = 2;
	}
}

//this function updates the size of the select field and reacts on mouse movement
function update(event) {
	//selecting hasn't started if selecting = 0 so nothing happens
	if(Selecting == 0)
		return;
	var x,y;
	var pos = new eventDocPos(event);
	//retrieve the absolute coordinates of the mouse
	x = pos.x - gXoffset;
	y = pos.y - gYoffset;
	if(Selecting == 2){ //selecting is possible is selecting = 2
		var d = document.getElementById("p");
		//save the current position of the mouse for the downright corner
		gaPos[2] = x;
		gaPos[3] = y;
		//calculate the width and the height of the box foor resizing
		var w = gaPos[2]  - gaPos[0];
		var h = gaPos[3]  - gaPos[1];
		//update the size
		d.style.width = (w > 0 ? w  + "px": "0px");
		d.style.height = (h > 0 ? h  + "px": "0px");
		//show the current coordinates
		notify(gaPos[0]+","+gaPos[1]+" - "+gaPos[2]+","+gaPos[3]);
	}
	else{
		notify(x+","+y);
	}
}

//this funtion returns the position of the mouse. This can differ in different browsers
function eventDocPos(e){
	if(gEnv.isOpera){
		this.x = e.clientX + document.body.scrollLeft;
		this.y = e.clientY + document.body.scrollTop;
	}
	else if(gEnv.isIE) {// if(e.x){
		this.x = e.x + document.body.scrollLeft + document.documentElement.scrollLeft;
		this.y = e.y + document.body.scrollTop + document.documentElement.scrollTop;
	}
	else{
		this.x = e.pageX;
		this.y = e.pageY;
	}
	return this;
}

//the browser type is detected and set as value of gEnv
function getenv(){
	var ua = navigator.userAgent;
	this.isOpera = this.isIE = this.isMacIE = this.isWinIE = this.isSafari = this.isMozilla = this.isIcab = false;
	if(ua.indexOf('Opera') != -1)
		this.isOpera = true;
	else if(ua.indexOf('MSIE') != -1) {
		this.isIE = true;
		if(ua.indexOf('Mac') != -1)
			this.isMacIE = true;
		else if(ua.indexOf('Win') != -1)
			this.isWinIE = true;
	}
	else if(ua.indexOf('Safari') != -1)
		this.isSafari = true;
	else if(ua.indexOf('Gecko') != -1)
		this.isMozilla = true;
	else if(ua.indexOf('iCab') != -1)
		this.isIcab = true;
	this.usrLang = (navigator.userLanguage || navigator.language);
}

//this function makes it possible to show a string in the statusbar
function notify(str){
	if(gEnv.isMozilla)
		return;
	status = ((str == '') ? defaultStatus : str);
}

//this functions pastes the coordinates of the selecting field in a form so the server receives it.
function setPosition() {
	var x0 = document.getElementById("x0");
	var y0 = document.getElementById("y0");
	var x1 = document.getElementById("x1");
	var y1 = document.getElementById("y1");
	x0.value = gaPos[0];
	y0.value = gaPos[1];
	x1.value = gaPos[2];
	y1.value = gaPos[3];
}

//this function calculates the precise topleft x coordinate of a given object
function findPosX(obj) {
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

//this function calculates the precise topleft y coordinate of a given object
function findPosY(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}