Return to navigation.js CVS log

Up to [Repository] / zogiLib / js

updates to zogilLib with nicer JavaScript

/*
Copyright (C) 2003 WTWG, Uni Bern
 
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
 
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
 
Author: Christian Luginbuehl, 01.05.2003 , Version Alcatraz 0.4
Changed for digiLib in Zope by DW 24.03.2004, ROC 09.04.2004
*/

var ZOOMFACTOR = Math.sqrt(2);

var dlParams = new Object();
var dlMarks = new Array();
var dlArea = new Rectangle(0.0, 0.0, 1.0, 1.0);
var dlMaxArea = new Rectangle(0.0, 0.0, 1.0, 1.0);
var dlFlags = new Object();
var dlTrafo = new Transform();

// fixes for silly browsers
if (! Array.prototype.push) {
    Array.prototype.push = function(val) {
	this[this.length] = val;
    }
}

// auxiliary function to crop senseless precision
function cropFloat(x) {
    return parseInt(10000*x)/10000;
}

function newParameter(name, defaultValue, detail) {
    // create a new parameter with a name and a default value
    if ( !dlParams[name] ) {
	dlParams[name] = new Object();
	dlParams[name].defaultValue = defaultValue;
	dlParams[name].hasValue = false;
	dlParams[name].value = defaultValue;
	dlParams[name].detail = detail;
	return dlParams[name];
    } else {
	alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!");
	return false;
    }
}

function getParameter(name) {
    // returns the named parameter value or its default value
    if (dlParams[name]) {
	if (dlParams[name].hasValue) {
	    return dlParams[name].value;
	} else {
	    return dlParams[name].defaultValue;
	}
    } else {
	return false;
    }
}

function setParameter(name, value) {
    // sets parameter value
    if (dlParams[name]) {
	dlParams[name].value = value;
	dlParams[name].hasValue = true;
    }
}

function getAllParameters(detail) {
    // returns a string of all parameters in query format
    var params = new Array();
    for ( param in dlParams ) {
	if ((dlParams[param].detail <= detail)&&(dlParams[param].hasValue)) {
	    var val = getParameter(param);
	    if (val != "") {
		params.push(param + "=" + val);
	    }
	}
    }
    return params.join("&");
}

function parseParameters(query) {
    // gets parameter values from query format string
    var params = query.split("&");
    for (var i = 0; i < params.length; i++) {
	var keyval = params[i].split("=");
	if (keyval.length == 2) {
	    setParameter(keyval[0], keyval[1]);
	}
    }
}

function parseArea() {
    // returns area Rectangle from current parameters
    return new Rectangle(getParameter("wx"), getParameter("wy"), getParameter("ww"), getParameter("wh"));
}

function setParamFromRect(rect) {
    // sets digilib wx etc. from rect
    setParameter("wx", cropFloat(rect.x));
    setParameter("wy", cropFloat(rect.y));
    setParameter("ww", cropFloat(rect.width));
    setParameter("wh", cropFloat(rect.height));
}

function parseTrafo() {
    // returns Transform from current dlArea and picsize
    var picsize = getElementSize("scaler");
    var trafo = new Transform();
    // subtract area offset and size
    trafo.concat(getTranslation(new Position(-dlArea.x, -dlArea.y)));
    trafo.concat(getScale(new Size(1/dlArea.width, 1/dlArea.height)));
    // scale to screen size
    trafo.concat(getScale(picsize));
    // rotate
    //trafo.concat(getRotation(- getParameter("rot"), new Position(0.5*picsize.width, 0.5*picsize.height)));
    // mirror
    //if (hasFlag("hmir")) {
    //trafo.m00 = - trafo.m00;
    //}
    //if (hasFlag("vmir")) {
    //trafo.m11 = - trafo.m11;
    //}
    return trafo;
}

function parseMarks() {
    // returns marks array from current parameters
    var marks = new Array();
    var ma = getParameter("mk").split(";");
    for (var i = 0; i < ma.length ; i++) {
	var pos = ma[i].split("/");
	if (pos.length > 1) {
	    marks.push(new Position(pos[0], pos[1]));
	}
    }
    return marks;
}

function getAllMarks() {
    // returns a string with all marks in query format
    var marks = new Array();
    for (var i = 0; i < dlMarks.length; i++) {
	marks.push(cropFloat(dlMarks[i].x) + "/" + cropFloat(dlMarks[i].y));
    }
    return marks.join(";");
}

