# HG changeset patch
# User robcast
# Date 1138052189 -3600
# Node ID a6c83fa262b2b7b968c6ef3470f6df161f010587
# Parent  4255c09a8147337d535c42093640efda6383880b
still somewhat experimental intermediary release
- Digilib is now an object with methods
- in theory we could now have more than one digilib instance on a page
- for compatibility one instance is created and wrapper methods exist
- setting a mark recenters the view for some (unrelated) reason

diff -r 4255c09a8147 -r a6c83fa262b2 client/digitallibrary/greyskin/diginew.jsp
--- a/client/digitallibrary/greyskin/diginew.jsp	Mon Jan 23 18:29:52 2006 +0100
+++ b/client/digitallibrary/greyskin/diginew.jsp	Mon Jan 23 22:36:29 2006 +0100
@@ -109,60 +109,30 @@
 	function reflectImageStatus() {
 		if (hasFlag("hmir")) setOnImage("hmir", "mirror-horizontal-on.png");
 		if (hasFlag("vmir")) setOnImage("vmir", "mirror-vertical-on.png");
-		if (dlParams.isSet("brgt"))
-			setOnImage("brgt", "brightness-on.png", dlParams.get("brgt"));
-		if (dlParams.isSet("cont"))
-			setOnImage("cont", "contrast-on.png", dlParams.get("cont"));
-		if (dlParams.isSet("rot"))
-			setOnImage("rot", "rotate-on.png", dlParams.get("rot"));
-		if (dlParams.isSet("rgb"))
-			setOnImage("rgb", "rgb-on.png", dlParams.get("rgb"));
+		if (hasParameter("brgt"))
+			setOnImage("brgt", "brightness-on.png", getParameter("brgt"));
+		if (hasParameter("cont"))
+			setOnImage("cont", "contrast-on.png", getParameter("cont"));
+		if (hasParameter("rot"))
+			setOnImage("rot", "rotate-on.png", getParameter("rot"));
+		if (hasParameter("rgb"))
+			setOnImage("rgb", "rgb-on.png", getParameter("rgb"));
 		}
     
-	function onImgLoad() {
-		// make sure the image is loaded so we know its size
-    	    if (defined(scalerImg.complete) && !scalerImg.complete && !browserType.isN4 ) {
-			setTimeout("onImgLoad()", 100);
-			waited += 100;
-			return;
-		}
-        dlTrafo = parseTrafo(scalerImg);
-        // display marks
-        renderMarks();
-		reflectImageStatus();	// adjust icons
-		showOptions(isOptionDivVisible);
-		showBirdDiv(isBirdDivVisible);
-		showArrows();		// show arrow overlays for zoom navigation
-		moveCenter(true);	// click to move point to center
-		// new Slider("sizes", 1, 5, 2);
-        focus();
-		}
 
 	// initialize digilib; called by body.onload
 	function onBodyLoad() {
 		document.id = 'digilib';
-        scalerDiv = getElement("scaler", true);
-        scalerImg = getElement("pic", true);
-        if (scalerImg == null && scalerDiv) {
-            // in N4 pic is in the scaler layer
-            scalerImg = scalerDiv.document.images[0];
-        }
-        if ((!scalerImg)||(!scalerDiv)) {
-            alert("Sorry, digilib doesn't work here!");
-            return false;
-        }
-		setScalerImage();	// ruft auch dl_init() / initScaler auf
-		loadBirdImage();	// lädt das Bird's Eye Bild
-		//onImgLoad();
-		}
+        dl.onLoad();
+        dl.showOptions(isOptionDivVisible);
+        reflectImageStatus(); // adjust icons
+	}
 
 	function onBodyUnload() {
 		// alert(strObject(cookie));
 		cookie.store();
 		}
-	// base_init();		// now done on loading baselib.js
 
-    initParameters(); // load default values and detail
 	</script>
 </head>
 
@@ -249,7 +219,7 @@
 	<div class="button">
 		<a
 			class="icon"
-			href="javascript:zoomBy(1.4)"
+			href="javascript:dl.zoomBy(1.4)"
 			>
 
 			<img
diff -r 4255c09a8147 -r a6c83fa262b2 client/digitallibrary/greyskin/dllib.js
--- a/client/digitallibrary/greyskin/dllib.js	Mon Jan 23 18:29:52 2006 +0100
+++ b/client/digitallibrary/greyskin/dllib.js	Mon Jan 23 22:36:29 2006 +0100
@@ -26,6 +26,57 @@
 digilibVersion = "Digilib NG";
 dllibVersion = "2.040";
 
+MAX_AREA = new Rectangle(0.0, 0.0, 1.0, 1.0);
+
+// default inset (for scalerImg relativ to scalerDiv 
+INSET = 40; // because of scrollbars of main window and scaler [Firefox bug?]
+
+// mouse drag area that counts as one click 
+MIN_AREA_SIZE = 3 * 3 + 1;
+
+// standard zoom factor
+ZOOMFACTOR = Math.sqrt(2);
+
+// bird's eye view dimensions
+BIRD_MAXX = 100;
+BIRD_MAXY = 100;
+
+// with of arrow bars
+ARROW_WIDTH = 32;
+
+// with of calibration bar
+CALIBRATION_WIDTH = 64;
+
+function identify() {
+        // used for identifying a digilib instance
+        // Relato uses that function - lugi
+        return digilibVersion;
+}
+
+function createMarkDiv(index) {
+    var div = document.createElement("div");
+    div.className = "mark";
+    div.id = "mark" + index;
+    div.innerHTML = index + 1;
+    document.body.appendChild(div);
+    return div;
+}
+
+function bestPicSize(elem, inset) {
+    // returns a Size with the best image size for the given element
+    if (! defined(inset)) {
+        inset = 25;
+    }
+    var ws = getWinSize();
+    var es = getElementPosition(elem);
+    if (es) {
+        ws.width = ws.width - es.x - inset;
+        ws.height = ws.height - es.y - inset;
+    }
+    return ws;
+}
+
+
 /****************************************************
  * digilib specific classes (must be defined first)
  ****************************************************/
