# HG changeset patch
# User hertzhaft
# Date 1299627557 -3600
# Node ID 34b20eec036b254406f6e2e2b646fb8f9ac9fbf4
# Parent  2b7143c331c3440e9132ea4717a57c09b12f64ff
second step towards zoom arrows

diff -r 2b7143c331c3 -r 34b20eec036b client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Wed Mar 09 00:39:17 2011 +0100
@@ -86,11 +86,13 @@
             <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" />
         </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 2b7143c331c3 -r 34b20eec036b client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Wed Mar 09 00:39:17 2011 +0100
@@ -126,6 +126,17 @@
     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;
diff -r 2b7143c331c3 -r 34b20eec036b client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Wed Mar 09 00:39:17 2011 +0100
@@ -231,7 +231,7 @@
         // arrow overlays for moving the zoomed area
         'zoomArrows' : true,
         // zoom arrow image info
-        'zoomArrowImg' : {
+        'zoomArrowsInfo' : {
              // path to arrow images (must end with a slash)
             'imagePath' : 'img/',
             // minimal width of the arrow bar (pixel)
@@ -928,6 +928,7 @@
         updateImgTrafo(data);
         renderMarks(data);
         setupZoomDrag(data);
+        renderZoomArrows(data);
         // send event
         $(data).trigger('update');
     };
@@ -1078,8 +1079,53 @@
         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;
diff -r 2b7143c331c3 -r 34b20eec036b client/digitallibrary/jquery/jquery.digilib.regions.js
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Mar 09 00:39:17 2011 +0100
@@ -227,7 +227,7 @@
     var regionInfoSVG = function (data) {
         var $infoDiv = $('<div class="info svgattr"/>');
         $.each(data.regions, function(index, r) {
-            var area = [r.x, r.y, r.width, r.height].join(' ');
+            var area = r.getAsSvg();
             $infoDiv.append($('<div/>').text('"' + area + '"'));
             });
         return $infoDiv;
@@ -237,7 +237,7 @@
     var regionInfoDigilib = function (data) {
         var $infoDiv = $('<div class="info digilib"/>');
         $.each(data.regions, function(index, r) {
-            var area = r.width + 'x' + r.height + '@' + r.x + ',' + r.y;
+            var area = r.toString();
             $infoDiv.append($('<div/>').text(area));
             });
         return $infoDiv;