# HG changeset patch
# User robcast
# Date 1297415561 -3600
# Node ID 292b2948533f2f6fcdece61120aea9c45ad4b1d1
# Parent  a4bb163691a0e6632f851add5a4147fd4f16cb6e# Parent  102addee6205e2793bed1f3414b6011d045255c9
merge from jquery branch
19754e80cc9fb019a073b61891415233b4ef591a

diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/img/embedded.svg
--- a/client/digitallibrary/jquery/img/embedded.svg	Tue Feb 08 22:49:44 2011 +0100
+++ b/client/digitallibrary/jquery/img/embedded.svg	Fri Feb 11 10:12:41 2011 +0100
@@ -49,7 +49,7 @@
      inkscape:pageshadow="2"
      inkscape:zoom="16.533016"
      inkscape:cx="15.816836"
-     inkscape:cy="16.69448"
+     inkscape:cy="9.7629524"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -86,8 +86,7 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(0,-1020.3622)"
-     style="display:inline"
-     sodipodi:insensitive="true" />
+     style="display:inline" />
   <g
      inkscape:groupmode="layer"
      id="layer2"
@@ -928,7 +927,8 @@
      inkscape:groupmode="layer"
      id="layer11"
      inkscape:label="mirror-horizontal"
-     style="display:none">
+     style="display:none"
+     sodipodi:insensitive="true">
     <path
        inkscape:connector-curvature="0"
        style="fill:#ffffff;fill-opacity:1;stroke:none;display:inline"
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/img/fullscreen/brightness.png
Binary file client/digitallibrary/jquery/img/fullscreen/brightness.png has changed
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/img/fullscreen/contrast.png
Binary file client/digitallibrary/jquery/img/fullscreen/contrast.png has changed
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/img/fullscreen/help.png
Binary file client/digitallibrary/jquery/img/fullscreen/help.png has changed
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/img/fullscreen/rotate.png
Binary file client/digitallibrary/jquery/img/fullscreen/rotate.png has changed
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/img/fullscreen/whitedisc.png
Binary file client/digitallibrary/jquery/img/fullscreen/whitedisc.png has changed
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/jquery-test-embedded.html
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Tue Feb 08 22:49:44 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Fri Feb 11 10:12:41 2011 +0100
@@ -15,6 +15,11 @@
                 /* width: 220px; */
             }
 
+            div.svg {
+                position: absolute;
+                background: transparent;
+            }
+
             td {
                 vertical-align: top;
                 }
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Tue Feb 08 22:49:44 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Feb 11 10:12:41 2011 +0100
@@ -9,6 +9,26 @@
                  background: silver;
             }
 
+            div.digilib {
+                /* padding for buttons and bird-div */
+                padding-right: 18px;
+                padding-bottom: 100px;
+                /* width: 220px; */
+            }
+
+            div.svg {
+                position: absolute;
+                background: transparent;
+            }
+
+            td {
+                vertical-align: top;
+                }
+
+            div#test:hover {
+                background-color: cornsilk;
+                }
+
             #debug {
                 background-color: beige;
                 position: absolute;
@@ -19,8 +39,20 @@
                 padding: 0px 5px;
                 font-family: Arial;
                 font-size: 9px;
+                display: none;
+                }
+
+            div._log {
+                color: grey;
                 }
 
+            div._debug {
+                color: darkgreen;
+                }
+
+            div._error {
+                color: red;
+                }
         </style>
 
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
@@ -36,7 +68,8 @@
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler'
                     };
-                 $('div.digilib').digilib(opts);
+                var $div = $('div.digilib');
+                $div.digilib(opts);
             });
 
         </script>
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css	Tue Feb 08 22:49:44 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Fri Feb 11 10:12:41 2011 +0100
@@ -67,7 +67,11 @@
 }
 
 div.digilib.dl_fullscreen div.button:hover {
-	background-image: url('../greyskin/corona.png');
+	background-image: url('img/fullscreen/corona.png');
+}
+
+div.digilib.dl_fullscreen div.button-on {
+	background-image: url('img/fullscreen/whitedisc.png');
 }
 
 div.digilib.dl_fullscreen div.birdview {
@@ -95,6 +99,10 @@
 	background-color: darkred;
 }
 
+div.digilib.dl_embedded div.button-on {
+	background-color: black;
+}
+
 div.digilib.dl_embedded div.birdview {
 	position: absolute;
 	bottom: 0px;
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Feb 08 22:49:44 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Fri Feb 11 10:12:41 2011 +0100
@@ -22,7 +22,7 @@
 **/ 
 
 
-/* jslint browser: true, debug: true, forin: true
+/*jslint browser: true, debug: true, forin: true
 */
 
 // fallback for console.log calls
@@ -40,140 +40,140 @@
         reference : {
             onclick : "reference",
             tooltip : "get a reference URL",
-            img : "reference.png"
+            icon : "reference.png"
             },
         zoomin : {
             onclick : ["zoomBy", 1.4],
             tooltip : "zoom in",
-            img : "zoom-in.png"
+            icon : "zoom-in.png"
             },
         zoomout : {
             onclick : ["zoomBy", 0.7],
             tooltip : "zoom out",
-            img : "zoom-out.png"
+            icon : "zoom-out.png"
             },
         zoomarea : {
             onclick : "zoomArea",
             tooltip : "zoom area",
-            img : "zoom-area.png"
+            icon : "zoom-area.png"
             },
         zoomfull : {
             onclick : "zoomFull",
             tooltip : "view the whole image",
-            img : "zoom-full.png"
+            icon : "zoom-full.png"
             },
         pagewidth : {
             onclick : ["zoomFull", "width"],
             tooltip : "page width",
-            img : "pagewidth.png"
+            icon : "pagewidth.png"
             },
         back : {
             onclick : ["gotoPage", "-1"],
             tooltip : "goto previous image",
-            img : "back.png"
+            icon : "back.png"
             },
         fwd : {
             onclick : ["gotoPage", "+1"],
             tooltip : "goto next image",
-            img : "fwd.png"
+            icon : "fwd.png"
             },
         page : {
             onclick : "gotoPage",
             tooltip : "goto image number",
-            img : "page.png"
+            icon : "page.png"
             },
         bird : {
             onclick : "showBirdDiv",
             tooltip : "show bird's eye view",
-            img : "birds-eye.png"
+            icon : "birds-eye.png"
             },
         help : {
             onclick : "showAboutDiv",
             tooltip : "about Digilib",
-            img : "help.png"
+            icon : "help.png"
             },
         reset : {
             onclick : "reset",
             tooltip : "reset image",
-            img : "reset.png"
+            icon : "reset.png"
             },
         mark : {
             onclick : "setMark",
             tooltip : "set a mark",
-            img : "mark.png"
+            icon : "mark.png"
             },
         delmark : {
             onclick : "removeMark",
             tooltip : "delete the last mark",
-            img : "delmark.png"
+            icon : "delmark.png"
             },
         hmir : {
             onclick : ["mirror", "h"],
             tooltip : "mirror horizontally",
-            img : "mirror-horizontal.png"
+            icon : "mirror-horizontal.png"
             },
         vmir : {
             onclick : ["mirror", "v"],
             tooltip : "mirror vertically",
-            img : "mirror-vertical.png"
+            icon : "mirror-vertical.png"
             },
         rot : {
             onclick : "rotate",
             tooltip : "rotate image",
-            img : "rotate.png"
+            icon : "rotate.png"
             },
         brgt : {
             onclick : "brightness",
             tooltip : "set brightness",
-            img : "brightness.png"
+            icon : "brightness.png"
             },
         cont : {
             onclick : "contrast",
             tooltip : "set contrast",
-            img : "contrast.png"
+            icon : "contrast.png"
             },
         rgb : {
             onclick : "javascript:setParamWin('rgb', '...')",
             tooltip : "set rgb values",
-            img : "rgb.png"
+            icon : "rgb.png"
             },
         quality : {
             onclick : "setQuality",
             tooltip : "set image quality",
-            img : "quality.png"
+            icon : "quality.png"
             },
         size : {
             onclick : "javascript:toggleSizeMenu()",
             tooltip : "set page size",
-            img : "size.png"
+            icon : "size.png"
             },
         calibrationx : {
             onclick : "calibrate",
             tooltip : "calibrate screen resolution",
-            img : "calibration-x.png"
+            icon : "calibration-x.png"
             },
         scale : {
-            onclick : "javascript:toggleScaleMenu()",
+            onclick : "setScaleMode",
             tooltip : "change image scale",
-            img : "original-size.png"
+            icon : "original-size.png"
             },
         toggleoptions : {
             onclick : "moreButtons",
             tooltip : "more options",
-            img : "options.png"
+            icon : "options.png"
             },
         moreoptions : {
             onclick : ["moreButtons", "+1"],
             tooltip : "more options",
-            img : "options.png"
+            icon : "options.png"
             },
         lessoptions : {
             onclick : ["moreButtons", "-1"],
             tooltip : "less options",
-            img : "options.png"
+            icon : "options.png"
             },
         SEP : {
-            img : "sep.png"
+            icon : "sep.png"
             }
         };
 