@@ -57,14 +108,15 @@
    	}
     return ma.join(",");
 }
-Marks.prototype.addEvent = function(evt) {
+Marks.prototype.addEvent = function(evt, digilib) {
     // add a mark from a screen event
-    var pos = dlTrafo.invtransform(evtPosition(evt));
+    if (!digilib) digilib = dl;
+    var pos = digilib.trafo.invtransform(evtPosition(evt));
     this.push(pos);
 }
 
 /*
- * DLParameters -- digilibs own parameter class
+ * DLParameters -- digilib parameter class
  */
 function DLParameters() {
 	// flags for parameter sets
@@ -77,132 +129,8 @@
 	this.PARAM_MARK = 64;
 	this.PARAM_PAGES = 128;
 	this.PARAM_ALL = 255;
-	return this;
-}
-DLParameters.prototype = new Parameters();
-// move the inherited getAll because we need it later
-DLParameters.prototype._getAll = Parameters.prototype.getAll;
-DLParameters.prototype.getAll = function(paDetail, moDetail) {
-	// get Flags and Marks first
-    var mo = dlFlags.getAll(moDetail);
-    this.set("mo", mo);
-    var mk = dlMarks.getAll();
-    this.set("mk", mk);
-    var ret = this._getAll(paDetail);
-	return ret;
-}
-
-/*
- * DLModes -- digilibs own flags class
- */
-function DLFlags() {
-	// flags for mode sets
-	this.MODE_QUAL = 1;
-	this.MODE_SIZE = 2;
-	this.MODE_MIR = 4;
-	this.MODE_OTHER = 128;
-	this.MODE_ALL = 255;
-	return this;
-}
-// inherits from Flags
-DLFlags.prototype = new Flags();
-
-/********************************
- * global variables
- ********************************/
- 
-var isDigilibInitialized = false;    // gets set to true in dl_param_init
-
-var dlParams;
-var dlTrafo;
-var dlMaxArea = new Rectangle(0.0, 0.0, 1.0, 1.0); // should be CONST
-var dlArea;
-var dlFlags;
-var dlMarks;
-
-// global elements
-var scalerDiv = null;
-var scalerImg = null;
-
-// default inset (for scalerImg relativ to scalerDiv 
-INSET = 40; // because of scrollbars of main window and scaler [Firefox bug?]
-
-/* old parameter function compatibility stuff */
-function newParameter(a,b,c) {return dlParams.define(a,b,c)};
-function resetParameter(a) {return dlParams.reset(a)};
-function deleteParameter(a) {return dlParams.remove(a)};
-function getParameter(a) {return dlParams.get(a)};
-function setParameter(a,b,c) {return dlParams.set(a,b,c)};
-function hasParameter(a) {return dlParams.isSet(a)};
-function getAllParameters(a) {return dlParams.getAll(a)};
-getQueryString = getAllParameters;
-function parseParameters(a) {return dlParams.parse(a)};
-function getAllMarks() {return dlMarks.getAll()};
-getMarksQueryString = getAllMarks;
-function addMark(evt) {return dlMarks.addEvent(evt)};
-function deleteMark() {return dlMarks.pop()};
-function deleteAllMarks() {return dlMarks = new Marks()};
-function hasFlag(mode) {return dlFlags.get(mode)};
-function addFlag(mode) {return dlFlags.set(mode)};
-function removeFlag(mode) {return dlFlags.reset(mode)};
-function toggleFlag(mode) {return dlFlags.toggle(mode)};
-function getAllFlags() {return dlFlags.getAll()};
-
-
-
-// mouse drag area that counts as one click 
-MIN_AREA_SIZE = 3 * 3 + 1;
-
-// standard zoom factor
-ZOOMFACTOR = Math.sqrt(2);
-
-// bird's eye view dimensions
-BIRD_MAXX = 100;
-BIRD_MAXY = 100;
-
-// with of arrow bars
-ARROW_WIDTH = 32;
-
-// with of calibration bar
-CALIBRATION_WIDTH = 64;
-
-function identify() {
-        // used for identifying a digilib instance
-        // Relato uses that function - lugi
-        return digilibVersion;
-}
-
-/*
- * more parameter handling
- */
-
-function parseArea() {
-    // returns area Rectangle from current parameters
-    return new Rectangle(
-        dlParams.get("wx"),
-        dlParams.get("wy"),
-        dlParams.get("ww"),
-        dlParams.get("wh"));
-}
-
-function setParamFromArea(rect) {
-    // sets digilib wx etc. from rect
-    dlParams.set("wx", cropFloat(rect.x));
-    dlParams.set("wy", cropFloat(rect.y));
-    dlParams.set("ww", cropFloat(rect.width));
-    dlParams.set("wh", cropFloat(rect.height));
-    return true;
-}
-
-function initParameters() {
-    // initialisation before onload
-    if (!baseLibVersion) alert("ERROR: baselib.js not loaded!");
-    if (isDigilibInitialized) return false;    // dl_param_init was already run 
-    dlParams = new DLParameters();
-    dlFlags = new DLFlags();
-    dlMarks = new Marks();
 	/* request parameters */
-	with (dlParams) {
+	with (this) {
 	// file
 	    define('fn', '',    PARAM_FILE);
 	    define('pn', '1',   PARAM_FILE);
@@ -229,9 +157,35 @@
 	    define('pt', '0', PARAM_PAGES);
 	// size
 	    define('ws', '1.0', PARAM_SIZE);
-    }
+	}
+	return this;
+}
+DLParameters.prototype = new Parameters();
+// move the inherited getAll because we need it later
+DLParameters.prototype._getAll = Parameters.prototype.getAll;
+DLParameters.prototype.getAll = function(paDetail, moDetail, digilib) {
+	// get Flags and Marks first
+	if (!digilib) digilib = dl;
+    var mo = digilib.flags.getAll(moDetail);
+    this.set("mo", mo);
+    var mk = digilib.marks.getAll();
+    this.set("mk", mk);
+    var ret = this._getAll(paDetail);
+	return ret;
+}
+
+/*
+ * DLModes -- digilib flags class
+ */
+function DLFlags() {
+	// flags for mode sets
+	this.MODE_QUAL = 1;
+	this.MODE_SIZE = 2;
+	this.MODE_MIR = 4;
+	this.MODE_OTHER = 128;
+	this.MODE_ALL = 255;
     /* mode flags */
-    with (dlFlags) {
+    with (this) {
 	    define('q0', MODE_QUAL);
 	    define('q1', MODE_QUAL);
 	    define('q2', MODE_QUAL);
@@ -241,67 +195,71 @@
 	    define('vmir', MODE_MIR);
 	    define('hmir', MODE_MIR);
 	}
-    // parse parameters
-    parseAllParameters();
-    isDigilibInitialized = true;
+	return this;
 }
+// inherits from Flags
+DLFlags.prototype = new Flags();
+
 
-/* **********************************************
- *     parse parameters routines
- * ******************************************** */
+/*
+ * Digilib -- digilib base class
+ */
+function Digilib() {
+    if (!baseLibVersion) alert("ERROR: baselib.js not loaded!");
+    this.trafo = null;
+	// page elements
+    this.scalerDiv = null;
+    this.scalerImg = null;
+    /* parse parameters */
+    // put the query parameters (sans "?") in the parameters array
+    this.params = new DLParameters();
+    this.params.parse(location.search.slice(1));
+    // treat special parameters
+    this.area = this.parseArea();
+    this.marks = new Marks();
+    this.marks.parse(this.params.get("mk"));
+    this.flags = new DLFlags();
+    this.flags.parse(this.params.get("mo"));
 
-function parseTrafo(elem) {
+	return this;
+}
+Digilib.prototype.parseArea = function() {
+    // returns area Rectangle from current parameters
+    return new Rectangle(
+        this.params.get("wx"),
+        this.params.get("wy"),
+        this.params.get("ww"),
+        this.params.get("wh"));
+}
+Digilib.prototype.setParamFromArea = function(rect) {
+    // sets digilib wx etc. from rect
+    this.params.set("wx", cropFloat(rect.x));
+    this.params.set("wy", cropFloat(rect.y));
+    this.params.set("ww", cropFloat(rect.width));
+    this.params.set("wh", cropFloat(rect.height));
+    return true;
+}
+Digilib.prototype.parseTrafo = function(elem) {
     // returns Transform from current dlArea and picsize
     var picsize = getElementRect(elem);
     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)));
+    trafo.concat(getTranslation(new Position(-this.area.x, -this.area.y)));
+    trafo.concat(getScale(new Size(1/this.area.width, 1/this.area.height)));
     // scale to screen size
     trafo.concat(getScale(picsize));
     trafo.concat(getTranslation(picsize));
     // FIX ME: Robert, kannst Du mal nachsehen, ob das folgende tut, was es soll?
     // oder gibt es dafuer neuen Code? -- ROC: Bisher funktioniert es nicht!
     // rotate
-    //var rot = getRotation(- dlParams.get("rot"), new Position(0.5*picsize.width, 0.5*picsize.height));
+    //var rot = getRotation(- dl.params.get("rot"), new Position(0.5*picsize.width, 0.5*picsize.height));
     //trafo.concat(rot);
     // mirror
     //if (hasFlag("hmir")) trafo.m00 = - trafo.m00; // ??
     //if (hasFlag("vmir")) trafo.m11 = - trafo.m11; // ??
     return trafo;
 }
-
-/* **********************************************
- *     marks routines
- * ******************************************** */
-
-function createMarkDiv(index) {
-    var div = document.createElement("div");
-    div.className = "mark";
-    div.id = "mark" + index;
-    div.innerHTML = index + 1;
-    document.body.appendChild(div);
-    return div;
-}
-
-
-
-
-function bestPicSize(elem, inset) {
-    // returns a Size with the best image size for the given element
-    if (! defined(inset)) {
-        inset = 25;
-    }
-    var ws = getWinSize();
-    var es = getElementPosition(elem);
-    if (es) {
-        ws.width = ws.width - es.x - inset;
-        ws.height = ws.height - es.y - inset;
-    }
-    return ws;
-}
-
-function setDLParam(e, s, relative) {
+Digilib.prototype.setDLParam = function(e, s, relative) {
     // sets parameter based on HTML event
     var nam;
     var val;
@@ -313,84 +271,79 @@
         val = s.value;
     }
     if (nam && val) {
-        dlParams.set(nam, val, relative);
+        dl.params.set(nam, val, relative);
         display();
     } else {
         alert("ERROR: unable to process event!");
     }
     return true;
 }
-
-
-/* **********************************************
- *     digilib specific routines
- * ******************************************** */
-
-
-function parseAllParameters() {
-    // put the query parameters (sans "?") in the parameters array
-    dlParams.parse(location.search.slice(1));
-    // treat special parameters
-    dlMarks.parse(dlParams.get("mk"));
-    dlArea = parseArea();
-    dlFlags.parse(dlParams.get("mo"));
+Digilib.prototype.onLoad = function() {
+	// initialize digilib; called by body.onload
+	this.scalerDiv = getElement("scaler", true);
+    this.scalerImg = getElement("pic", true);
+    if (this.scalerImg == null && this.scalerDiv) {
+        // in N4 pic is in the scaler layer
+        this.scalerImg = this.scalerDiv.document.images[0];
+    }
+    if ((!this.scalerImg)||(!this.scalerDiv)) {
+        alert("Sorry, digilib doesn't work here!");
+        return false;
+    }
+	this.setScalerImage();	// setzt auch onImgLoad
+	this.loadBirdImage();	// l?dt das Bird's Eye Bild
 }
-
-function dl_param_init() {
-    return true;
-}
-
-function dl_init() {
-    // initalisation on load
-    if (!isDigilibInitialized) dl_param_init();
-    // wait for image to load and display marks
-    renderMarks();
-    // done
-    focus();
-}
-
-function setScalerImage(detail) {
+Digilib.prototype.setScalerImage = function(detail) {
 	// set the scaler image source (needs the browser size)
-    if (!scalerDiv) scalerDiv = getElement("scaler");
-    if (!scalerImg) scalerImg = getElement("pic");
-    var picsize = bestPicSize(scalerDiv, 50);
+    var picsize = bestPicSize(this.scalerDiv, 50);
     var src = "../servlet/Scaler?" 
-        + dlParams.getAll(dlParams.PARAM_ALL & ~(dlParams.PARAM_MARK | dlParams.PARAM_PAGES))
+        + this.params.getAll(this.params.PARAM_ALL & ~(this.params.PARAM_MARK | this.params.PARAM_PAGES))
         + "&dw=" + picsize.width
         + "&dh=" + picsize.height;
     // debug(src);
-    scalerImg.onload = onImgLoad;
-    scalerImg.src = src;
-    //initScaler();    // dl_init braucht die endgueltigen Masze des pic Elements
+    this.scalerImg.onload = onImgLoad;
+    this.scalerImg.src = src;
+
+	var digilib = this;
+	// this is a local callback function that can use the current scope
+    function onImgLoad() {
+		// make sure the image is loaded so we know its size
+	    if (defined(digilib.scalerImg.complete) && !digilib.scalerImg.complete && !digilib.browserType.isN4 ) {
+			alert("ERROR: the image seems not to be complete!?");
+		}
+	    digilib.trafo = digilib.parseTrafo(digilib.scalerImg);
+	    // display marks
+	    digilib.renderMarks();
+		digilib.showBirdDiv(isBirdDivVisible);
+		digilib.showArrows();		// show arrow overlays for zoom navigation
+		digilib.moveCenter(true);	// click to move point to center
+		// new Slider("sizes", 1, 5, 2);
+	    focus();
+	}
 }
-
-function display(detail, moDetail) {
+Digilib.prototype.display = function(detail, moDetail) {
     // redisplay the page
-    var queryString = dlParams.getAll(detail, moDetail);
+    var queryString = this.params.getAll(detail, moDetail);
 	location.href
         = location.protocol + "//"
     	    + location.host
     	    + location.pathname
         + "?" + queryString;
 }
-
-/* **********************************************
- *     interactive digilib functions
- * ******************************************** */
-function renderMarks() {
+Digilib.prototype.renderMarks = function() {
     // make sure the image is loaded so we know its size
-    if (!dlTrafo) {
+    if (!this.trafo) {
     		alert("ERROR: cannot render marks!");
     		return;
     	}
     // debugProps(dlArea, "dlArea");
-    for (var i = 0; i < dlMarks.length; i++) {
-    	var div = getElement("mark" + i, true) || createMarkDiv(i);
-    	var mark = dlMarks[i];
-    	// debugProps(mark, "mark");
-    	if (dlArea.containsPosition(mark)) {
-        	var mpos = dlTrafo.transform(mark); 
-        	// debugProps(mark, "mpos");
+    for (var i = 0; i < this.marks.length; i++) {
+	    	var div = getElement("mark" + i, true) || createMarkDiv(i);
+	    	var mark = this.marks[i];
+	    	// debugProps(mark, "mark");
+	    	if (this.area.containsPosition(mark)) {
+	        	var mpos = this.trafo.transform(mark); 
+	        	// debugProps(mark, "mpos");
 	       	// suboptimal to place -5 pixels and not half size of mark-image
 	       	// better not hide the marked spot (MR)
 	       	// mpos.x = mpos.x -5;
@@ -404,45 +357,52 @@
     }
 }
 
-function setMark(reload) {
+/* **********************************************
+ *     interactive digilib functions
+ * ******************************************** */
 
+Digilib.prototype.setMark = function(reload) {
+    // add a mark where clicked
+    window.focus();
+    this.moveCenter(false);
+    // start event capturing
+    registerEvent("mousedown", this.scalerDiv, markEvent);
+
+	// our own reference to this for the local function
+	var digilib = this;
+	
     function markEvent(evt) {
     // event handler adding a new mark
-        unregisterEvent("mousedown", scalerDiv, markEvent);
-        dlMarks.addEvent(evt);
+        unregisterEvent("mousedown", digilib.scalerDiv, markEvent);
+        digilib.marks.addEvent(evt);
         if ( defined(reload) && !reload ) {
             // don't redisplay
-            renderMarks();
-            return;
+            digilib.renderMarks();
+            return stopEvent(evt);
         }
-        display();
+        digilib.display();
         return stopEvent(evt);
     }
     
-    // add a mark where clicked
-    window.focus();
-    moveCenter(false);
-    // start event capturing
-    registerEvent("mousedown", scalerDiv, markEvent);
 }
 
-function removeMark(reload) {
+Digilib.prototype.removeMark = function(reload) {
     // remove the last mark
-    dlMarks.pop();
+    this.marks.pop();
     if (defined(reload)&&(!reload)) {
         // don't redisplay
-        renderMarks();
+        this.renderMarks();
         return;
     }
-    display();
+    this.display();
 }
 
-function zoomArea() {
+Digilib.prototype.zoomArea = function() {
     var pt1, pt2;
     var zoomdiv = getElement("zoom");
     var overlay = getElement("overlay");
     // use overlay div to avoid <img> mousemove problems
-    var picRect = getElementRect(scalerImg);
+    var picRect = getElementRect(this.scalerImg);
     // FIX ME: is there a way to query the border width from CSS info?
     // rect.x -= 2; // account for overlay borders
     // rect.y -= 2;
@@ -450,14 +410,17 @@
     showElement(overlay, true);
     // start event capturing
     registerEvent("mousedown", overlay, zoomStart);
-    registerEvent("mousedown", scalerImg, zoomStart);
+    registerEvent("mousedown", this.scalerImg, zoomStart);
     window.focus();
 
+	// our own reference to this for the local function
+	var digilib = this;
+	
 // mousedown handler: start moving
     function zoomStart(evt) {
         pt1 = evtPosition(evt);
         unregisterEvent("mousedown", overlay, zoomStart);
-        unregisterEvent("mousedown", scalerImg, zoomStart);
+        unregisterEvent("mousedown", digilib.scalerImg, zoomStart);
         // setup and show zoom div
         moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0));
         showElement(zoomdiv, true);
@@ -482,11 +445,11 @@
         unregisterEvent("mouseup", document, zoomMove);
         // clip and transform
         clickRect.clipTo(picRect);
-        var area = dlTrafo.invtransform(clickRect);
-        setParamFromArea(area);
+        var area = digilib.trafo.invtransform(clickRect);
+        digilib.setParamFromArea(area);
         // zoomed is always fit
-        dlParams.set("ws", 1);
-        display();
+        digilib.params.set("ws", 1);
+        digilib.display();
         return stopEvent(evt);
     }
     
@@ -502,90 +465,87 @@
     	}
 }
 
-function zoomBy(factor) {
+Digilib.prototype.zoomBy = function(factor) {
     // zooms by the given factor
-    var newarea = dlArea.copy();
+    var newarea = this.area.copy();
     newarea.width /= factor;
     newarea.height /= factor;
-    newarea.x -= 0.5 * (newarea.width - dlArea.width);
-    newarea.y -= 0.5 * (newarea.height - dlArea.height);
-    newarea = dlMaxArea.fit(newarea);
-    setParamFromArea(newarea);
-    display();
+    newarea.x -= 0.5 * (newarea.width - this.area.width);
+    newarea.y -= 0.5 * (newarea.height - this.area.height);
+    newarea = MAX_AREA.fit(newarea);
+    this.setParamFromArea(newarea);
+    this.display();
 }
 
 
-function zoomFullpage() {
+Digilib.prototype.zoomFullpage = function() {
     // zooms out to show the whole image
-    dlParams.set("wx", 0.0);
-    dlParams.set("wy", 0.0);
-    dlParams.set("ww", 1.0);
-    dlParams.set("wh", 1.0);
-    display();
+    this.params.set("wx", 0.0);
+    this.params.set("wy", 0.0);
+    this.params.set("ww", 1.0);
+    this.params.set("wh", 1.0);
+    this.display();
 }
 
 
-function moveCenter(on) {
+Digilib.prototype.moveCenter = function(on) {
     // move visible area so that it's centered around the clicked point
-    if (isFullArea()) return; // nothing to do
+    if (this.isFullArea()) return; // nothing to do
     // starting event capture
-    if (on) registerEvent("mousedown", scalerImg, moveCenterEvent);
-    else  unregisterEvent("mousedown", scalerImg, moveCenterEvent);
+    if (on) registerEvent("mousedown", this.scalerImg, moveCenterEvent);
+    else  unregisterEvent("mousedown", this.scalerImg, moveCenterEvent);
     window.focus();
+    
+	// our own reference to this for the local function
+	var digilib = this;
+
+	function moveCenterEvent(evt) {
+	    // move to handler
+	    var pt = digilib.trafo.invtransform(evtPosition(evt));
+	    var newarea = digilib.area.copy();
+		newarea.setCenter(pt);
+	    newarea.stayInside(MAX_AREA);
+	    // newarea = dlMaxArea.fit(newarea);
+	    // debugProps(newarea, "newarea");
+	    // debugProps(dlArea, "dlArea");
+	    if (newarea.equals(digilib.area)) return; // keep event handler
+	    unregisterEvent("mousedown", digilib.scalerImg, moveCenterEvent);
+	    // set parameters
+	    digilib.setParamFromArea(newarea);
+		digilib.display();
+	}
 }
 
-function moveCenterEvent(evt) {
-    // move to handler
-    var pt = dlTrafo.invtransform(evtPosition(evt));
-    var newarea = new Rectangle(
-        pt.x - 0.5 * dlArea.width,
-        pt.y - 0.5 * dlArea.height,
-        dlArea.width,
-        dlArea.height
-        );
-    newarea.stayInside(dlMaxArea);
-    // newarea = dlMaxArea.fit(newarea);
-    // debugProps(newarea, "newarea");
-    // debugProps(dlArea, "dlArea");
-    if (newarea.equals(dlArea)) return; // keep event handler
-    unregisterEvent("mousedown", scalerImg, moveCenterEvent);
-    // set parameters
-    setParamFromArea(newarea);
-    parseArea();
-    display();
-}
-
-function isFullArea(area) {
-    if (!area) area = dlArea;
+Digilib.prototype.isFullArea = function(area) {
+    if (!area) area = this.area;
     // pixel by pixel is not always full area
     return (area.width == 1.0) && (area.height == 1.0) && ! hasFlag("clip");
 }
 
-function canMove(movx, movy) {
-    if (isFullArea()) return false;
-    var x2 = dlArea.x + dlArea.width;
-    var y2 = dlArea.y + dlArea.height;
+Digilib.prototype.canMove = function(movx, movy) {
+    if (this.isFullArea()) return false;
+    var x2 = this.area.x + this.area.width;
+    var y2 = this.area.y + this.area.height;
     // debugProps(dlArea);
-    return ((movx < 0) && (dlArea.x > 0))
+    return ((movx < 0) && (this.area.x > 0))
     	|| ((movx > 0) && (x2 < 1.0))
-	|| ((movy < 0) && (dlArea.y > 0))
+	|| ((movy < 0) && (this.area.y > 0))
     	|| ((movy > 0) && (y2 < 1.0))
 }
 
-function moveBy(movx, movy) {
+Digilib.prototype.moveBy = function(movx, movy) {
     // move visible area by movx and movy (in units of ww, wh)
-    if (!canMove(movx, movy)) return; // nothing to do
-    var newarea = dlArea.copy();
-    newarea.x += parseFloat(movx)*dlArea.width;
-    newarea.y += parseFloat(movy)*dlArea.height;
-    newarea = dlMaxArea.fit(newarea);
+    if (!this.canMove(movx, movy)) return; // nothing to do
+    var newarea = this.area.copy();
+    newarea.x += parseFloat(movx)*this.area.width;
+    newarea.y += parseFloat(movy)*this.area.height;
+    newarea = MAX_AREA.fit(newarea);
     // set parameters
-    setParamFromArea(newarea);
-    parseArea();
-    display();
+    this.setParamFromArea(newarea);
+    this.display();
 }
 
-function getRef(baseURL) {
+Digilib.prototype.getRef = function(baseUrl) {
     // returns a reference to the current digilib set
     if (!baseUrl) baseUrl 
         = location.protocol
@@ -593,101 +553,105 @@
         + location.host
         + location.pathname;
     var hyperlinkRef = baseUrl;
-    var params = dlParams.getAll(dlParams.PARAM_ALL & ~(dlParams.PARAM_DPI | dlParams.PARAM_PAGES)); // all without ddpi, pt
-    if (params.length > 0) hyperlinkRef += "?" + params;
+    with (this.params) {
+    		var ps = getAll(PARAM_ALL & ~(PARAM_DPI | PARAM_PAGES)); // all without ddpi, pt
+    	}
+    if (ps.length > 0) hyperlinkRef += "?" + ps;
     return hyperlinkRef;
 }
 
-function getRefWin(type, msg) {
+Digilib.prototype.getRefWin = function(type, msg) {
     // shows an alert with a reference to the current digilib set
     if (! msg) msg = "URL reference to the current view";
-    prompt(msg, getRef());
+    prompt(msg, this.getRef());
 }
 
-function getQuality() {
+Digilib.prototype.getQuality = function() {
     // returns the current q setting
     for (var i = 0; i < 3; i++) {
-        if (dlFlags.get("q"+i)) return i;
+        if (this.flags.get("q"+i)) return i;
     }
     return 1
 }
 
-function setQuality(qual) {
+Digilib.prototype.setQuality = function(qual) {
     // set the image quality
-    for (var i = 0; i < 3; i++) dlFlags.reset("q" + i);
     if ((qual < 0)||(qual > 2)) return alert("Quality setting not supported");
-    dlFlags.set("q" + qual);
-    display();
+    for (var i = 0; i < 3; i++) this.flags.reset("q" + i);
+    this.flags.set("q" + qual);
+    this.display();
 }
 
-function setQualityWin(msg) {
+Digilib.prototype.setQualityWin = function(msg) {
     // dialog for setting quality
     if (! msg) msg = "Quality (0..2)";
-    var q = getQuality();
+    var q = this.getQuality();
     var newq = window.prompt(msg, q);
-    if (newq) setQuality(newq);
+    if (newq) this.setQuality(newq);
 }
 
-function mirror(dir) {
+Digilib.prototype.mirror = function(dir) {
     // mirror the image horizontally or vertically
     if (dir == "h") {
-    		dlFlags.toggle("hmir");
+    		this.flags.toggle("hmir");
     	} else {
-    		dlFlags.toggle("vmir");
+    		this.flags.toggle("vmir");
 	}
-    display();
+    this.display();
 }
 
-function gotoPage(gopage, keep) {
+Digilib.prototype.gotoPage = function(gopage, keep) {
     // goto given page nr (+/-: relative)
-    var oldpn = parseInt(dlParams.get("pn"));
-    dlParams.set("pn", gopage, true);
-    var pn = parseInt(dlParams.get("pn"));
+    var oldpn = parseInt(this.params.get("pn"));
+    // set with relative=true uses the sign
+    this.params.set("pn", gopage, true);
+    // now check the outcome
+    var pn = parseInt(this.params.get("pn"));
     if (pn < 1) {
         alert("No such page! (Page number too low)");
-        dlParams.set("pn", oldpn);
+        this.params.set("pn", oldpn);
         return;
     }
-    if (dlParams.isSet("pt")) {
-        pt = parseInt(dlParams.get("pt"))
+    if (this.params.isSet("pt")) {
+        pt = parseInt(this.params.get("pt"))
         if (pn > pt) {
             alert("No such page! (Page number too high)");
-            dlParams.set("pn", oldpn);
+            this.params.set("pn", oldpn);
             return;
         }
     }
     if (keep) {
-        display(dlParams.PARAM_ALL & ~dlParams.PARAM_MARK); // all, no mark
+        this.display(this.params.PARAM_ALL & ~this.params.PARAM_MARK); // all, no mark
     } else {
-        display(dlParams.PARAM_FILE | dlParams.PARAM_MODE | dlParams.PARAM_PAGES, dlParams.MODE_QUAL | dlParams.MODE_OTHER); // fn, pn, ws, mo + pt
+        this.display(this.params.PARAM_FILE | this.params.PARAM_MODE | this.params.PARAM_PAGES, this.params.MODE_QUAL | this.params.MODE_OTHER); // fn, pn, ws, mo + pt
     }
 }
 
-function gotoPageWin() {
+Digilib.prototype.gotoPageWin = function() {
     // dialog to ask for new page nr
-    var pn = dlParams.get("pn");
+    var pn = this.params.get("pn");
     var gopage = window.prompt("Go to page", pn);
-    if (gopage) gotoPage(gopage);
-    }
+    if (gopage) this.gotoPage(gopage);
+}
 
-function setParamWin(param, text, relative) {
+Digilib.prototype.setParamWin = function(param, text, relative) {
     // dialog to ask for new parameter value
-    var val = dlParams.get(param);
+    var val = this.params.get(param);
     var newval = window.prompt(text, val);
     if (newval) {
-        dlParams.set(param, newval, relative);
-        display();
+        this.params.set(param, newval, relative);
+        this.display();
     }
 }
 
-function showOptions(show) {
+Digilib.prototype.showOptions = function(show) {
     // show or hide option div
     var elem = getElement("dloptions");
     showElement(elem, show);
     // FIX ME: get rid of the dotted line around the buttons when focused
     }
 
-function showAboutDiv(show) {
+Digilib.prototype.showAboutDiv = function(show) {
     // show or hide "about" div
     var elem = getElement("about");
     if (elem == null) {
@@ -710,16 +674,16 @@
     showElement(elem, show);
     }
     
-function loadBirdImage() {
+Digilib.prototype.loadBirdImage = function() {
     var img = getElement("bird-image");
     var src = "../servlet/Scaler?" 
-        + dlParams.getAll(dlParams.PARAM_FILE)
+        + this.params.getAll(this.params.PARAM_FILE)
         + "&dw=" + BIRD_MAXX 
         + "&dh=" + BIRD_MAXY;
     img.src = src;
-    }
+}
     
-function showBirdDiv(show) {
+Digilib.prototype.showBirdDiv = function(show) {
     // show or hide "bird's eye" div
     var startPos; // anchor for dragging
     var newRect;  // position after drag
@@ -728,14 +692,14 @@
     var overlay = getElement("overlay");
     showElement(birdImg, show);
     // dont show selector if area has full size
-    if (!show || isFullArea()) {
+    if (!show || this.isFullArea()) {
         // hide area
         showElement(birdArea, false);
         showElement(overlay, false);
         return;
-        };
+    };
     var birdImgRect = getElementRect(birdImg);
-    var area = parseArea();
+    var area = this.area;
     // scale area down to img size
     var birdAreaRect = new Rectangle(
         // what about borders ??
@@ -751,6 +715,9 @@
     registerEvent("mousedown", overlay, birdAreaStartDrag);
     registerEvent("mousedown", birdImg, birdAreaStartDrag);
 
+	// our own reference to this for local functions
+	var digilib = this;
+
     function birdAreaStartDrag(evt) {
     // mousedown handler: start drag
         startPos = evtPosition(evt);
@@ -760,7 +727,7 @@
         registerEvent("mouseup",   document, birdAreaEndDrag);
         // debugProps(getElementRect(bird))
         return stopEvent(evt);
-        }
+    }
 
     function birdAreaMove(evt) {
     // mousemove handler: drag
@@ -778,7 +745,7 @@
         moveElement(birdArea, newRect);
         showElement(birdArea, true);
         return stopEvent(evt);
-        }
+    }
 
     function birdAreaEndDrag(evt) {
     // mouseup handler: reload page
@@ -789,47 +756,46 @@
             startPos = birdAreaRect.getCenter();
             birdAreaMove(evt); // set center to click position
             }
-        dlParams.set("wx", cropFloat((newRect.x - birdImgRect.x) / birdImgRect.width));
-        dlParams.set("wy", cropFloat((newRect.y - birdImgRect.y) / birdImgRect.height));
+        digilib.params.set("wx", cropFloat((newRect.x - birdImgRect.x) / birdImgRect.width));
+        digilib.params.set("wy", cropFloat((newRect.y - birdImgRect.y) / birdImgRect.height));
         // zoomed is always fit
-        dlParams.set("ws", 1);
-        display();
+        digilib.params.set("ws", 1);
+        digilib.display();
         return stopEvent(evt);
-        }
     }
+}
 
-function showArrow(name, rect, show) {
+Digilib.prototype.showArrow = function(name, rect, show) {
     var arrow = getElement(name);
 	moveElement(arrow, rect);
 	showElement(arrow, show);
 	}
 	
-function showArrows() {
+Digilib.prototype.showArrows = function() {
     // show the 4 arrow bars on top of scaler img according to current dlArea
-    if (defined(scalerImg.complete) && !scalerImg.complete && !browserType.isN4 ) {
-        setTimeout("showArrows()", 100);
-        return;
+    if (defined(this.scalerImg.complete) && !this.scalerImg.complete && !browserType.isN4 ) {
+        alert("ERROR: scaler img not complete in showArrows!");
         }
-	var r = getElementRect(scalerImg);
-    showArrow('up',
+	var r = getElementRect(this.scalerImg);
+    this.showArrow('up',
         new Rectangle(r.x, r.y, r.width, ARROW_WIDTH), 
-        canMove(0, -1)
+        this.canMove(0, -1)
         );
-    showArrow('down',
+    this.showArrow('down',
         new Rectangle(r.x, r.y + r.height - ARROW_WIDTH, r.width, ARROW_WIDTH),
-        canMove(0, 1)
+        this.canMove(0, 1)
         );
-    showArrow('left',
+    this.showArrow('left',
         new Rectangle(r.x, r.y, ARROW_WIDTH, r.height),
-        canMove(-1, 0)
+        this.canMove(-1, 0)
         );
-    showArrow('right',
+    this.showArrow('right',
         new Rectangle(r.x + r.width - ARROW_WIDTH, r.y, ARROW_WIDTH, r.height),
-        canMove(1, 0)
+        this.canMove(1, 0)
         );
 	}
 
-function calibrate(direction) {
+Digilib.prototype.calibrate = function(direction) {
     // calibrate screen
     var startPos; // anchor for dragging
     var newRect;  // position after drag
@@ -892,7 +858,7 @@
         }
     }
 
-function originalSize(on) {
+Digilib.prototype.originalSize = function(on) {
     // set osize flag, needs calibrated screen
     if (on) {
         var dpi = cookie.get("ddpi");
@@ -900,41 +866,41 @@
             alert("Screen has not yet been calibrated - using default value of 72 dpi");
             dpi = 72;
             }
-        dlParams.set("ddpi", dpi);
-        addFlag("osize");
-        display();
-        }
-    else removeFlag("osize");
+        this.params.set("ddpi", dpi);
+        this.flags.set("osize");
+        this.display();
+    } else {
+    		this.flags.reset("osize");
+    	}
 }
-    
-function pixelByPixel(on) {
+
+Digilib.prototype.pixelByPixel = function(on) {
     // sets clip flag
     if (on) { 
-        addFlag("clip");
-        display();
+        this.flags.set("clip");
+        this.display();
         }
-    else removeFlag("clip");
+    else this.flags.reset("clip");
 }
 
-function pageWidth() {
-    var divSize = getElementSize(scalerDiv);
+Digilib.prototype.pageWidth = function() {
+    var divSize = getElementSize(this.scalerDiv);
     divSize.width -= INSET; // allow for scrollbars [Firefox bug?]
-    var imgSize = getElementSize(scalerImg);
+    var imgSize = getElementSize(this.scalerImg);
     if (imgSize.width < divSize.width) {
-        dlParams.set("ws", cropFloat(divSize.width / imgSize.width));
-        display(dlParams.PARAM_ALL & ~dlParams.PARAM_DIM); // no zoom
+        this.params.set("ws", cropFloat(divSize.width / imgSize.width));
+        this.display(this.params.PARAM_ALL & ~this.params.PARAM_DIM); // no zoom
         };
     // TODO: how to calculate correct width if zoom is on? (plus size?)
-
 }
 
-function resize(factor) {
-    dlParams.set("ws", factor);
-    showSizeMenu(false);
-    display();
+Digilib.prototype.resize = function(factor) {
+    this.params.set("ws", factor);
+    this.showSizeMenu(false);
+    this.display();
 }
 
-function showSizeMenu(show) {
+Digilib.prototype.showSizeMenu = function(show) {
     var menu = getElement("sizes");
     if (show) {
         // align menu with button
@@ -943,5 +909,65 @@
         }
     showElement(menu, show);
 }
+
+
+/********************************
+ * global variables
+ ********************************/
+
+var dl = new Digilib();
+
+/* old parameter function compatibility stuff */
+function newParameter(a,b,c) {return dl.params.define(a,b,c)};
+function resetParameter(a) {return dl.params.reset(a)};
+function deleteParameter(a) {return dl.params.remove(a)};
+function getParameter(a) {return dl.params.get(a)};
+function setParameter(a,b,c) {return dl.params.set(a,b,c)};
+function hasParameter(a) {return dl.params.isSet(a)};
+function getAllParameters(a) {return dl.params.getAll(a)};
+getQueryString = getAllParameters;
+function parseParameters(a) {return dl.params.parse(a)};
+function getAllMarks() {return dl.marks.getAll()};
+getMarksQueryString = getAllMarks;
+function addMark(evt) {return dl.marks.addEvent(evt)};
+function deleteMark() {return dl.marks.pop()};
+function deleteAllMarks() {return dl.marks = new Marks()};
+function hasFlag(mode) {return dl.flags.get(mode)};
+function addFlag(mode) {return dl.flags.set(mode)};
+function removeFlag(mode) {return dl.flags.reset(mode)};
+function toggleFlag(mode) {return dl.flags.toggle(mode)};
+function getAllFlags() {return dl.flags.getAll()};
+/* old digilib function compatibility */
+function setDLParam(e, s, relative) {dl.setDLParam(e, s, relative)};
+function display(detail, moDetail) {dl.display(detail, moDetail)};
+function setMark(reload) {dl.setMark(reload)};
+function removeMark(reload) {dl.removeMark(reload)};
+function zoomArea() {dl.zoomArea()};
+function zoomBy(factor) {dl.zoomBy(factor)};
+function zoomFullpage() {dl.zoomFullpage()};
+function moveCenter(on) {dl.moveCenter(on)};
+function isFullArea(area) {dl.isFullArea(area)};
+function canMove(movx, movy) {dl.canMove(movx, movy)};
+function moveBy(movx, movy) {dl.moveBy(movx, movy)};
+function getRef(baseURL) {dl.getRef(baseURL)};
+function getRefWin(type, msg) {dl.getRefWin(type, msg)};
+function getQuality() {dl.getQuality()};
+function setQuality(qual) {dl.setQuality(qual)};
+function setQualityWin(msg) {dl.setQualityWin(msg)};
+function mirror(dir) {dl.mirror(dir)};
+function gotoPage(gopage, keep) {dl.gotoPage(gopage, keep)};
+function gotoPageWin() {dl.gotoPageWin()};
+function setParamWin(param, text, relative) {dl.setParamWin(param, text, relative)};
+function showOptions(show) {dl.showOptions(show)};
+function showBirdDiv(show) {dl.showBirdDiv(show)};
+function showAboutDiv(show) {dl.showAboutDiv(show)};
+function calibrate(direction) {dl.calibrate(direction)};
+function originalSize(on) {dl.originalSize(on)};
+function pixelByPixel(on) {dl.pixelByPixel(on)};
+function pageWidth() {dl.pageWidth()};
+function resize(factor) {dl.resize(factor)};
+function showSizeMenu(show) {dl.showSizeMenu(show)};
+
+
 // :tabSize=4:indentSize=4:noTabs=true: