--- a/client/digitallibrary/greyskin/diginew.css	Tue Jan 10 12:26:41 2006 +0100
+++ b/client/digitallibrary/greyskin/diginew.css	Tue Jan 10 12:28:57 2006 +0100
@@ -89,8 +89,13 @@
 	/* filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mark-bg-16.png') */
 	}
 		
-div#scaler-table {
-	padding-right: 40px;
+div#scaler {
+	position: absolute;
+	left: 8px;
+	top: 8px;
+	bottom: 30px;
+	right: 44px;
+	overflow: auto;
 	}
 
 div#overlay {
@@ -138,16 +143,30 @@
 	}
 
 div#calibration {
+	background: url('blue.png');
 	position: absolute;
-	padding: 0px 2px;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	border: 3px solid lightcyan;
-	background-color: lightgrey;
-	text-align: center;
+	padding: 0px;
 	visibility: hidden;
 	z-index: 1000;
 	}
 
+div#calibration div {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	padding: 0px;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	text-align: center;
+	color: lightcyan;
+	border: 1px solid lightcyan;
+	background: url('ruler-top.gif') 0px -1px repeat-x;
+	z-index: 1001;
+	}
+
+p.cm {
+	font-weight: bold;
+	}
+
 div#about {
 	position: absolute;
 	width: 200px;
@@ -179,8 +198,8 @@
 	overflow: auto;
 	padding: 0px 2px;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-	color: green;
-	border: 1px dotted lightcyan;
+	color: lightgreen;
+	border: 1px dotted black;
 	background-color: transparent;
 	}
 
@@ -193,5 +212,7 @@
 	margin: 0px;
 	padding: 2px 0px;
 	font-size: 9px;
+	background-color: black;
 	}	
 
+

--- a/client/digitallibrary/greyskin/diginew.jsp	Tue Jan 10 12:26:41 2006 +0100
+++ b/client/digitallibrary/greyskin/diginew.jsp	Tue Jan 10 12:28:57 2006 +0100
@@ -156,24 +156,30 @@
  </div>
 
  <!-- the calibration div -->
- <div id="calibration"><p>10 cm</p></div>
+ <div id="calibration">
+ 	<div>
+	<p>0 px</p>
+ 	<p class="cm">10 cm</p>
+	</div>
+ </div>
 
+ <!-- the buttons -->
  <div id="buttons">
 	<div class="button">
 		<a
 			class="icon"
-			href="javascript:getRefWin()"
+			href="javascript:toggleBirdDiv()"
 			>
 
 			<img
 				class="png"
-				id="reference"
-				title="get a reference URL"
-				src="reference.png"
+				id="bird"
+				title="show bird's eye view"
+				src="birds-eye.png"
 			>
-		</a> 
+		</a>
 	</div>
-	
+
 	<div class="button">
 		<a
 			class="icon"
@@ -237,6 +243,21 @@
 	<div class="button">
 		<a
 			class="icon"
+			href="javascript:pageWidth()"
+			>
+
+			<img
+				class="png"
+				id="page-width"
+				title="page width"
+				src="pagewidth.png"
+			>
+		</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
 			href="javascript:gotoPage('-1')"
 			>
 
@@ -282,18 +303,18 @@
 	<div class="button">
 		<a
 			class="icon"
-			href="javascript:toggleBirdDiv()"
+			href="javascript:getRefWin()"
 			>
 
 			<img
 				class="png"
-				id="bird"
-				title="show bird's eye view"
-				src="birds-eye.png"
+				id="reference"
+				title="get a reference URL"
+				src="reference.png"
 			>
-		</a>
+		</a> 
 	</div>
-
+	
 	<div class="button">
 		<a
 			class="icon"

--- a/client/digitallibrary/greyskin/dllib.js	Tue Jan 10 12:26:41 2006 +0100
+++ b/client/digitallibrary/greyskin/dllib.js	Tue Jan 10 12:28:57 2006 +0100
@@ -24,7 +24,7 @@
 
 */
 digilibVersion = "Digilib NG";
-dllibVersion = "2.027";
+dllibVersion = "2.028";
 isDigilibInitialized = false;    // gets set to true in dl_param_init
 reloadPage = true; // reload the page when parameters are changed, otherwise update only "src" attribute of scaler img 
 
@@ -857,6 +857,7 @@
     var startPos; // anchor for dragging
     var newRect;  // position after drag
     var calDiv = getElement("calibration");
+    var pixel = calDiv.getElementsByTagName("p")[0];
     var overlay = getElement("overlay");
     moveElement(overlay, getWinRect());
     showElement(overlay, true);
@@ -878,7 +879,6 @@
             xDir ? 1 : CALIBRATION_WIDTH,
             xDir ? CALIBRATION_WIDTH : 1
             );
-        // stay within image
         moveElement(calDiv, newRect);
         showElement(calDiv, true);
         // debugProps(getElementRect(bird))
@@ -892,7 +892,7 @@
         var dy = (xDir) ? CALIBRATION_WIDTH : pos.y - startPos.y;
         // move birdArea div, keeping size
         newRect = new Rectangle(startPos.x, startPos.y, dx, dy);
-        // stay within image
+        pixel.innerHTML = (xDir ? dx : dy) + " px";
         moveElement(calDiv, newRect);
         showElement(calDiv, true);
         return stopEvent(evt);
@@ -904,14 +904,35 @@
         unregisterEvent("mouseup",   document, calibrationEndDrag);
         unregisterEvent("mousemove", calDiv, calibrationMove);
         unregisterEvent("mouseup",   calDiv, calibrationEndDrag);
+        if (xDir) {
+            var val = newRect.width * 0.254; // ratio dm/inch
+            cookie.add("ddpi", val);
+            cookie.add("ddpix", val);
+        } else {
+            var val = newRect.height * 0.254;
+            cookie.add("ddpiy", val);
+            }
         showElement(calDiv, false);
         showElement(overlay, false);
         moveCenter(true);
-
-        // TODO: calculate ...
         return stopEvent(evt);
         }
     }
 
+function originalSize() {
+    var dpi = cookie.get("ddpi");
+    if (dpi == null) {
+        alert("Screen has not yet been calibrated - using default value of 72 dpi");
+        dpi = 72;
+        }
+    setParameter("ddpi", dpi);
+    addFlag("osize");
+    display();
+}
+    
+function pixelByPixel() {
+    addFlag("clip");
+    display();
+}
 // :tabSize=4:indentSize=4:noTabs=true: