# HG changeset patch
# User robcast
# Date 1299751028 -3600
# Node ID 5431156f7b9df49e0c6a404680779da329d5d923
# Parent  ace973a106b56fb654212f08ddc6f7ac8e2ad3eb# Parent  7ebdc106a61ace189d41df7919f8c667d10584fe
Merge from jquery branch
7ebdc106a61ace189d41df7919f8c667d10584fe

diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/down.png
Binary file client/digitallibrary/jquery/img/down.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded.svg
--- a/client/digitallibrary/jquery/img/embedded.svg	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/img/embedded.svg	Thu Mar 10 10:57:08 2011 +0100
@@ -49,9 +49,9 @@
      inkscape:pageshadow="2"
      inkscape:zoom="16.533016"
      inkscape:cx="15.816836"
-     inkscape:cy="9.7629524"
+     inkscape:cy="15.897753"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer27"
      showgrid="true"
      inkscape:window-width="1024"
      inkscape:window-height="719"
@@ -86,7 +86,8 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(0,-1020.3622)"
-     style="display:inline" />
+     style="display:inline"
+     sodipodi:insensitive="true" />
   <g
      inkscape:groupmode="layer"
      id="layer2"
@@ -419,8 +420,7 @@
      inkscape:groupmode="layer"
      id="layer15"
      inkscape:label="page"
-     style="display:none"
-     sodipodi:insensitive="true">
+     style="display:none">
     <path
        style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#15a221;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
        d="m 5,1 0,30 22,0 0,-19.03125 -9.53125,0 -1.375,0 L 16.09375,1 5,1 z m 12.46875,0.84375 0,8.75 8.8125,0 -8.8125,-8.75 z M 7,3 l 7,0 0,11 11,0 0,15 -11,0 -1,0 -6,0 0,-26 z"
@@ -959,6 +959,121 @@
   </g>
   <g
      inkscape:groupmode="layer"