function addMark(x, y) {
    // add a mark
    dlMarks.push(new Position(x, y));
    setParameter("mk", getAllMarks());
}

function deleteMark() {
    // delete the last mark
    dlMarks.pop();
    setParameter("mk", getAllMarks());
}

function hasFlag(mode) {
    // returns if mode flag is set
    return (dlFlags[mode] && (dlFlags[mode] != null));
}

function addFlag(mode) {
    // add a mode flag
    dlFlags[mode] = mode;
}

function removeFlag(mode) {
    // remove a mode flag
    if (dlFlags[mode]) {
	dlFlags[mode] = null;
    }
}

function toggleFlag(mode) {
    // change a mode flag
    if (dlFlags[mode]) {
	dlFlags[mode] = null;
    } else {
	dlFlags[mode] = mode;
    }
}

function getAllFlags() {
    // returns a string with all flags in query format
    var fa = new Array();
    for (var f in dlFlags) {
	if ((f != "")&&(dlFlags[f] != null)) {
	    fa.push(f);
	}
    }
    return fa.join(",");
}

function parseFlags() {
    // sets dlFlags from the current parameters
    var flags = new Object();
    var fa = getParameter("mo").split(",");
    for (var i = 0; i < fa.length ; i++) {
	var f = fa[i];
	if (f != "") {
	    flags[f] = f;
	}
    }
    return flags;
}    

/*
 * Size class
 */
function Size(w, h) {
    this.width = parseFloat(w);
    this.height = parseFloat(h);
}

/*
 * Position class
 */
function Position(x, y) {
    this.x = parseFloat(x);
    this.y = parseFloat(y);
}

/*
 * Rectangle class
 */
function Rectangle(x, y, w, h) {
    this.x = parseFloat(x);
    this.y = parseFloat(y);
    this.width = parseFloat(w);
    this.height = parseFloat(h);
}
Rectangle.prototype.copy = function() {
    // returns a copy of this Rectangle
    return new Rectangle(this.x, this.y, this.width, this.height);
}
Rectangle.prototype.containsPosition = function(pos) {
    // returns if the given Position lies in this Rectangle
    return ((pos.x >= this.x)&&(pos.y >= this.y)&&(pos.x <= this.x+this.width)&&(pos.y <= this.y+this.width));
}
Rectangle.prototype.intersect = function(rect) {
    // returns the intersection of the given Rectangle and this one
    var sec = rect.copy();
    if (sec.x < this.x) {
	sec.width = sec.width - (this.x - sec.x);
	sec.x = this.x;
    }
    if (sec.y < this.y) {
	sec.height = sec.height - (this.y - sec.y);
	sec.y = this.y;
    }
    if (sec.x + sec.width > this.x + this.width) {
	sec.width = (this.x + this.width) - sec.x;
    }
    if (sec.y + sec.height > this.y + this.height) {
	sec.height = (this.y + this.height) - sec.y;
    }
    return sec;
}
Rectangle.prototype.fit = function(rect) {
    // returns a Rectangle that fits into this one (by moving first)
    var sec = rect.copy();
    sec.x = Math.max(sec.x, this.x);
    sec.x = Math.max(sec.x, this.x);
    if (sec.x + sec.width > this.x + this.width) {
	sec.x = this.x + this.width - sec.width;
    }
    if (sec.y + sec.height > this.y + this.height) {
	sec.y = this.y + this.height - sec.height;
    }
    return sec.intersect(this);
}

/*
 * Transform class
 */
function Transform() {
    this.m00 = 1.0;
    this.m01 = 0.0;
    this.m02 = 0.0;
    this.m10 = 0.0;
    this.m11 = 1.0;
    this.m12 = 0.0;
    this.m20 = 0.0;
    this.m21 = 0.0;
    this.m22 = 1.0;
}
Transform.prototype.concat = function(traf) {
    for (var i = 0; i < 3; i++) {
	for (var j = 0; j < 3; j++) {
	    var c = 0.0;
	    for (var k = 0; k < 3; k++) {
		c += traf["m"+i+k] * this["m"+k+j];
	    }
	    this["m"+i+j] = c;
	}
    }
}
Transform.prototype.transform = function(pos) {
    var x = this.m00 * pos.x + this.m01 * pos.y + this.m02;
    var y = this.m10 * pos.x + this.m11 * pos.y + this.m12;
    return new Position(x, y);
}
Transform.prototype.invtransform = function(pos) {
    var det = this.m00 * this.m11 - this.m01 * this.m10;
    var x = (this.m11 * pos.x - this.m01 * pos.y - this.m11 * this.m02 + this.m01 * this.m12) / det;
    var y = (- this.m10 * pos.x + this.m00 * pos.y + this.m10 * this.m02 - this.m00 * this.m12) / det;
    return new Position(x, y);
}
function getRotation(angle, pos) {
    var traf = new Transform();
    if (angle != 0) {
	var t = 2.0 * Math.PI * parseFloat(angle) / 360.0;
	traf.m00 = Math.cos(t);
	traf.m01 = - Math.sin(t);
	traf.m10 = Math.sin(t);
	traf.m11 = Math.cos(t);
	traf.m02 = pos.x - pos.x * Math.cos(t) + pos.y * Math.sin(t);
	traf.m12 = pos.y - pos.x * Math.sin(t) - pos.y * Math.cos(t);
    }
    return traf;
}
function getTranslation(pos) {
    var traf = new Transform();
    traf.m02 = pos.x;
    traf.m12 = pos.y;
    return traf;
}
function getScale(size) {
    var traf = new Transform();
    traf.m00 = size.width;
    traf.m11 = size.height;
    return traf;
}

function getElement(tagid) {
    // returns the named element object
    if (document.all) {
	return document.all[tagid];
    } else if (document.getElementById) {
	return document.getElementById(tagid);
    } else {
	return document[tagid];
    }
}    

function getElementSize(tagid) {
    // returns a Rectangle with the size and position of the named element
    var x = 0;
    var y = 0;
    var width = 0;
    var height = 0;
    var elem = getElement(tagid);
    if (elem.offsetWidth) {
	x = parseInt(elem.offsetLeft);
	y = parseInt(elem.offsetTop);
	width = parseInt(elem.offsetWidth);
	height = parseInt(elem.offsetHeight);
    } else {
	x = parseInt(elem.left);
	y = parseInt(elem.top);
	width = parseInt(elem.clip.width);
	height = parseInt(elem.clip.height);
    }
    return new Rectangle(x, y, width, height);
}

function moveElement(tagid, pos) {
    // moves the named element to the indicated position
    var elem = getElement(tagid);
    if (elem.style) {
	elem.style.left = pos.x;
	elem.style.top = pos.y;
    } else {
	alert("moveelement: no style property!");
    }
}

function showElement(tagid, show) {
    // shows or hides the named element
    var elem = getElement(tagid);
    if (elem.style) {
	if (show) {
	    elem.style.visibility = "visible";
	} else {
	    elem.style.visibility = "hidden";
	}
    } else {
	alert("showelement: no style property!");
    }
}

function registerMouseDown(tagid, handler) {
    // register a mouse down event handler on the indicated element
    if ( document.all ) {
	document.all[tagid].onmousedown = handler;
    } else if (document.getElementById) {
	document.getElementById(tagid).addEventListener("mousedown", handler, true);
    } else {
	document[tagid].captureEvents(Event.MOUSEDOWN);
	document[tagid].onmousedown = handler;
    }
}

function unregisterMouseDown(tagid, handler) {
    // unregister the mouse down event handler
    if ( document.all ) {
	document.all[tagid].onmousedown = null;
    } else if (document.getElementById) {
	document.getElementById(tagid).removeEventListener("mousedown", handler, true);
    } else {
	document[tagid].releaseEvents(Event.MOUSEDOWN);
    }
}

function registerMouseMove(tagid, handler) {
    // register a mouse move event handler on the indicated element
    if ( document.all ) {
	document.all[tagid].onmousemove = handler;
    } else if (document.getElementById) {
	document.getElementById(tagid).addEventListener("mousemove", handler, true);
    } else {
	document[tagid].captureEvents(Event.MOUSEMOVE);
	document[tagid].onmousemove = handler;
    }
}

function unregisterMouseMove(tagid, handler) {
    // unregister the mouse move event handler
    if ( document.all ) {
	document.all[tagid].onmousemove = null;
    } else if (document.getElementById) {
	document.getElementById(tagid).removeEventListener("mousemove", handler, true);
    } else {
	document[tagid].releaseEvents(Event.MOUSEMOVE);
    }
}

function registerKeyDown(handler) {
    // register a key down handler
    if ( document.all ) {
	this.document.onkeypress = handler
    } else if ( typeof(document.addEventListener) == "function" ) {
	this.document.addEventListener('keypress', handler, true);
    } else {
	window.captureEvents(Event.KEYDOWN);
	window.onkeydown = handler;
    }
}

function getWinSize() {
    // returns a Size with the current window size (from www.quirksmode.org)
    var wsize = new Size(100, 100);
    if (self.innerHeight)  {
	// all except Explorer
	wsize.width = self.innerWidth;
	wsize.height = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
	// Explorer 6 Strict Mode
	wsize.width = document.documentElement.clientWidth;
	wsize.height = document.documentElement.clientHeight;
    } else if (document.body) {
	// other Explorers
	wsize.width = document.body.clientWidth;
	wsize.height = document.body.clientHeight;
    }
    return wsize;
}

function bestPicSize(tagid) {
    // returns a Size with the best image size for the given tagid
    var inset = 5;
    var ps = getWinSize();
    var scaler = document.getElementById(tagid);
    ps.width = ps.width - scaler.offsetLeft - inset;
    ps.height = ps.height - scaler.offsetTop - inset;
    return ps;
}



function init() {
    // give a name to the window containing digilib - this way one can test if there is already a
    // digilib-window open and replace the contents of it (ex. digicat)
    top.window.name = "digilib";
    // put the query parameters (sans "&") in the parameters array
    parseParameters(location.search.slice(1));
    // treat special parameters
    dlMarks = parseMarks();
    dlArea = parseArea();
    dlFlags = parseFlags();

    //registerKeyDown(parseKeypress);
    
    placeMarks();

    focus();
    return true;
}


function display(detail) {
    // redisplay the page
    var queryString = getAllParameters(detail);
    location.href = location.protocol + "//" + location.host + location.pathname + "?" + queryString;
}


/*
 * Point class
 */
function Point() {
}
Point.prototype.setWithEvent = function(evt) {
    // set point values from event

    if ( document.all ) {

	this.pageX = parseInt(document.body.scrollLeft+event.clientX);
	this.pageY = parseInt(document.body.scrollLeft+event.clientY);

	this.x = this.pageX-parseInt(document.all.scaler.offsetLeft);
	this.y = this.pageY-parseInt(document.all.scaler.offsetTop);

	this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.all.scaler.offsetWidth));
	this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.all.scaler.offsetHeight));
    
    } else {

	this.pageX = parseInt(evt.pageX);
	this.pageY = parseInt(evt.pageY);

	if ( typeof(document.getElementById) == "function" ) {
      
	    this.x = this.pageX-parseInt(document.getElementById("scaler").offsetLeft);
	    this.y = this.pageY-parseInt(document.getElementById("scaler").offsetTop);
	    // top("2"+"::"+this.pageX+"::"+parseInt(document.getElementById("scaler").offsetLeft)+'::'+document.getElementById("scaler").offsetLeft);
	    this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.pic.offsetWidth));
	    this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.pic.offsetHeight));
      
	} else {

	    this.x = this.pageX-document.scaler.left;
	    this.y = this.pageY-document.scaler.top;

	    this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.scaler.clip.width));
	    this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.scaler.clip.height));
      
	}

  }

  return this;

}


function page(page, details) {

  if ( details == null ) {
    details = 1;
  }
  
  if ( page.indexOf('-') == 0 ) {
    if ( dlParams.pn.value > 1 ) {
      page = Math.max(parseInt(dlParams.pn.value) - parseInt(page.slice(1)), 1);
      dlParams.pn.value = page;
      display(details);
    } else {
      alert("You are already on the first page!");
    }

  } else if ( page.indexOf('+') == 0 ) {
    page = parseInt(dlParams.pn.value) + parseInt(page.slice(1));
    dlParams.pn.value = page;
    display(details);
  } else if ( page == parseInt(page) ) {
    dlParams.pn.value = parseInt(page);
    display(details);
  }

}



function ref(select) {
    // open a dialog with a reference to the current digilib set
    var hyperlinkRef = baseUrl + "?" + getAllParameters(9);
    if ( select == 0 ) {
	prompt("Link for LaTeX-documents", "\\href{" + hyperlinkRef + "}{TEXT}");
    } else if ( select == 1 ) {
	prompt("Link for HTML-documents", hyperlinkRef);
    }
}


function mark() {
    // add a mark where clicked
    if ( dlMarks.length > 7 ) {
	alert("Only 8 marks are possible at the moment!");
	return;
    }

    function markEvent(evt) {
	// event handler adding a new mark 
	unregisterMouseDown("scaler", markEvent);
	var point = new Point();
	point.setWithEvent(evt);
	var point2 = dlTrafo.invtransform(new Position(point.x, point.y));
	//alert("p0: "+point.x+", "+point.y);
	//alert("p1: "+point.relX+", "+point.relY+" p2: "+point2.x+", "+point2.y);
	var point3 = dlTrafo.transform(point2);
	//alert("p3: "+point3.x+", "+point3.y);
	//addMark(point.relX, point.relY);
	addMark(point2.x, point2.y);
	placeMarks();
    }

    // starting event capture
    registerMouseDown("scaler", markEvent);
}

function unmark() {
    // remove the last mark
    deleteMark();
    placeMarks();
}

function placeMarks() {
    // put the visible marks on the image
    var mark_count = dlMarks.length;
    var picelem = getElement("pic");
    // make shure the image is loaded so we know its size
    if (picelem && picelem.complete == false) {
	setTimeout("placeMarks()", 100);
    } else {
	var picsize = getElementSize("scaler");
	dlTrafo = parseTrafo();
	for (var i = 0; i < 8; i++) {
	    if (i < mark_count) {
		if (dlArea.containsPosition(dlMarks[i])) {
		    var mpos = dlTrafo.transform(dlMarks[i]);
		    //alert("mark: "+mpos.x+" "+mpos.y);
		    // suboptimal to place -5 pixels and not half size of mark-image
		    mpos.x = mpos.x + picsize.x -5;
		    mpos.y = mpos.y + picsize.y -5;
		    moveElement("dot"+i, mpos);
		    showElement("dot"+i, true);
		}
	    } else {
		// hide the other marks
		showElement("dot"+i, false);
	    }
	}
    }
}


function zoomPoint(inout) {
    // zoom image in or out around the clicked point
    window.focus();
    var zoom = ZOOMFACTOR;
    if (inout < 0) {
	zoom = 1/ZOOMFACTOR;
    }

    function zoomPointEvent(evt) {
	// take new center and set zoom parameters
	var point = new Point();
	point.setWithEvent(evt);
	var neww = Math.min(dlArea.width * (1/zoom), 1.0);
	var newh = Math.min(dlArea.height * (1/zoom), 1.0);
	var newx = point.relX - 0.5 * neww;
	var newy = point.relY - 0.5 * newh;
	var zoomarea = new Rectangle(newx, newy, neww, newh);
	//alert("za1: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height);
	// check bounds
	zoomarea = dlMaxArea.fit(zoomarea);
	//alert("za2: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height);
	// set parameters
	setParameter("wx", cropFloat(zoomarea.x));
	setParameter("wy", cropFloat(zoomarea.y));
	setParameter("ww", cropFloat(zoomarea.width));
	setParameter("wh", cropFloat(zoomarea.height));
	parseArea();
	display(3);
    }
    // starting event capture
    registerMouseDown("scaler", zoomPointEvent);
}


function zoomArea() {
    var click = 1;
    var pt1, pt2;
    var eck1pos, eck2pos, eck3pos, eck4pos;
    window.focus();

    function zoomClick(evt) {
	// mouse click handler
	if (click == 1) {
	    // first click -- start moving
	    click = 2;
	    pt1 = new Point();
	    pt1.setWithEvent(evt);
	    pt2 = pt1;
	    eck1pos = new Position(pt1.pageX, pt1.pageY);
	    eck2pos = new Position(pt1.pageX - 12, pt1.pageY);
	    eck3pos = new Position(pt1.pageX, pt1.pageY - 12);
	    eck4pos = new Position(pt1.pageX- 12, pt1.pageY - 12);
	    moveElement("eck1", eck1pos);
	    moveElement("eck2", eck2pos);
	    moveElement("eck3", eck3pos);
	    moveElement("eck4", eck4pos);
	    showElement("eck1", true);
	    showElement("eck2", true);
	    showElement("eck3", true);
	    showElement("eck4", true);
	    registerMouseMove("scaler", zoomMove);
	    registerMouseMove("eck4", zoomMove);
	} else {
	    // second click -- end moving
	    pt2 = new Point();
	    pt2.setWithEvent(evt);
	    showElement("eck1", false);
	    showElement("eck2", false);
	    showElement("eck3", false);
	    showElement("eck4", false);
	    unregisterMouseMove("scaler", zoomMove);
	    unregisterMouseMove("eck4", zoomMove);
	    unregisterMouseDown("scaler", zoomClick);
	    unregisterMouseDown("eck4", zoomClick);
	    var ww = pt2.relX-pt1.relX;
	    var wh = pt2.relY-pt1.relY;
	    if ((ww > 0)&&(wh > 0)) {
		setParameter("wx", cropFloat(pt1.relX));
		setParameter("wy", cropFloat(pt1.relY));
		setParameter("ww", cropFloat(ww));
		setParameter("wh", cropFloat(wh));
		parseArea();
		display(3);
	    }
	}
    }

    function zoomMove(evt) {
	// mouse move handler
	pt2 = new Point();
	pt2.setWithEvent(evt);
	// restrict marks to move right and down
	eck1pos = new Position(pt1.pageX, pt1.pageY);
	eck2pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, pt1.pageY);
	eck3pos = new Position(pt1.pageX, Math.max(pt1.pageY, pt2.pageY)-12);
	eck4pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, Math.max(pt1.pageY, pt2.pageY)-12);
	moveElement("eck1", eck1pos);
	moveElement("eck2", eck2pos);
	moveElement("eck3", eck3pos);
	moveElement("eck4", eck4pos);
    }
    // starting event capture
    registerMouseDown("scaler", zoomClick);
    registerMouseDown("eck4", zoomClick);
}

function zoomFullpage() {
    // zooms out to show the whole image
    setParameter("wx", 0.0);
    setParameter("wy", 0.0);
    setParameter("ww", 1.0);
    setParameter("wh", 1.0);
    parseArea();
    display(3);
}


function moveTo() {

    if ( (parseFloat(dlParams.ww.value) == 1.0) && (parseFloat(dlParams.wh.value) == 1.0) ) {
	alert("This function is only available when zoomed in!");
	return;
    }

    function moveToEvent(event) {
	// move to handler
	var point = new Point();
	point.setWithEvent(eventt);
	var newarea = new Rectangle(point.relX-0.5*dlParams.ww.value, point.relY-0.5*dlParams.wh.value, dlArea.width, dlArea.height);
	newarea = dlMaxArea.intersect(newarea);
	// stopping event capture
	unregisterMouseDown("scaler", moveToEvent);
	// set parameters
	setParameter("wx", cropFloat(newarea.x));
	setParameter("wy", cropFloat(newarea.y));
	setParameter("ww", cropFloat(newarea.width));
	setParameter("wh", cropFloat(newarea.height));
	display(3);
    }
    // starting event capture
    registerMouseDown("scaler", moveToEvent);
}

function setSize(factor) {
    // change the size of the image
    setParameter("ws", cropFloat(factor));
    display(3);
}

function setQuality(qual) {
    // set the image quality
    for (var i = 0; i < 3; i++) {
	removeFlag("q"+i);
	if (i == qual) {
	    addFlag("q"+i);
	}
    }
    setParameter("mo", getAllFlags());
    display(3);
}    

function mirror(dir) {
    // mirror the image horizontally or vertically
    if (dir == "h") {
	toggleFlag("hmir");
    } else {
	toggleFlag("vmir");
    }
    setParameter("mo", getAllFlags());
    display(3);
}

function parseKeypress(evt) {
    // capturing keypresses for next and previous page
    if ( document.all ) {
  	if ( event.keyCode == 110 ) {
	    page('+1');
  	}
  	if ( event.keyCode == 98 ) {
	    page('-1');
  	}
  	document.cancelBubble = true;
    } else {
  	if ( evt.charCode == 110 ) {
	    page('+1');
	} else if ( evt.charCode == 98 ) {
	    page('-1');
	} else if ( evt.which == 110 ) {
	    page('+1');
  	} else if ( evt.which == 98 ) {
	    // does not work currentlyfor Opera, because it catches the 'b'-key on it's own
	    // have to change the key or find another way - luginbuehl
	    page('-1');
  	}
    }
}