--- a/client/digitallibrary/jquery/dlGeometry.js	Fri Jan 21 00:33:33 2011 +0100
+++ b/client/digitallibrary/jquery/dlGeometry.js	Fri Jan 21 00:34:15 2011 +0100
@@ -24,10 +24,27 @@
  * Position class
  */
         var position = function (x, y) {
-            var that = {
-                    x : parseFloat(x),
-                    y : parseFloat(y)
-            };
+            if (typeof x === "object") {
+                if (x instanceof jQuery) {
+                    // jQuery object
+                    var pos = x.offset();
+                    var that = {
+                            x : pos.left,
+                            y : pos.top
+                    };
+                } else {
+                    // event object(?)
+                    var that = {
+                            x : x.pageX,
+                            y : x.pageY
+                    };
+                }
+            } else {
+                var that = {
+                        x : parseFloat(x),
+                        y : parseFloat(y)
+                };
+            }
             that.equals = function(other) {
                 return (this.x === other.x  &&  this.y === other.y);
             };
@@ -42,13 +59,24 @@
         var rectangle = function (x, y, w, h) {
             var that = {}; 
             if (typeof x === "object") {
-                // assume x and y are Position
-                that = {
-                        x : x.x,
-                        y : x.y,
-                        width : y.x - x.x,
-                        height : y.y - x.y
-                };
+                if (x instanceof jQuery) {
+                    // jQuery object
+                    var pos = x.offset();
+                    that = {
+                            x : pos.left,
+                            y : pos.top,
+                            width : x.width(),
+                            height : x.height()
+                    };
+                } else {
+                    // assume x and y are Position
+                    that = {
+                            x : x.x,
+                            y : x.y,
+                            width : y.x - x.x,
+                            height : y.y - x.y
+                    };
+                }
             } else {
                 that = {
                         x : parseFloat(x),
@@ -119,7 +147,7 @@
             that.containsPosition = function(pos) {
                 // returns if Position "pos" lies inside of this rectangle
                 var ct = ((pos.x >= this.x) && (pos.y >= this.y) && 
-                        (pos.x <= this.x + this.width) && (pos.y <= this.y + this.width));
+                        (pos.x <= this.x + this.width) && (pos.y <= this.y + this.height));
                 return ct;
             };
             that.containsRect = function(rect) {

--- a/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 21 00:33:33 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 21 00:34:15 2011 +0100
@@ -26,6 +26,27 @@
                 background-image: url('../greyskin/corona.png');
             }
 
+            div.digilib div.mark {
+              position: absolute;
+              color: white;
+              background: url('../greyskin/mark-bg-16.png');
+              font-family: Verdana, Arial, Helvetica, sans-serif;
+              font-weight: bold;
+              font-size:11px;
+              height: 15px;
+              width: 16px;
+              padding-top: 1px;
+              text-align: center;
+              z-index: 10;
+            }
+
+            div.digilib div.zoomrect {
+              position: absolute;
+              /* border: 2px solid #ffa060; */
+              border: 2px solid #ff0000;
+              z-index: 200;
+              }
+              
             div.birdview {
                 border: 1px solid white;
                 position: fixed;
@@ -64,13 +85,14 @@
         <script type="text/javascript">
             $(document).ready(function(){
                 var opts = {interactionMode : 'fullscreen',
-                        scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler'};
+                        scalerBaseUrl : 'http://localhost:18080/digitallibrary/servlet/Scaler'};
                  $('div.digilib').digilib(opts);
 
-                 $('div.digilib').each(function(){
+                 /* $('div.digilib').each(function(){
                          console.log($(this).data('digilib').settings);
                     });
                  $('div.digilib').digilib('showAboutDiv', 1);
+                 */
             });
 
         </script>

--- a/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 21 00:33:33 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 21 00:34:15 2011 +0100
@@ -30,7 +30,7 @@
             img : "zoom-out.png"
             },
         zoomarea : {
-            onclick : "javascript:zoomArea()",
+            onclick : "zoomArea",
             tooltip : "zoom area",
             img : "zoom-area.png"
             },
@@ -205,7 +205,7 @@
     var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1);
 
     var actions = {
-            // digilib initialization
+            // init: digilib initialization
             init : function(options) {
                 // settings for this digilib instance are merged from defaults and options
                 var settings = $.extend({}, defaults, options);
@@ -261,12 +261,11 @@
                 });
             },
 
-            // clean up digilib
+            // destroy: clean up digilib
             destroy : function(data) {
                 return this.each(function(){
                     var $elem = $(this);
-                    // Namespacing FTW
-                    $(window).unbind('.digilib'); // unbinds all digilibs(?)
+                    $(window).unbind('.digilib'); // unbind all digilibs(?)
                     data.digilib.remove();
                     $elem.removeData('digilib');
                 });
@@ -318,6 +317,11 @@
                 zoomBy(data, factor);
             },
 
+            // zoom interactively
+            zoomArea : function (data) {
+                zoomArea(data);
+            },
+
             // zoom out to full page
             zoomFull : function (data, mode) {
                 data.zoomArea = MAX_ZOOMAREA;
@@ -736,8 +740,7 @@
             console.debug("img loaded! this=", this, " data=", data);
             var area = data.zoomArea;
             // create Transform from current area and picsize
-            var picpos = $img.offset();
-            var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height());
+            var picrect = geom.rectangle($img);
             var trafo = geom.transform();
             // subtract area offset and size
             trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y)));
@@ -769,7 +772,7 @@
                 var html = '<div class="mark">'+(i+1)+'</div>';
                 var $mark = $(html);
                 $elem.append($mark);
-                $mark.offset({ left : mpos.x, top : mpos.y});
+                $mark.offset({left : mpos.x, top : mpos.y});
             }
         }
     };
@@ -804,6 +807,77 @@
             return false; // do we even get here?
         });
     };
+    
+    var zoomArea = function(data) {
+        $elem = data.$elem;
+        $scaler = data.$scaler;
+        var pt1, pt2;
+        var $zoomDiv = $('<div class="zoomrect" style="display:none"/>');
+        $elem.append($zoomDiv);
+        //var overlay = getElement("overlay");
+        // use overlay div to avoid <img> mousemove problems
+        var picRect = geom.rectangle($scaler);
+        // FIX ME: is there a way to query the border width from CSS info?
+        // rect.x -= 2; // account for overlay borders
+        // rect.y -= 2;
+        //moveElement(overlay, picRect);
+        //showElement(overlay, true);
+        // start event capturing
+        //registerEvent("mousedown", overlay, zoomStart);
+        //registerEvent("mousedown", this.scalerImg, zoomStart);
+
+        var zoomStart = function (evt) {
+            pt1 = geom.position(evt);
+            // setup and show zoom div
+            //moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0));
+            $zoomDiv.offset({left : pt1.x, top : pt1.y});
+            $zoomDiv.show();
+            // register events
+            $elem.bind("mousemove.digilib", zoomMove);
+            $elem.bind("mouseup.digilib", zoomEnd);
+            return false;
+        };
+        
+        // mouseup handler: end moving
+        var zoomEnd = function (evt) {
+            pt2 = geom.position(evt);
+            // assume a click and continue if the area is too small
+            var clickRect = geom.rectangle(pt1, pt2);
+            clickRect.normalize();
+            console.debug("clickRect.getArea()=",clickRect.getArea());
+            if (clickRect.getArea() <= 5) {
+                return false;
+            }
+            // hide zoom div
+            $zoomDiv.remove();
+            // unregister events
+            $elem.unbind("mousemove.digilib", zoomMove);
+            $elem.unbind("mouseup.digilib", zoomEnd);
+            // clip and transform
+            clickRect.clipTo(picRect);
+            var area = data.imgTrafo.invtransform(clickRect);
+            data.zoomArea = area;
+            // zoomed is always fit
+            data.settings.ws = 1;
+            redisplay(data);
+            return false;
+        };
+        
+        // mouse move handler
+        var zoomMove = function (evt) {
+            pt2 = geom.position(evt);
+            var rect = geom.rectangle(pt1, pt2);
+            rect.normalize();
+            rect.clipTo(picRect);
+            // update zoom div
+            $zoomDiv.offset({left : rect.x, top : rect.y});
+            $zoomDiv.width(rect.width).height(rect.height);
+            return false;
+        };
+        
+        // bind start zoom handler
+        $scaler.one('mousedown.digilib', zoomStart);
+    };
 
     // sets a key to a value (relative values with +/- if relative=true)
     var setNumValue = function(settings, key, value) {