--- a/webapp/src/main/webapp/jquery/digilib.html	Mon Feb 06 12:24:21 2012 +0100
+++ b/webapp/src/main/webapp/jquery/digilib.html	Mon Feb 06 20:13:11 2012 +0100
@@ -18,6 +18,7 @@
         <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
         <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
         <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+        <script type="text/javascript" src="jquery.digilib.marks.js"></script>
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
 

--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Mon Feb 06 12:24:21 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Mon Feb 06 20:13:11 2012 +0100
@@ -67,16 +67,6 @@
                 tooltip : "reset image",
                 icon : "reset.png"
                 },
-            mark : {
-                onclick : "setMark",
-                tooltip : "set a mark",
-                icon : "mark.png"
-                },
-            delmark : {
-                onclick : "removeMark",
-                tooltip : "delete the last mark",
-                icon : "delmark.png"
-                },
             hmir : {
                 onclick : ["mirror", "h"],
                 tooltip : "mirror horizontally",

--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Feb 06 12:24:21 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Feb 06 20:13:11 2012 +0100
@@ -38,7 +38,7 @@
 
     var defaults = {
         // version of this script
-        'version' : 'jquery.digilib.js 2.1.2b2',
+        'version' : 'jquery.digilib.js 2.1.3a1',
         // logo url
         'logoUrl' : 'img/digilib-logo-text1.png',
         // homepage url (behind logo)
@@ -81,7 +81,7 @@
         'interactionMode' : 'fullscreen',
         // is the "about" window shown?
         'isAboutDivVisible' : false,
-        // default size of preview image for drag-scroll (same as Bird's Eye View image)
+        // default size of preview image for drag-scroll (preferrably same as Bird's Eye View image)
         'previewImgWidth' : 200,
         'previewImgHeight' : 200,
         // maximum width or height of preview background image for drag-scroll
@@ -338,31 +338,6 @@
             redisplay(data);
         },
 
-        /** set a mark by clicking (or giving a position)
-         * 
-         * @param data
-         * @param mpos
-         */
-        setMark : function (data, mpos) {
-            if (mpos == null) {
-                // interactive
-                setMark(data);
-            } else {
-                // use position
-                data.marks.push(pos);
-                redisplay(data);
-            }
-        },
-
-        /** remove the last mark
-         * 
-         * @param data
-         */
-        removeMark : function (data) {
-            data.marks.pop();
-            redisplay(data);
-        },
-
         /** mirror the image
          * 
          * @param data
@@ -490,7 +465,7 @@
             }
         },
 
-        /** calibrate (only faking)
+        /** calibrate (set client screen dpi)
          * 
          * @param data
          * @param res
@@ -904,12 +879,11 @@
     };
 
     /** handle "update" display event.
-     * updates image transform, redraws marks etc.
+     * updates image transform, etc.
      */
     var handleUpdate = function (evt) {
     	var data = this;
         updateImgTrafo(data);
-        renderMarks(data);
         setupZoomDrag(data);
     };
 
@@ -922,12 +896,12 @@
         var winH = $win.height();
         var winW = $win.width();
         // add all current insets
+        // accounting for left/right border, body margins and additional requirements
         var insets = { 'x' : 0, 'y' : 0};
         for (var n in data.currentInsets) {
             insets.x += data.currentInsets[n].x;
             insets.y += data.currentInsets[n].y;
         };
-        // accounting for left/right border, body margins and additional requirements
         var imgW = winW - insets.x;
         var imgH = winH - insets.y;
         console.debug('screen w/h:', winW, winH, 'window.width', $win.width(), 'img w/h:', imgW, imgH);
@@ -1174,31 +1148,6 @@
     };
     
     
-    /** place marks on the image
-     * 
-     */
-    var renderMarks = function (data) {
-        if (data.$img == null || data.imgTrafo == null) return;
-        console.debug("renderMarks: img=",data.$img," imgtrafo=",data.imgTrafo);
-        var $elem = data.$elem;
-        var marks = data.marks;
-        // clear marks
-        $elem.find('div.mark').remove();
-        for (var i = 0; i < marks.length; i++) {
-            var mark = marks[i];
-            if (data.zoomArea.containsPosition(mark)) {
-                var mpos = data.imgTrafo.transform(mark);
-                console.debug("renderMarks: pos=",mpos);
-                // create mark
-                var html = '<div class="mark overlay">'+(i+1)+'</div>';
-                var $mark = $(html);
-                $mark.attr("id", "digilib-mark-"+(i+1));
-                $elem.append($mark);
-                mpos.adjustDiv($mark);
-                }
-            }
-    };
-
     /** zoom by the given factor.
      * 
      */
@@ -1219,25 +1168,6 @@
         redisplay(data);
     };
 
-    /** add a mark where clicked.
-     * 
-     */
-    var setMark = function (data) {
-        var $scaler = data.$scaler;
-        // unbind other handler
-        $scaler.off(".dlZoomDrag");
-        // start event capturing
-        $scaler.one('mousedown.dlSetMark', function (evt) {
-            // event handler adding a new mark
-            console.log("setmark at=", evt);
-            var mpos = geom.position(evt);
-            var pos = data.imgTrafo.invtransform(mpos);
-            data.marks.push(pos);
-            redisplay(data);
-            return false;
-        });
-    };
-
     /** zoom to the area around two clicked points.
      * 
      */
@@ -1415,8 +1345,8 @@
                 $img.css('visibility', 'visible');
                 $scaler.css({'opacity' : '1', 'background-image' : 'none'});
                 data.hasPreviewBg = false;
-                // unhide marks
-                data.$elem.find('div.mark').show();
+                // unhide marks FIXME!
+                //data.$elem.find('div.mark').show();
                 $(data).trigger('redisplay');
                 return false; 
             }
@@ -1706,4 +1636,4 @@
         }
     };
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.marks.js	Mon Feb 06 20:13:11 2012 +0100
@@ -0,0 +1,149 @@
+/**
+digilib plugin stub
+ */
+
+(function($) {
+
+    // affine geometry
+    var geom = null;
+    // plugin object with digilib data
+    var digilib = null;
+
+    var buttons = {
+            mark : {
+                onclick : "setMark",
+                tooltip : "set a mark",
+                icon : "mark.png"
+                },
+            delmark : {
+                onclick : "removeMark",
+                tooltip : "delete the last mark",
+                icon : "delmark.png"
+                }
+    };
+
+    var defaults = {
+    };
+
+    var actions = {
+            /** set a mark by clicking (or giving a position)
+             * 
+             * @param data
+             * @param mpos
+             */
+            setMark : function (data, mpos) {
+                if (mpos == null) {
+                    // interactive
+                    setMark(data);
+                } else {
+                    // use position
+                    data.marks.push(pos);
+                    digilib.fn.redisplay(data);
+                }
+            },
+
+            /** remove the last mark
+             * 
+             * @param data
+             */
+            removeMark : function (data) {
+                data.marks.pop();
+                digilib.fn.redisplay(data);
+            }
+    };
+
+    // plugin installation called by digilib on plugin object.
+    var install = function(plugin) {
+        digilib = plugin;
+        console.debug('installing stub plugin. digilib:', digilib);
+        // import geometry classes
+        geom = digilib.fn.geometry;
+        // add defaults, actins, buttons
+        $.extend(true, digilib.defaults, defaults);
+        $.extend(digilib.actions, actions);
+        $.extend(true, digilib.buttons, buttons);
+    };
+
+    // plugin initialization
+    var init = function (data) {
+        console.debug('initialising marks plugin. data:', data);
+        var $data = $(data);
+        // install event handler
+        $data.bind('setup', handleSetup);
+        $data.bind('update', handleUpdate);
+    };
+
+
+    var handleSetup = function (evt) {
+        console.debug("stub: handleSetup");
+        var data = this;
+    };
+
+    var handleUpdate = function (evt) {
+        console.debug("stub: handleUpdate");
+        var data = this;
+        renderMarks(data);
+    };
+
+    /** place marks on the image
+     * 
+     */
+    var renderMarks = function (data) {
+        if (data.$img == null || data.imgTrafo == null) return;
+        console.debug("renderMarks: img=",data.$img," imgtrafo=",data.imgTrafo);
+        var $elem = data.$elem;
+        var marks = data.marks;
+        // clear marks
+        $elem.find('div.mark').remove();
+        for (var i = 0; i < marks.length; i++) {
+            var mark = marks[i];
+            if (data.zoomArea.containsPosition(mark)) {
+                var mpos = data.imgTrafo.transform(mark);
+                console.debug("renderMarks: pos=",mpos);
+                // create mark
+                var html = '<div class="mark overlay">'+(i+1)+'</div>';
+                var $mark = $(html);
+                $mark.attr("id", "digilib-mark-"+(i+1));
+                $elem.append($mark);
+                mpos.adjustDiv($mark);
+                }
+            }
+    };
+
+    /** add a mark where clicked.
+     * 
+     */
+    var setMark = function (data) {
+        var $scaler = data.$scaler;
+        // unbind other handler TODO: do we need to do this?
+        $scaler.off(".dlZoomDrag");
+        // start event capturing
+        $scaler.one('mousedown.dlSetMark', function (evt) {
+            // event handler adding a new mark
+            console.log("setmark at=", evt);
+            var mpos = geom.position(evt);
+            var pos = data.imgTrafo.invtransform(mpos);
+            data.marks.push(pos);
+            digilib.fn.redisplay(data);
+            return false;
+        });
+    };
+
+    // plugin object with name and init
+    // shared objects filled by digilib on registration
+    var plugin = {
+            name : 'marks',
+            install : install,
+            init : init,
+            buttons : {},
+            actions : {},
+            fn : {},
+            plugins : {}
+    };
+
+    if ($.fn.digilib == null) {
+        $.error("jquery.digilib.marks must be loaded after jquery.digilib!");
+    } else {
+        $.fn.digilib('plugin', plugin);
+    }
+})(jQuery);

--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Mon Feb 06 12:24:21 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Mon Feb 06 20:13:11 2012 +0100
@@ -163,11 +163,8 @@
                 return;
             }
             regionInfo(data);
-        },
+        }
 
-        "redraw" : function (data) {
-            renderRegions(data);
-        }
     };
 
     // store a region div