+     id="layer26"
+     inkscape:label="regions"
+     style="display:none"
+     sodipodi:insensitive="true">
+    <rect
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="rect150"
+       width="13.064767"
+       height="12.520402"
+       x="2.6008563"
+       y="6.8987117" />
+    <rect
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="rect212"
+       width="7.0162635"
+       height="11.915551"
+       x="22.742373"
+       y="18.148928" />
+    <rect
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="rect214"
+       width="7.5606289"
+       height="6.3509283"
+       x="18.085024"
+       y="2.3018494" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer27"
+     inkscape:label="addregion"
+     style="display:none"
+     sodipodi:insensitive="true">
+    <path
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       d="m 14.078836,5.3407455 0,12.5312505 13.09375,0 0,-12.5312505 -13.09375,0 z m 1.84375,1.625 9.46875,0 0,9.0625005 -9.46875,0 0,-9.0625005 z"
+       id="rect150-1"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       d="m 5.2704736,1.2134067 0,30.0000003 21.9999994,0 0,-30.0000003 -21.9999994,0 z m 2,2 17.9999994,0 0,26.0000003 -17.9999994,0 0,-26.0000003 z"
+       id="rect956-7"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     style="display:none"
+     inkscape:label="delregion"
+     id="g202"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <path
+       inkscape:connector-curvature="0"
+       id="path204"
+       d="m 14.078836,5.3407455 0,12.5312505 13.09375,0 0,-12.5312505 -13.09375,0 z m 1.84375,1.625 9.46875,0 0,9.0625005 -9.46875,0 0,-9.0625005 z"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path206"
+       d="m 5.2704736,1.2134067 0,30.0000003 21.9999994,0 0,-30.0000003 -21.9999994,0 z m 2,2 17.9999994,0 0,26.0000003 -17.9999994,0 0,-26.0000003 z"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <rect
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="rect210"
+       width="25.884966"
+       height="2.6429093"
+       x="-6.7994733"
+       y="21.40773"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)" />
+  </g>
+  <g
+     style="display:none"
+     inkscape:label="regioninfo"
+     id="g230"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <path
+       inkscape:connector-curvature="0"
+       id="path232"
+       d="m 14.078836,5.3407455 0,12.5312505 13.09375,0 0,-12.5312505 -13.09375,0 z m 1.84375,1.625 9.46875,0 0,9.0625005 -9.46875,0 0,-9.0625005 z"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path234"
+       d="m 5.2704736,1.2134067 0,30.0000003 21.9999994,0 0,-30.0000003 -21.9999994,0 z m 2,2 17.9999994,0 0,26.0000003 -17.9999994,0 0,-26.0000003 z"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <text
+       xml:space="preserve"
+       style="font-size:28.13728714px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Century Gothic;-inkscape-font-specification:Century Gothic"
+       x="13.438262"
+       y="32.891159"
+       id="text236"
+       sodipodi:linespacing="125%"
+       transform="scale(1.2650445,0.79048601)"><tspan
+         sodipodi:role="line"
+         id="tspan238"
+         x="13.438262"
+         y="32.891159">i</tspan></text>
+    <rect
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="rect240"
+       width="6.0485034"
+       height="1.875036"
+       x="17.601145"
+       y="25.104706" />
+    <path
+       sodipodi:type="arc"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="path242"
+       sodipodi:cx="20.504425"
+       sodipodi:cy="10.527814"
+       sodipodi:rx="1.996006"
+       sodipodi:ry="1.996006"
+       d="m 22.500431,10.527814 a 1.996006,1.996006 0 1 1 -3.992012,0 1.996006,1.996006 0 1 1 3.992012,0 z" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
      id="layer5"
      inkscape:label="fonds"
      style="display:none"
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/16/addregion.png
Binary file client/digitallibrary/jquery/img/embedded/16/addregion.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/16/delregion.png
Binary file client/digitallibrary/jquery/img/embedded/16/delregion.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/16/regioninfo.png
Binary file client/digitallibrary/jquery/img/embedded/16/regioninfo.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/16/regions.png
Binary file client/digitallibrary/jquery/img/embedded/16/regions.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/32/addregion.png
Binary file client/digitallibrary/jquery/img/embedded/32/addregion.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/32/delregion.png
Binary file client/digitallibrary/jquery/img/embedded/32/delregion.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/32/regioninfo.png
Binary file client/digitallibrary/jquery/img/embedded/32/regioninfo.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/embedded/32/regions.png
Binary file client/digitallibrary/jquery/img/embedded/32/regions.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/left.png
Binary file client/digitallibrary/jquery/img/left.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/right.png
Binary file client/digitallibrary/jquery/img/right.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/img/up.png
Binary file client/digitallibrary/jquery/img/up.png has changed
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/jquery-test-embedded.html
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Thu Mar 10 10:57:08 2011 +0100
@@ -56,21 +56,25 @@
         <script type="text/javascript" src="jquery.digilib.js"></script>
         <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
         <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+        <script type="text/javascript" src="jquery.digilib.regions.js"></script>
+        <script type="text/javascript" src="jquery.digilib.pluginstub.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
 
 
         <script type="text/javascript">
             $(document).ready(function(){
-                 $('div.digilib').digilib({
+                var opts = {
                     interactionMode : 'embedded',
-                    birdDivWidth : 100, 
-                    birdDivHeight : 100
-                    });
+                    scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
+                    showRegionNumbers : false,
+                    autoRegionLinks : true
+                    };
+                var $div = $('div.digilib');
+                $div.digilib(opts);
 
-                 $('div.digilib').each(function(){
-                         console.log($(this).data('digilib').settings);
-                    });
-
+                // $('div.digilib').each(function(){
+                //    console.log($(this).data('digilib').settings);
+                //    });
             });
 
         </script>
@@ -93,7 +97,12 @@
 
                 <td>
                     <div id="digilib-3" class="digilib">
-                        <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/weide" />
+                        <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" />
+                        <div class="keep regioncontent">
+                            <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a>
+                            <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a>
+                            <a coords="0.3,0.5,0.15,0.1" />
+                        </div>
                     </div>
                 </td>
 
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Thu Mar 10 10:57:08 2011 +0100
@@ -71,8 +71,7 @@
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
                     showRegionNumbers : true,
-                    autoRegionLinks : false,
-                    includeRegionContent : true 
+                    autoRegionLinks : false
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
@@ -85,13 +84,15 @@
 
         <div id="digilib-1" class="digilib">
             <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" />
-            <div class="keep regioncontent">
-                <a href="http://www.mpiwg-berlin.mpg.de" rel="area:0.1/0.1/0.4/0.1">MPI fuer Wissenschaftsgeschichte</a>
-                <a href="http://www.biblhertz.it" rel="area:0.5/0.8/0.4/0.1">Bibliotheca Hertziana</a>
-                <a rel="area:0.3/0.5/0.15/0.1" />
-            </div>
         </div>
         <div id="debug">DEBUG</div>
+        <!-- 
+        <div class="keep regioncontent">
+            <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a>
+            <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a>
+            <a coords="0.3,0.5,0.15,0.1" />
+        </div>
+         -->
     </body>
 </html>
 
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Thu Mar 10 10:57:08 2011 +0100
@@ -66,14 +66,22 @@
 	opacity: 0.5;
 }
 
-div.region a {
+div.region {
+    color: white;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+}
+
+div.region a.regionnumber {
     color: white;
     text-decoration: none;
-    font-size: 11px;
 	font-weight: bold;
-	height: 15px;
-	width: 16px;
-	margin: 3px;
+	font-size: 11px;
+	text-align: center;
+    padding: 0px 2px;
+    margin-right: 4px;
+    border: 1px solid white;
+    display: inline-block;
 }
 
 div.regioncontent {
@@ -84,7 +92,6 @@
     display: none;
     position: absolute;
 	top: 100px;
-	left: 250px;
 	padding: 10px;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 12px;
@@ -100,6 +107,36 @@
 	font-weight: bold;
 }
 
+div.infobutton {
+    background-color: white;
+    color: grey;
+    padding: 0px 4px;
+    margin: 0px 2px;
+    float: left;
+}
+
+div.info {
+    clear: both;
+    display: none;
+    margin: 10px;
+}
+
+div.infoheader {
+    width: 300px;
+    margin-bottom: 20px;
+}
+
+div.arrow {
+    position: absolute;
+    text-align: center;
+    background-color: black;
+    opacity: 0.08;
+}
+
+div.arrow:hover {
+    opacity: 0.5;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
@@ -135,16 +172,16 @@
 	top: 0px;
 	padding: 1px;
 	background-color: grey;
-	opacity: 0.4;
+	opacity: 0.5;
 	z-index: 100;
 }
 
 div.digilib.dl_embedded div.button:hover {
-	background-color: darkred;
+	background-color: black;
 }
 
 div.digilib.dl_embedded div.button-on {
-	background-color: black;
+	background-color: darkgreen;
 }
 
 div.digilib.dl_embedded div.birdview {
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/jquery.digilib.geometry.js
--- a/client/digitallibrary/jquery/jquery.digilib.geometry.js	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.geometry.js	Thu Mar 10 10:57:08 2011 +0100
@@ -262,24 +262,25 @@
         };
         // returns the intersection of rectangle "rect" and this one
         that.intersect = function(rect) {
-            var res = rect.clipTo(this);
-            if (res.width < 0 || res.height < 0) res = null;
-            return res;
+            var r = rect.copy();
+            var result = r.clipTo(this);
+            if (result.width < 0 || result.height < 0) result = null;
+            return result;
         };
 
         // returns a copy of rectangle "rect" that fits into this one
         // (moving it first)
         that.fit = function(rect) {
-            var sec = rect.copy();
-            sec.x = Math.max(sec.x, this.x);
-            sec.y = Math.max(sec.y, this.x);
-            if (sec.x + sec.width > this.x + this.width) {
-                sec.x = this.x + this.width - sec.width;
+            var r = rect.copy();
+            r.x = Math.max(r.x, this.x);
+            r.y = Math.max(r.y, this.x);
+            if (r.x + r.width > this.x + this.width) {
+                r.x = this.x + this.width - r.width;
             }
-            if (sec.y + sec.height > this.y + this.height) {
-                sec.y = this.y + this.height - sec.height;
+            if (r.y + r.height > this.y + this.height) {
+                r.y = this.y + this.height - r.height;
             }
-            return sec.intersect(this);
+            return r.intersect(this);
         };
         // adjusts position and size of jQuery element "$elem" to this rectangle
         that.adjustDiv = function($elem) {
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Thu Mar 10 10:57:08 2011 +0100
@@ -218,16 +218,30 @@
                 // path to button images (must end with a slash)
                 'imagePath' : 'img/fullscreen/',
                 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","toggleoptions"],
+                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"],
                 'buttonSets' : ['standardSet', 'specialSet']
                 },
             'embedded' : {
                 'imagePath' : 'img/embedded/16/',
                 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"],
+                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"],
                 'buttonSets' : ['standardSet', 'specialSet']
                 }
         },
+        // arrow overlays for moving the zoomed area
+        'zoomArrows' : true,
+        // zoom arrow image info
+        'zoomArrowsInfo' : {
+             // path to arrow images (must end with a slash)
+            'imagePath' : 'img/',
+            // minimal width of the arrow bar (pixel)
+            'minwidth' : 6,
+            // image file names
+            'up' : 'up.png',
+            'down' : 'down.png',
+            'left' : 'left.png',
+            'right' : 'right.png'
+            },
         // number of visible button groups
         'visibleButtonSets' : 1,
         // is the "about" window shown?
@@ -239,7 +253,7 @@
         'maxBgSize' : 10000,
         // parameters used by background image
         'bgImgParams' : ['fn','pn','dw','dh','mo','rot'],
-        // space to be left free in full page display, default value is for scrollbar
+        // reserved space in full page display (default value accounts for vertical scrollbar)
         'scalerInset' : 10
         };
 
@@ -311,11 +325,14 @@
                             }
                         }
                     }
