--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Thu Jan 26 15:02:29 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Thu Jan 26 15:06:00 2012 +0100
@@ -118,7 +118,7 @@
                 icon : "size.png"
                 },
             calibrationx : {
-                onclick : "calibrate",
+                onclick : "showCalibrationDiv",
                 tooltip : "calibrate screen resolution",
                 icon : "calibration-x.png"
                 },
@@ -237,6 +237,22 @@
                 // persist setting
                 fn.storeOptions(data);
             },
+            // shows Calibration Div
+            showCalibrationDiv : function (data) {
+                var $elem = data.$elem;
+                var settings = data.settings;
+                var $calDiv = $('#calibration');
+                var $input = $('#calibration-input');
+                $calDiv.fadeIn();
+                $
+                // var cm = window.prompt("The length of the scale on your screen in centimeter:");
+/*                 if (cm) {
+                    var dpi = calRect.width / parseFloat(cm) * 2.54;
+                    this.params.set("ddpi", cropFloat(dpi));
+                    }
+ */
+            },
+
             // shows ScaleModeSelector
             showScaleModeSelector : function (data) {
                 var $elem = data.$elem;
@@ -299,6 +315,34 @@
         }
         // create ScaleMode selector;
         setupScaleModeDiv(data);
+        // create Calibration div;
+        setupCalibrationDiv(data);
+    };
+
+    /** creates HTML structure for the calibration div
+     */
+    var setupCalibrationDiv = function (data) {
+        var $elem = data.$elem;
+        var settings = data.settings;
+        var html = '\
+            <div id="calibration" class="calibration">\
+                <div class="ruler">\
+                    <div class="cm">Please enter the length of this scale on your screen</div>\
+                    <input id="calibration-input" /> cm\
+                </div>\
+            </div>';
+        var $calDiv = $(html);
+        //$rulerDiv.append($cmDiv);
+        //$rulerDiv.append($cmInput);
+        //$calDiv.append($rulerDiv);
+        $elem.append($calDiv);
+        var calRect = geom.rectangle($calDiv);
+        var screenRect = fn.getFullscreenRect(data);
+        console.debug('calRect:', calRect);
+        console.debug('screenRect:', screenRect);
+        calRect.setCenter(screenRect.getCenter());
+        console.debug('calRect:', calRect);
+        calRect.adjustDiv($calDiv);
     };
 
     /** creates HTML structure for the scale mode menu
@@ -334,11 +378,10 @@
         var $select = $(event.target);
         var newMode = $select.find("option:selected").attr("name");
         console.debug('setting mode to:', newMode);
-        fn.setScaleMode(data, newMode);
         var $div = data.scaleModeDiv;
         $(document).off("click.scalemode");
         $div.fadeOut();
-        fn.redisplay(data);
+        digilib.actions.setScaleMode(data, newMode);
     };
 
     // creates HTML structure for a single button

--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Jan 26 15:02:29 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Jan 26 15:06:00 2012 +0100
@@ -110,6 +110,32 @@
 	font-weight: bold;
 }
 
+div.digilib div.calibration {
+	background: url('blue.png');
+	position: absolute;
+	border: 1px solid lightcyan;
+	top: 0px;
+	width: 400px;
+	display: none;
+	z-index: 9999;
+	}
+
+div.digilib div.ruler {
+	width: 100%;
+	height: 100%;
+	padding-bottom: 10px;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-weight: bold;
+	text-align: center;
+	color: lightcyan;
+	background: url('ruler-top.gif') 0px -1px repeat-x;
+	}
+
+div.digilib div.cm {
+	padding: 10px;
+	}
+
 div.infobutton {
     background-color: white;
     color: grey;

--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Thu Jan 26 15:02:29 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Thu Jan 26 15:06:00 2012 +0100
@@ -133,10 +133,10 @@
             } else if (y == null) {
                 // assume x is rectangle
                 that = {
-                    x : x.x,
-                    y : x.y,
-                    width : x.width,
-                    height : x.height
+                    x : x.x || 0,
+                    y : x.y || 0,
+                    width : x.width || 0,
+                    height : x.height || 0
                 };
             } else {
                 // assume x and y are Position

--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Thu Jan 26 15:02:29 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Thu Jan 26 15:06:00 2012 +0100
@@ -934,7 +934,7 @@
         setupZoomDrag(data);
         renderZoomArrows(data);
     };
-    
+
     /** returns maximum size for scaler img in fullscreen mode.
      * 
      */
@@ -963,10 +963,17 @@
         // account for left/right border, body margins and additional requirements
         var imgW = winW - borderW - buttonsW;
         var imgH = winH - borderH;
-        console.debug(winW, winH, 'winW:', $win.width(), 'border:', borderW, 'buttonsW:', buttonsW, 'calc:', imgW);
+        console.debug('screen w/h:', winW, winH, 'window.width', $win.width(), 'border:', borderW, 'buttonsW:', buttonsW, 'img w/h:', imgW, imgH);
         return geom.size(imgW, imgH);
     };
 
+    /** returns a rectangle.with the fullscreen dimensions 
+     * 
+     */
+    var getFullscreenRect = function (data) {
+        return geom.rectangle(getFullscreenImgSize(data));
+    };
+
     /** creates HTML structure for digilib in elem
      * 
      */
@@ -1758,6 +1765,7 @@
             setFitMode : setFitMode,
             canMove : canMove,
             isFullArea : isFullArea,
+            getFullscreenRect : getFullscreenRect,
             getBorderWidth : getBorderWidth,
             cropFloat : cropFloat,
             cropFloatStr : cropFloatStr