@@ -208,7 +208,7 @@
         'ddpix' : null,
         'ddpiy' : null,
         // list of digilib parameters
-        'digilibParamNames' : ['fn','pn','ww','wh','wx','wy','ws','mo','rot','cont','brgt','rgbm','rgba','mk','clop'],
+        'digilibParamNames' : ['fn','pn','ww','wh','wx','wy','ws','mo','rot','cont','brgt','rgbm','rgba','ddpi','mk','clop'],
         // digilib parameter defaults
         'mk' : '',
         'clop' : '',
@@ -230,10 +230,11 @@
             'embedded' : {
                 'imagePath' : 'img/embedded/16/',
                 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","bird","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","toggleoptions"],
+                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"],
                 'buttonSets' : ['standardSet', 'specialSet']
                 }
         },
+        
         // number of visible button groups
         'visibleButtonSets' : 1,
         // is birdView shown?
@@ -338,16 +339,21 @@
                         if (url) {
                             // build it from scaler URL
                             var bp = url.indexOf('/servlet/Scaler');
-                            elemSettings.digilibBaseUrl = url.substring(0, bp) + '/digilib.jsp';                        
+                            elemSettings.digilibBaseUrl = url.substring(0, bp) + '/digilib.jsp';
                         }
                     }
                 }
+                // get image info from server if needed
+                if (data.scaleMode === 'pixel' || data.scaleMode === 'size') {
+                    loadImageInfo(data, updateDisplay); // updateDisplay(data) on completion
+                }
                 // create HTML structure for scaler
                 setupScalerDiv(data);
                 // add buttons
                 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
                     showButtons(data, true, i);
                     }
+                highlightButtons(data);
                 // bird's eye view creation
                 if (elemSettings.isBirdDivVisible) {
                     setupBirdDiv(data);
@@ -372,7 +378,9 @@
 
         // show or hide the 'about' window
         showAboutDiv : function(data, show) {
-            data.settings.isAboutDivVisible = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
+            var on = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
+            data.settings.isAboutDivVisible = on;
+            highlightButtons(data, 'help', on);
         },
 
         // event handler: toggles the visibility of the bird's eye window 
@@ -382,10 +390,11 @@
                 // no bird div -> create
                 setupBirdDiv(data);
             }
-            settings.isBirdDivVisible = showDiv(settings.isBirdDivVisible, data.$birdDiv, show);
+            var on = showDiv(settings.isBirdDivVisible, data.$birdDiv, show);
+            settings.isBirdDivVisible = on;
+            highlightButtons(data, 'bird', on);
             updateBirdDiv(data);
             storeOptions(data);
-            // data.$birdImg.triggerHandler('load'); // TODO: we shouldn't do that
         },
 
         // goto given page nr (+/-: relative)
@@ -402,6 +411,7 @@
                 settings.pn = oldpn;
                 return false;
                 }
+            // TODO: how do we get pt?
             if (settings.pt) {
                 if (pn > settings.pt) {
                     alert("no such page (page number too high)");
@@ -421,9 +431,16 @@
             zoomBy(data, factor);
         },
 
-        // zoom interactively
-        zoomArea : function (data) {
-            zoomArea(data);
+        // zoom to area (or interactive)
+        zoomArea : function (data, area) {
+            var settings = data.settings;
+            if (area == null) {
+                // interactively
+                zoomArea(data);
+            } else {
+                data.zoomArea = geom.rectangle(area);
+                redisplay(data);
+            }
         },
 
         // zoom out to full page
@@ -585,11 +602,33 @@
                 redisplay(data);
             }
         },
-        
+
         // calibrate (only faking)
-        calibrate : function (data) {
-            getImageInfo(data);
+        calibrate : function (data, res) {
+            var oldRes = data.settings.ddpi;
+            if (res == null) {
+                res = window.prompt("Display resolution (dpi)", oldRes);
+            }
+            if (res != null) {
+                data.settings.ddpi = res;
+                redisplay(data);
+            }
+        },
+        
+        // set image scale mode
+        setScaleMode : function (data, mode) {
+            var oldM = getScaleMode(data);
+            if (mode == null) {
+                mode = window.prompt("Image scale mode (screen, pixel, size)", oldM);
+            }
+            if (mode != null) {
+                setScaleMode(data, mode);
+                data.scaleMode = mode;
+                redisplay(data);
+            }
         }
+        
+    // end of actions
     };
 
     // returns parameters from page url
@@ -670,6 +709,17 @@
         if (moreParams == null) {
             var params = getParamString(birdSettings, settings.birdDivParams, defaults);
         } else {
+            // filter scaler flags
+            if (birdSettings.mo != null) {
+                var mo = '';
+                if (data.scalerFlags.hmir != null) {
+                    mo += 'hmir,';
+                }
+                if (data.scalerFlags.vmir != null) {
+                    mo += 'vmir';
+                }
+                birdSettings.mo = mo;
+            }
             var params = getParamString(birdSettings, 
                     settings.birdDivParams.concat(moreParams), defaults);
         }
@@ -685,12 +735,13 @@
         return settings.digilibBaseUrl + '?' + queryString;
     };
 
-    // gets image information from digilib server via HTTP and calls complete
-    var getImageInfo = function (data, complete) {
+    // loads image information from digilib server via HTTP (and calls complete-fn)
+    var loadImageInfo = function (data, complete) {
         var settings = data.settings;
         var p = settings.scalerBaseUrl.indexOf('/servlet/Scaler');
         var url = settings.scalerBaseUrl.substring(0, p) + '/ImgInfo-json.jsp';
         url += '?' + getParamString(settings, ['fn', 'pn'], defaults);
+        // TODO: better error handling
         jQuery.getJSON(url, function (json) {
             console.debug("got json data=", json);
             data.imgInfo = json;
@@ -732,6 +783,7 @@
                 }
             }
         data.scalerFlags = flags;
+        data.scaleMode = getScaleMode(data);
         retrieveOptions(data);
     };
 
@@ -840,11 +892,24 @@
             data.$img.attr('src', url);
             // redisplay bird img
             updateBirdDiv(data);
+            highlightButtons(data);
             }
     };
 
+    // update display (overlays etc.)
+    var updateDisplay = function (data) {
+        updateImgTrafo(data);
+        renderMarks(data);
+        setupZoomDrag(data);
+        if (data.settings.isBirdDivVisible) {
+            renderBirdArea(data);
+            setupBirdDrag(data);
+        }
+        // TODO: update event subscriber?
+    };
+    
     // returns maximum size for scaler img in fullscreen mode
-    var getFullscreenImgSize = function($elem) {
+    var getFullscreenImgSize = function ($elem) {
         var $win = $(window);
         var winH = $win.height();
         var winW = $win.width();
@@ -899,6 +964,7 @@
         data.$img = $img;
         // setup image load handler before setting the src attribute (IE bug)
         $img.load(scalerImgLoadedHandler(data));
+        $img.error(function () {console.error("error loading scaler image");});
         $img.attr('src', scalerUrl);
     };
 
@@ -948,7 +1014,7 @@
                     };
                 }
             })());
-            $img.attr('src', buttonSettings.imagePath + buttonConfig.img);
+            $img.attr('src', buttonSettings.imagePath + buttonConfig.icon);
         }
         // make buttons div scroll if too large for window
         if ($buttonsDiv.height() > $(window).height() - 10) {
@@ -985,6 +1051,7 @@
         $birdZoom.css(data.settings.birdIndicatorStyle);
         var birdUrl = getBirdImgUrl(data);
         $birdImg.load(birdImgLoadedHandler(data));
+        $birdImg.error(function () {console.error("error loading birdview image");});
         $birdImg.attr('src', birdUrl);
     };
 
@@ -1061,7 +1128,8 @@
                 $set = createButtons(data, setIdx);
                 }
             if ($set == null) return false;
-            var btnWidth = $set.width();
+            // include border in calculation
+            var btnWidth = $set.outerWidth();
             // move remaining sets left and show new set
             if ($otherSets.length > 0) {
                     $otherSets.animate({right : '+='+btnWidth+'px'}, atime,
@@ -1083,9 +1151,59 @@
         return true;
     };
 
+    // check for buttons to highlight
+    var highlightButtons = function (data, name, on) {
+        var $buttons = data.$elem.find('div.buttons:visible'); // include hidden?
+        // add a class for highlighted button
+        var highlight = function (name, on) {
+            var $button = $buttons.find('div.button-' + name);
+            if (on) {
+                $button.addClass('button-on');
+            } else {
+                $button.removeClass('button-on');
+            }
+        };
+        if (name != null) {
+            return highlight(name, on);
+            }
+        var flags = data.scalerFlags;
+        var settings = data.settings;
+        highlight('rot', settings.rot);
+        highlight('brgt', settings.brgt);
+        highlight('cont', settings.cont);
+        highlight('bird', settings.isBirdDivVisible);
+        highlight('help', settings.isAboutDivVisible);
+        highlight('hmir', flags.hmir);
+        highlight('vmir', flags.vmir);
+        highlight('quality', flags.q1 || flags.q2);
+        highlight('zoomin', ! isFullArea(data.zoomArea));
+        };
+        
     // create Transform from area and $img
-    var getImgTrafo = function ($img, area, rot, hmir, vmir) {
+    var getImgTrafo = function ($img, area, rot, hmir, vmir, mode, data) {
         var picrect = geom.rectangle($img);
+        if (mode != null) {
+            var imgInfo = data.imgInfo;
+            if (mode === 'pixel') {
+                // scaler mo=clip - image area size does not come from ww, wh
+                if (imgInfo != null) {
+                    area.width = picrect.width / imgInfo.width;
+                    area.height = picrect.height / imgInfo.height;
+                } else {
+                    console.error("No image info for pixel mode!");
+                }
+            }
+            if (mode === 'size') {
+                // scaler mo=osize - image area size does not come from ww, wh
+                if (imgInfo != null) {
+                    var ddpi = parseFloat(data.settings.ddpi);
+                    area.width = (picrect.width / ddpi) / (imgInfo.width / imgInfo.dpi_x);
+                    area.height = (picrect.height / ddpi) / (imgInfo.height / imgInfo.dpi_y);
+                } else {
+                    console.error("No image info for original size mode!");
+                }
+            }
+        }
         var trafo = geom.transform();
         // move zoom area offset to center
         trafo.concat(trafo.getTranslation(geom.position(-area.x, -area.y)));
@@ -1116,27 +1234,32 @@
         return trafo;
     };
 
+    // update scaler image transform
+    var updateImgTrafo = function (data) {
+        var $img = data.$img;
+        if ($img != null && $img.get(0).complete) {
+            // create Transform from current zoomArea and image size
+            data.imgTrafo = getImgTrafo($img, data.zoomArea,
+                    data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir,
+                    data.scaleMode, data);
+            // console.debug("imgTrafo=", data.imgTrafo);
+        }
+    };
+    
     // returns function for load event of scaler img
     var scalerImgLoadedHandler = function (data) {
         return function () {
             var $img = $(this);
+            console.debug("scaler img loaded=",$img);
             var $scaler = data.$scaler;
-            // create Transform from current area and picsize
-            data.imgTrafo = getImgTrafo($img, data.zoomArea,
-                    data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir);
-            console.debug("imgTrafo=", data.imgTrafo);
+            var imgRect = geom.rectangle($img);
             // adjust scaler div size
-            var imgRect = geom.rectangle($img);
-            console.debug("imgrect=", imgRect);
             imgRect.adjustDiv($scaler);
             // show image in case it was hidden (for example in zoomDrag)
             $img.css('visibility', 'visible');
             $scaler.css({'opacity' : '1', 'background-image' : 'none'});
-            // display marks
-            renderMarks(data);
-            // enable drag-to-scroll
-            setupZoomDrag(data);
-            // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
+            // update display (render marks, etc.)
+            updateDisplay(data);
         };
     };
 
@@ -1148,17 +1271,17 @@
             console.debug("birdImg loaded!", $birdImg, "rect=", birdRect, "data=", data);
             if (birdRect.width === 0) {
                 // malheureusement IE7 calls load handler when there is no size info yet 
-                setTimeout(function () { $birdImg.triggerHandler('load') }, 200);
+                setTimeout(function () { $birdImg.triggerHandler('load'); }, 200);
                 }
-            // display red indicator around zoomarea
-            renderBirdArea(data);
-            // enable click and drag
-            setupBirdDrag(data);
+            // update display (zoom area indicator)
+            updateDisplay(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
@@ -1179,6 +1302,7 @@
 
     // show zoom area indicator on bird's eye view
     var renderBirdArea = function (data) {
+        if (data.$birdImg == null || ! data.$birdImg.get(0).complete) return;
         var $birdZoom = data.$birdZoom;
         var zoomArea = data.zoomArea;
         var normalSize = isFullArea(zoomArea);
@@ -1405,6 +1529,8 @@
         var $scaler = data.$scaler;
         var $img = data.$img;
         var fullRect = null;
+        // hide marks
+        data.$elem.find('div.mark').hide();
         // hide the scaler img, show background of div instead
         $img.css('visibility', 'hidden');
         var scalerCss = {
@@ -1486,6 +1612,8 @@
                 // no movement
                 $img.css('visibility', 'visible');
                 $scaler.css({'opacity' : '1', 'background-image' : 'none'});
+                // unhide marks
+                data.$elem.find('div.mark').show();
                 return false; 
             }
             // get old zoom area (screen coordinates)
@@ -1525,7 +1653,31 @@
         flags['q'+qual] = 'q'+qual;
     };
 
-    // sets a key to a value (relative values with +/- if relative=true)
+    // get image scale mode (screen, pixel, size)
+    var getScaleMode = function (data) {
+        if (data.scalerFlags.clip != null) {
+            return 'pixel';
+        } else if (data.scalerFlags.osize != null) {
+            return 'size';
+        }
+        // mo=fit is default
+        return 'screen';
+    };
+    
+    // set image scale mode (screen, pixel, size)
+    var setScaleMode = function (data, mode) {
+        delete data.scalerFlags.fit;
+        delete data.scalerFlags.clip;
+        delete data.scalerFlags.osize;
+        if (mode === 'pixel') {
+            data.scalerFlags.clip = 'clip';
+        } else if (mode === 'size') {
+            data.scalerFlags.osize = 'osize';
+        }
+        // mo=fit is default
+    };
+    
+     // sets a key to a value (relative values with +/- if relative=true)
     var setNumValue = function(settings, key, value) {
         if (value == null) return null;
         if (isNumber(value)) {
@@ -1580,8 +1732,28 @@
         }
 
     // hook plugin into jquery
-    $.fn.digilib = function(action) {
-        if (actions[action]) {
+    $.fn.digilib = function(action, obj) {
+        // plugin extension mechanism
+        if (action === 'extendPlugin') {
+            // for each digilib $elem extend data.settings with obj.options
+            if (obj.options) {
+                this.each(function() {
+                    var $elem = $(this);
+                    // console.debug('extending:', $elem);
+                    var data = $elem.data('digilib');
+                    if (!data) {
+                        return console.log('cannot extend digilib plugin, element not initialised!');
+                        }
+                    var settings = data.settings;
+                    $.extend(settings, obj.options);
+                    // console.log('settings:', settings);
+                    });
+                }
+            delete(obj.options);
+            // extend the plugin actions (to make this useful, 
+            // maybe we need to expose some more internal functions)
+            $.extend(actions, obj);
+        } else if (actions[action]) {
             // call action on this with the remaining arguments (inserting data as first argument)
             var $elem = $(this);
             var data = $elem.data('digilib');
diff -r a4bb163691a0 -r 292b2948533f client/digitallibrary/jquery/svg/svgBasics.html
--- a/client/digitallibrary/jquery/svg/svgBasics.html	Tue Feb 08 22:49:44 2011 +0100
+++ b/client/digitallibrary/jquery/svg/svgBasics.html	Fri Feb 11 10:12:41 2011 +0100
@@ -1,19 +1,28 @@
+
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
 <html>
-<head>
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<title>jQuery SVG Basics</title>
-<style type="text/css">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+        <title>jQuery SVG Basics</title>
+        <style type="text/css">
 @import "jquery.svg.css";
 
-#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
-</style>
-<script type="text/javascript" src="../jquery-1.4.4.js"></script>
-<script type="text/javascript" src="jquery.svg.js"></script>
-<script type="text/javascript">
+#svgbasics { position: absolute; border: 1px solid blue; }
+#img img {width: 400px; }
+
+        </style>
+        <script type="text/javascript" src="../dlGeometry.js"></script>
+        <script type="text/javascript" src="../jquery-1.4.4.js"></script>
+        <script type="text/javascript" src="jquery.svg.js"></script>
+        <script type="text/javascript">
 $(function() {
-	$('#svgbasics').svg({onLoad: drawInitial});
+    var geom = dlGeometry();
+    var svg = $('#svgbasics');
+    var $div = $('#img img');
+    var divrect = geom.rectangle($div);
+    divrect.addPosition({x: -1, y: -1}).adjustDiv(svg);
+    svg.svg({onLoad: drawInitial});
 	$('button').click(drawShape);
 });
 
@@ -22,6 +31,7 @@
 	var g = svg.group({stroke: 'black', 'stroke-width': 2});
 	svg.line(g, 15, 75, 135, 75);
 	svg.line(g, 75, 15, 75, 135);
+	svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false);
 }
 
 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
@@ -51,24 +61,31 @@
 	else if (shape == 'clear') {
 		svg.clear();
 	}
+	else if (shape == 'zoom') {
+		svg.configure({viewBox: '0 0 800 1000'}, true);
+		//svg.animate({svgViewBox: '0, 0, 100, 100'}, 2000);
+	}
+	
 }
 
 function random(range) {
 	return Math.floor(Math.random() * range);
 }
 </script>
-</head>
-<body>
-<h1>jQuery SVG Basics</h1>
-<p>This page demonstrates the very basics of the <a href="http://keith-wood.name/svg.html">jQuery SVG plugin</a>.
-	It contains the minimum requirements for using the plugin and
-	can be used as the basis for your own experimentation.</p>
-<p>The page creates an SVG document in the area below and draws an initial display.
-	The buttons then add randomly sized and coloured shapes on demand.</p>
-<p>For more detail see the <a href="http://keith-wood.name/svgRef.html">documentation reference</a> page.</p>
-<div id="svgbasics"></div>
-<p><button id="rect">Add rectangle</button> <button id="line">Add line</button>
-	<button id="circle">Add circle</button> <button id="ellipse">Add ellipse</button>
-	<button id="clear">Clear</button></p>
-</body>
+    </head>
+    <body>
+        <h1>jQuery SVG</h1>
+        <div id="img">
+            <img src="peterskuppel.jpg" />
+        </div>
+        <div id="svgbasics"></div>
+        <p>
+            <button id="rect">Add rectangle</button>
+            <button id="line">Add line</button>
+            <button id="circle">Add circle</button>
+            <button id="ellipse">Add ellipse</button>
+            <button id="zoom">Zoom</button>
+            <button id="clear">Clear</button>
+        </p>
+    </body>
 </html>
diff -r a4bb163691a0 -r 292b2948533f servlet/src/digilib/image/ImageJobDescription.java
--- a/servlet/src/digilib/image/ImageJobDescription.java	Tue Feb 08 22:49:44 2011 +0100
+++ b/servlet/src/digilib/image/ImageJobDescription.java	Fri Feb 11 10:12:41 2011 +0100
@@ -317,12 +317,20 @@
 					if ((origResX == 0) || (origResY == 0)) {
 						throw new ImageOpException("Missing image DPI information!");
 					}
-					if ((getAsFloat("ddpix") == 0) || (getAsFloat("ddpiy") == 0)) {
-						throw new ImageOpException("Missing display DPI information!");
+					float ddpix = getAsFloat("ddpix");
+                    float ddpiy = getAsFloat("ddpiy");
+					if (ddpix == 0 || ddpiy == 0) {
+					    float ddpi = getAsFloat("ddpi");
+					    if (ddpi == 0) {
+					        throw new ImageOpException("Missing display DPI information!");
+					    } else {
+					        ddpix = ddpi;
+					        ddpiy = ddpi;
+					    }
 					}
 					// calculate absolute scale factor
-					float sx = getAsFloat("ddpix") / origResX;
-					float sy = getAsFloat("ddpiy") / origResY;
+					float sx = ddpix / origResX;
+					float sy = ddpiy / origResY;
 					// currently only same scale -- mean value
 					scaleXY = (sx + sy) / 2f;
 				} else {