--- a/client/digitallibrary/greyskin/baselib.js	Fri Jan 13 11:59:47 2006 +0100
+++ b/client/digitallibrary/greyskin/baselib.js	Fri Jan 13 12:01:07 2006 +0100
@@ -631,11 +631,11 @@
 }
 
 function registerEventById(type, id, handler) {
-    registerEvent(type, document.getElementById(id), handler);
+    registerEvent(type, getElement(id), handler);
     }
 
 function unregisterEventById(type, id, handler) {
-    unregisterEvent(type, document.getElementById(id), handler);
+    unregisterEvent(type, getElement(id), handler);
     }
 
 function stopEvent(e) {
@@ -770,3 +770,84 @@
 
 // :tabSize=4:indentSize=4:noTabs=true:
 
+function Slider(id, valMin, valMax, valStart, stepSize, onChange) {
+    // a (horizontal) slider widget
+    this.id = id;
+    this.elem   = getElement(id);
+    this.slider = getElement(id + ".slider");   // the slider handle
+    this.input  = getElement(id + ".input", 1); // optional input field
+    this.bar    = getElement(id + ".bar");      // the slider bar 
+    this.barRect = getElementRect(this.bar);
+    this.minX = this.barRect.x;
+    this.maxX = this.minX + this.barRect.width; 
+    this.valMin = valMin;
+    this.valMax = valMax;
+    this.valStart = valStart;
+    this.value = valStart;
+    this.stepSize = stepSize;
+    this.valueLabel  = getElement(id + ".value", 1);
+    this.valMinLabel = getElement(id + ".valmin", 1);
+    this.valMaxLabel = getElement(id + ".valmax", 1);
+    this.onChange = onChange ? onChange : function() {};
+    return this;
+    }
+
+Slider.prototype.show = function(show) {
+    showElement(this.elem, show);
+    }
+    
+Slider.prototype.activate = function() {
+    }
+
+Slider.prototype.disable = function() {
+    }
+
+Slider.prototype.reset = function() {
+    this.setValue(this.startVal);
+    }
+
+Slider.prototype.setValue = function(newVal) {
+    // sets slider to new value and updates
+    this.value = newVal;
+    this.update;
+    }
+
+Slider.prototype.update = function() {
+    // updates slider position to new value
+    }
+
+Slider.prototype.setupEvents = function() {
+    // installs all event callbacks
+    registerEvent("mousedown", this.slider, this.onDragStart);
+    }
+
+Slider.prototype.onDragStart = function(evt) {
+    unregisterEvent("mousedown", this.slider, this.onDragStart);
+    registerEvent("mousemove", document, this.onDrag);
+    registerEvent("mouseup",   document, this.onDragEnd);
+    this.startPos = evtPosition(evt);
+    return stopEvent(evt);
+    }
+
+Slider.prototype.onDrag = function(evt) {
+    var pos = evtPosition(evt);
+    var dx = pos.x - this.startPos;
+    // move birdArea div, keeping size
+    newRect = new Rectangle(startPos.x, startPos.y, dx, dy);
+    pixel.innerHTML = (xDir ? dx : dy) + " px";
+    moveElement(calDiv, newRect);
+    showElement(calDiv, true);
+    return stopEvent(evt);
+    }
+
+Slider.prototype.onDragEnd = function(evt) {
+    unregisterEvent("mousemove", document, this.onDrag);
+    unregisterEvent("mouseup",   document, this.onDragEnd);
+    this.onChange(this.value);
+    return stopEvent(evt);
+    }
+
+Slider.prototype.onInputChange = function() {
+    this.onChange(this.value);
+    }
+

--- a/client/digitallibrary/greyskin/diginew.css	Fri Jan 13 11:59:47 2006 +0100
+++ b/client/digitallibrary/greyskin/diginew.css	Fri Jan 13 12:01:07 2006 +0100
@@ -109,8 +109,8 @@
 	border: 1px dotted lightcyan;
 	z-index: 100;
 	visibility: hidden;
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
+	/* box-sizing: border-box;
+	-moz-box-sizing: border-box; */
 	}
 
 div#buttons {
@@ -133,8 +133,8 @@
 	border: 2px solid #ffa060;
 	visibility: hidden;
 	z-index: 200;
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
+	/* box-sizing: border-box;
+	-moz-box-sizing: border-box; */
 	}
 
 div#bird-area {
@@ -142,8 +142,8 @@
 	border: 2px solid #ffa060;
 	visibility: hidden;
 	background-color: transparent;
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
+	/* box-sizing: border-box;
+	-moz-box-sizing: border-box; */
 	z-index: 10;
 	}
 
@@ -174,11 +174,9 @@
 
 div#sizes {
 	position: absolute;
-	top: 100px;
-	right: 40px;
 	padding: 0px 2px;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-	border: 3px solid lightcyan;
+	border: 2px solid lightcyan;
 	background-color: lightgrey;
 	text-align: center;
 	visibility: hidden;
@@ -186,17 +184,17 @@
 	}
 
 div#sizes p {
-	margin: 2px;
+	margin: 2px 0px;
+	padding: 0px;
 	}
 
 div#sizes p:hover {
-	background-color: black;
+	background-color: #ffa060;
 	}
 
 div#sizes a {
 	text-decoration: none;
-	font-weight: bold;
-	color: lightcyan;
+	color: black;
 	}
 
 div#about {
@@ -207,7 +205,7 @@
 	height: 200px;
 	padding: 0px 2px;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-	border: 3px solid lightcyan;
+	border: 2px solid lightcyan;
 	background-color: lightgrey;
 	text-align: center;
 	visibility: hidden;
@@ -233,7 +231,7 @@
 	color: lightgreen;
 	border: 1px dotted black;
 	background-color: transparent;
-	visibility: hidden;
+	/*visibility: hidden;*/
 	}
 
 div#debug p.debug, h1 {