-                    // store $(this) element in data
-                    elemSettings = $.extend({}, settings, params);
+                    // setup $elem.data, needs "deep copy" because of nesting
+                    elemSettings = $.extend(true, {}, settings, params);
                     data = {
+                            // let $(this) know about $(this) :-)
                             $elem : $elem,
+                            // let $elem have its own copy of settings
                             settings : elemSettings,
+                            // and of the URL query parameters
                             queryParams : params,
                             // TODO: move plugins reference out of data
                             plugins : plugins
@@ -369,6 +386,8 @@
                 highlightButtons(data);
                 // about window creation - TODO: could be deferred? restrict to only one item?
                 setupAboutDiv(data);
+                // arrow overlays for moving zoomed detail
+                setupZoomArrows(data);
                 // send setup event
                 $(data).trigger('setup');
             });
@@ -909,6 +928,7 @@
         updateImgTrafo(data);
         renderMarks(data);
         setupZoomDrag(data);
+        renderZoomArrows(data);
         // send event
         $(data).trigger('update');
     };
@@ -1052,6 +1072,60 @@
         return $buttonsDiv;
     };
 
+    // creates arrow overlays for moving the zoomed area
+    var setupZoomArrows = function (data) {
+        var $elem = data.$elem;
+        var settings = data.settings;
+        var show = settings.zoomArrows;
+        console.log('zoom arrows:', show);
+        if (!show) return;
+        data.$arrows = {};
+        var $arrows = data.$arrows;
+        var info = settings.zoomArrowsInfo;
+        $.each(['up','down','left','right'], function(i, s){
+            var src = info.imagePath + info[s];
+            var $div = $('<div class="keep arrow arrow-' + s + '"/>');
+            var $img = $('<img src="' + src + '"/>');
+            $div.attr('title', s);
+            $img.attr('alt', s);
+            $div.append($img);
+            $elem.append($div);
+            $arrows[s] = $div;
+        });
+        $arrows.up.bind('click.digilib', function(event) {
+            //za.addPosition(delta.neg());
+            // transform back
+            // var newArea = data.imgTrafo.invtransform(za);
+            // data.zoomArea = FULL_AREA.fit(newArea);
+            redisplay(data);
+        });
+        $arrows.down.bind('click.digilib', function(event) {
+            redisplay(data);
+        });
+        $arrows.left.bind('click.digilib', function(event) {
+            redisplay(data);
+        });
+        $arrows.right.bind('click.digilib', function(event) {
+            redisplay(data);
+        });
+    };
+
+    // size and show arrow overlays, called after scaler img is loaded
+    var renderZoomArrows = function (data) {
+        var $arrows = data.$arrows;
+        var r = FULL_AREA.copy();
+        r.height = 0.05;
+        data.imgTrafo.transform(r).adjustDiv($arrows.up);
+        r.y = 0.95;
+        data.imgTrafo.transform(r).adjustDiv($arrows.down);
+        r = FULL_AREA.copy();
+        r.width = 0.05;
+        data.imgTrafo.transform(r).adjustDiv($arrows.left);
+        r.x = 0.95;
+        data.imgTrafo.transform(r).adjustDiv($arrows.right);
+    };
+
+
     // creates HTML structure for the about view in elem
     var setupAboutDiv = function (data) {
         var $elem = data.$elem;
@@ -1252,7 +1326,7 @@
     // 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);
+        console.debug("renderMarks: img=",data.$img," imgtrafo=",data.imgTrafo);
         var $elem = data.$elem;
         var marks = data.marks;
         // clear marks
@@ -1261,11 +1335,11 @@
             var mark = marks[i];
             if (data.zoomArea.containsPosition(mark)) {
                 var mpos = data.imgTrafo.transform(mark);
-                console.debug("renderMarks: mpos=",mpos);
+                console.debug("renderMarks: pos=",mpos);
                 // create mark
                 var html = '<div class="mark overlay">'+(i+1)+'</div>';
                 var $mark = $(html);
-                $mark.attr("id", "digilib-mark-" + i);
+                $mark.attr("id", "digilib-mark-"+(i+1));
                 $elem.append($mark);
                 mpos.adjustDiv($mark);
                 }
diff -r ace973a106b5 -r 5431156f7b9d client/digitallibrary/jquery/jquery.digilib.regions.js
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Mar 09 23:41:42 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Thu Mar 10 10:57:08 2011 +0100
@@ -3,11 +3,7 @@
 markup a digilib image with rectangular regions
 
 TODO:
-- store region in params/cookie, regarding zoom, mirror, rotation (like marks)
-- set regions programmatically
-- read regions from params/cookie and display
-- backlink mechanism
-- don't write to data.settings?
+    how to display regions correctly in embedded mode?
 */
 
 (function($) {
@@ -41,7 +37,7 @@
             icon : "regions.png"
             },
         regionhtml : {
-            onclick : "showRegionHTML",
+            onclick : "showRegionInfo",
             tooltip : "show information about regions",
             icon : "regioninfo.png"
             }
@@ -53,9 +49,9 @@
         // are region numbers shown?
         'showRegionNumbers' : false,
         // is window with region HTML shown?
-        'showRegionHTML' : false,
-        // should digilib look for region content in the page?
-        'includeRegionContent' : false,
+        'showRegionInfo' : false,
+        // is there region content in the page?
+        'hasRegionContent' : false,
         // turn any region into a clickable link to its detail view
         'autoRegionLinks' : false,
         // class name for content divs (must additionally be marked with class "keep")
@@ -63,7 +59,7 @@
         // buttonset of this plugin
         'regionSet' : ['regions', 'addregion', 'delregion', 'regionhtml', 'lessoptions'],
         // url param for regions
-        'rg' : null,
+        'rg' : null
         };
 
     var actions = { 
@@ -152,32 +148,27 @@
             var show = !data.settings.isRegionVisible;
             data.settings.isRegionVisible = show;
             fn.highlightButtons(data, 'regions', show);
-            showRegionDivs(data, 1);
+            renderRegions(data, 1);
         },
 
         // show/hide region HTML code 
-        "showRegionHTML" : function (data) {
-            var show = !data.settings.showRegionHTML;
-            data.settings.showRegionHTML = show;
+        "showRegionInfo" : function (data) {
+            var show = !data.settings.showRegionInfo;
+            data.settings.showRegionInfo = show;
             fn.highlightButtons(data, 'regionhtml', show);
             var $html = data.$htmlDiv;
             if (!show) {
+                // empty the div
                 $html.fadeOut(function () { 
                     $html.contents().remove();
                     });
                 return;
             }
-            // empty the div for HTML display
-            $html.append($('<div/>').text('<div class="keep regioncontent">'));
-            $.each(data.regions, function(index, region) {
-                    var area = "area:"
-                    + region.x + "/" + region.y + "/"
-                    + region.width + "/" + region.height;
-                $html.append($('<div/>').text('<a href="" rel="' + area + '">'));
-                $html.append($('<div/>').text('</a>'));
-                });
-            $html.append($('<div/>').text('</div>'));
-            $html.fadeIn();
+            regionInfo(data);
+        },
+
+        "redraw" : function (data) {
+            renderRegions(data);
         }
     };
 
@@ -191,46 +182,110 @@
         console.debug("regions", data.regions, "regionRect", regionRect);
     };
 
+    // clickable header
+    var regionInfoHeader = function (data) {
+        var $infoDiv = $('<div class="infoheader"/>');
+        var $h01 = $('<div class="infobutton">HTML</div>'); 
+        var $h02 = $('<div class="infobutton">SVG</div>'); 
+        var $h03 = $('<div class="infobutton">Digilib</div>'); 
+        var $h04 = $('<div class="infobutton">X</div>');
+        var bind = function($div, name) {
+            $div.bind('click.regioninfo', function () {
+                var $top = $(this).parent().parent();
+                $top.find('.info').hide();
+                $top.find('.' + name).show();
+                });
+            };
+        bind($h01, 'html');
+        bind($h02, 'svgattr');
+        bind($h03, 'digilib');
+        var $html = data.$htmlDiv;
+        $h04.bind('click.regioninfo', function () {
+            data.settings.showRegionInfo = false;
+            fn.highlightButtons(data, 'regionhtml', false);
+            $html.fadeOut(function () { 
+                $html.contents().remove();
+                });
+            });
+        $infoDiv.append($h01, $h02, $h03, $h04);
+        return $infoDiv;
+    };
+
+    // html for later insertion
+    var regionInfoHTML = function (data) {
+        var $infoDiv = $('<div class="info html"/>');
+        $infoDiv.append($('<div/>').text('<div class="keep regioncontent">'));
+        $.each(data.regions, function(index, r) {
+            var area = [r.x, r.y, r.width, r.height].join(',');
+            $infoDiv.append($('<div/>').text('<a coords="' + area + '" >'));
+            });
+        $infoDiv.append($('<div/>').text('</div>'));
+        return $infoDiv;
+    };
+
+    // SVG-style
+    var regionInfoSVG = function (data) {
+        var $infoDiv = $('<div class="info svgattr"/>');
+        $.each(data.regions, function(index, r) {
+            var area = r.getAsSvg();
+            $infoDiv.append($('<div/>').text('"' + area + '"'));
+            });
+        return $infoDiv;
+    };
+
+    // digilib-style
+    var regionInfoDigilib = function (data) {
+        var $infoDiv = $('<div class="info digilib"/>');
+        $.each(data.regions, function(index, r) {
+            var area = r.toString();
+            $infoDiv.append($('<div/>').text(area));
+            });
+        return $infoDiv;
+    };
+
+    // show region info in a window
+    var regionInfo = function (data) {
+        var $html = data.$htmlDiv;
+        $html.append(regionInfoHeader(data))
+        $html.append(regionInfoHTML(data));
+        $html.append(regionInfoSVG(data));
+        $html.append(regionInfoDigilib(data));
+        $html.fadeIn();
+    };
+
     // add a region to data.$elem
-    var addRegionDiv = function (data, index) {
+    var addRegionDiv = function (data, index, url) {
         var nr = index + 1; // we count regions from 1
         // create a digilib URL for this detail
-        var regionUrl = getRegionUrl(data, index);
+        url = url || getRegionUrl(data, index);
         var $regionDiv = $('<div class="region overlay" style="display:none"/>');
         $regionDiv.attr("id", ID_PREFIX + nr);
         data.$elem.append($regionDiv);
         if (data.settings.showRegionNumbers) {
-            var $regionNr = $('<div class="regionnumber"/>');
-            var $regionLink = $('<a/>');
-            $regionLink.attr('href', regionUrl);
+            var $regionLink = $('<a class="regionnumber"/>');
+            $regionLink.attr('href', url);
             $regionLink.text(nr);
-            $regionNr.append($regionLink);
-            $regionDiv.append($regionNr);
+            $regionDiv.append($regionLink);
         }
         if (data.settings.autoRegionLinks) {
             $regionDiv.bind('click.dlRegion', function() {
-                 window.location = regionUrl;
-            })
+                 window.location = url;
+            });
         }
         return $regionDiv;
     };
 
-    // add region content
-    var addRegionContent = function (region, $elem) {
-        var $regionDiv = region.$div;
-        $regionDiv.append($elem);
-    }
-
-    // create a region div from the data.regions collection
-    var createRegionDiv = function (regions, index) {
+    // create a region div from the data.regions array
+    var createRegionDiv = function (regions, index, url) {
+        var $regionDiv = addRegionDiv(data, index, url);
         var region = regions[index];
-        var $regionDiv = addRegionDiv(data, index);
         region.$div = $regionDiv;
         return $regionDiv;
     };
 
-    // create regions 
-    var createRegionDivs = function (data) {
+    // create regions from URL parameters
+    var createRegionsFromURL = function (data) {
+        unpackRegions(data);
         var regions = data.regions;
         $.each(regions, function(i) {
             createRegionDiv(regions, i);
@@ -241,33 +296,35 @@
     var createRegionsFromHTML = function (data) {
         var regions = data.regions;
         var selector = data.settings.regionContentSelector;
+        // regions are defined in "a" tags
         var $content = data.$elem.contents(selector).contents('a');
-        console.debug("createRegionsFromHTML", $content);
+        console.debug("createRegionsFromHTML. elems: ", $content);
         $content.each(function(index, a) {
             var $a = $(a); 
-            var href = $a.attr('href');
-            var rel = $a.attr('rel');
-            var area = rel.replace(/^area:/i, '');
-            var pos = area.split("/", 4);
+            // the "coords" attribute contains the region coords (0..1)
+            var coords = $a.attr('coords');
+            var pos = coords.split(",", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
-            var $regionDiv = createRegionDiv(regions, index);
-            $regionDiv.append($a.clone());
-            // $a.show();
+            // create the div
+            var href = $a.attr('href');
+            var $regionDiv = createRegionDiv(regions, index, href);
+            var $contents = $a.contents().clone();
+            $regionDiv.append($contents);
         });
     };
 
     // show a region on top of the scaler image 
-    var showRegionDiv = function (data, index, anim) {
+    var renderRegion = function (data, index, anim) {
         if (!data.imgTrafo) return;
         var $elem = data.$elem;
         var regions = data.regions;
         if (index > regions.length) return;
-        var region = regions[index]
+        var region = regions[index];
         var $regionDiv = region.$div;
         if (!$regionDiv) {
-            console.debug("showRegionDiv: region has no $div", region);
-            // alert("showRegionDiv: region has no $div to show");
+            console.debug("renderRegion: region has no $div", region);
+            // alert("renderRegion: region has no $div to show");
             return;
         }
         var regionRect = region.copy();
@@ -275,12 +332,14 @@
         if (show && data.zoomArea.overlapsRect(regionRect)) {
             regionRect.clipTo(data.zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
-            screenRect.adjustDiv($regionDiv);
+            console.debug("renderRegion: pos=",geom.position(screenRect));
             if (anim) {
                 $regionDiv.fadeIn();
             } else{
                 $regionDiv.show();
             }
+            // for some reason adjustDiv sets wrong coords when called BEFORE show()?
+            screenRect.adjustDiv($regionDiv);
         } else {
             if (anim) {
                 $regionDiv.fadeOut();
@@ -291,9 +350,9 @@
     };
 
     // show regions 
-    var showRegionDivs = function (data, anim) {
+    var renderRegions = function (data, anim) {
         for (var i = 0; i < data.regions.length ; i++) {
-            showRegionDiv(data, i, anim);
+            renderRegion(data, i, anim);
         }
     };
 
@@ -302,10 +361,10 @@
         var rg = data.settings.rg;
         if (rg == null) return;
         var regions = data.regions;
-        var rs = rg.split(",");
+        var rs = rg.split(";");
         for (var i = 0; i < rs.length; i++) {
             var r = rs[i];
-            var pos = r.split("/", 4);
+            var pos = r.split(",", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
             }
@@ -322,21 +381,21 @@
         for (var i = 0; i < regions.length; i++) {
             region = regions[i];
             if (i) {
-                rg += ',';
+                rg += ';';
             }
             rg += [
                 fn.cropFloatStr(region.x), 
                 fn.cropFloatStr(region.y),
                 fn.cropFloatStr(region.width),
                 fn.cropFloatStr(region.height)
-                ].join('/');
+                ].join(',');
         }
         data.settings.rg = rg;
     };
 
     // reload display after a region has been added or removed
     var redisplay = function (data) {
-        if (!data.settings.includeRegionContent) {
+        if (!data.settings.hasRegionContent) {
             packRegions(data);
         }
         fn.redisplay(data);
@@ -364,30 +423,30 @@
         data = this;
         console.debug("regions: handleSetup", data.settings.rg);
         // regions with content are given in HTML divs
-        if (data.settings.includeRegionContent) {
+        if (data.settings.hasRegionContent) {
             createRegionsFromHTML(data);
         // regions are defined in the URL
         } else {
-            unpackRegions(data);
-            createRegionDivs(data);
-            fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
+            createRegionsFromURL(data);
+            fn.highlightButtons(data, 'regionhtml', data.settings.showRegionInfo);
         }
     };
 
-    // event handler, sets buttons and shows regions
+    // event handler, sets buttons and shows regions when scaler img is reloaded
     var handleUpdate = function (evt) {
         data = this;
-        fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
-        fn.highlightButtons(data, 'regionhtml' , data.settings.showRegionHTML);
-        showRegionDivs(data);
-        console.debug("regions: handleUpdate", data.settings.rg);
+        console.debug("regions: handleUpdate");
+        var settings = data.settings;
+        fn.highlightButtons(data, 'regions' , settings.isRegionVisible);
+        fn.highlightButtons(data, 'regionhtml' , settings.showRegionInfo);
+        renderRegions(data);
     };
 
     // event handler, redisplays regions (e.g. in a new position)
     var handleRedisplay = function (evt) {
         data = this;
-        showRegionDivs(data);
         console.debug("regions: handleRedisplay");
+        // renderRegions(data);
     };
 
     // event handler
@@ -420,27 +479,30 @@
         var $html = $('<div class="keep regionHTML"/>');
         $elem.append($html);
         data.$htmlDiv = $html;
-        // no URL-defined regions, no buttons when regions are predefined in HTML
-        var hasRegionContent = data.settings.includeRegionContent;
-        if (!hasRegionContent) {
-            // add "rg" to digilibParamNames
-            data.settings.digilibParamNames.push('rg');
-            // additional buttons
-            var buttonSettings = data.settings.buttonSettings.fullscreen;
-            // configure buttons through digilib "regionSet" option
-            var buttonSet = data.settings.regionSet || regionSet; 
-            // set regionSet to [] or '' for no buttons (when showing regions only)
-            if (buttonSet.length && buttonSet.length > 0) {
-                buttonSettings['regionSet'] = buttonSet;
-                buttonSettings.buttonSets.push('regionSet');
-            }
-        }
         // install event handler
         var $data = $(data);
         $data.bind('setup', handleSetup);
         $data.bind('update', handleUpdate);
         $data.bind('redisplay', handleRedisplay);
         $data.bind('dragZoom', handleDragZoom);
+        var settings = data.settings;
+        var selector = data.settings.regionContentSelector;
+        settings.hasRegionContent = $elem.has(selector).length > 0;
+        // neither URL-defined regions nor buttons when regions are predefined in HTML
+        if (!settings.hasRegionContent) {
+            var mode = settings.interactionMode;
+            // add "rg" to digilibParamNames
+            settings.digilibParamNames.push('rg');
+            // additional buttons
+            var buttonSettings = settings.buttonSettings[mode];
+            // configure buttons through digilib "regionSet" option
+            var buttonSet = settings.regionSet || regionSet; 
+            // set regionSet to [] or '' for no buttons (when showing regions only)
+            if (buttonSet.length && buttonSet.length > 0) {
+                buttonSettings.regionSet = buttonSet;
+                buttonSettings.buttonSets.push('regionSet');
+            }
+        }
     };
 
     // plugin object with name and install/init methods