# HG changeset patch
# User hertzhaft
# Date 1295566455 -3600
# Node ID e328273b7ef4e1084168337380f013512391a6b6
# Parent  8f76bd79648e93e6df242887c876eaf2d82fc146# Parent  a2aadf44a4540cb17f97e099cede8525c8e5dc47
first try at birdview indicator

diff -r a2aadf44a454 -r e328273b7ef4 client/digitallibrary/jquery/dlGeometry.js
--- a/client/digitallibrary/jquery/dlGeometry.js	Fri Jan 21 00:00:08 2011 +0100
+++ b/client/digitallibrary/jquery/dlGeometry.js	Fri Jan 21 00:34:15 2011 +0100
@@ -283,7 +283,7 @@
             that.getRotation = transform.getRotation;
             that.getTranslation = transform.getTranslation;
             that.getScale = transform.getScale;
-            
+
             return that;
         };
 
diff -r a2aadf44a454 -r e328273b7ef4 client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 21 00:00:08 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 21 00:34:15 2011 +0100
@@ -71,6 +71,10 @@
                 z-index: 1000;
                 }
 
+            div.birdzoom {
+                border: 2px solid yellow;
+                }
+
         </style>
 
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
diff -r a2aadf44a454 -r e328273b7ef4 client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 21 00:00:08 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 21 00:34:15 2011 +0100
@@ -2,7 +2,7 @@
  * digilib jQuery plugin
  *
  */
-    
+
 // fallback for console.log calls
 if (typeof(console) === 'undefined') {
     var console = {
@@ -198,12 +198,12 @@
         'isAboutDivVisible' : false
 
         };
- 
+
     // affine geometry classes
     var geom = dlGeometry();
-    
+
     var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1);
-    
+
     var actions = {
             // init: digilib initialization
             init : function(options) {
@@ -282,9 +282,11 @@
                     // no bird div -> create
                     setupBirdDiv(data);
                 }
+                // TODO: keep bird view visible after reload (parameter, cookie?)
                 data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show);
+                showBirdIndicator(data);
             },
-            
+
             // goto given page nr (+/-: relative)
             gotoPage : function (data, pageNr) {
                 var settings = data.settings;
@@ -309,7 +311,7 @@
                 // then reload
                 redisplay(data);
             },
-            
+
             // zoom by a given factor
             zoomBy : function (data, factor) {
                 zoomBy(data, factor);
@@ -360,7 +362,7 @@
     var parseQueryParams = function() {
         return parseQueryString(window.location.search.slice(1));
     };
-        
+
     // returns parameters from embedded img-element
     var parseImgParams = function($elem) {
         var src = $elem.find('img').first().attr('src');
@@ -434,7 +436,7 @@
         return newurl;
     };
 
-    // processes some parameters into objects and stuff     
+    // processes some parameters into objects and stuff
     var unpackParams = function (data) {
         var settings = data.settings;
         // zoom area
@@ -475,8 +477,8 @@
             }
         }
         data.dlOpts = opts;
-    };    
-         
+    };
+
     // put objects back into parameters
     var packParams = function (data) {
         var settings = data.settings;
@@ -520,7 +522,7 @@
             settings.clop = clop;
         }
     };
-    
+
     // returns maximum size for scaler img in fullscreen mode
     var getFullscreenImgSize = function($elem) {
         var winH = $(window).height();
@@ -528,7 +530,7 @@
         // TODO: account for borders?
         return geom.size(winW, winH);
     };
-    
+
     // (re)load the img from a new scaler URL
     var redisplay = function (data) {
         var settings = data.settings; 
@@ -647,7 +649,7 @@
         // the bird's eye div
         var $birdviewDiv = $('<div class="birdview" style="display:none"/>');
         // the detail indicator frame
-        var $birdzoomDiv = $('<div class="birdzoom"/>');
+        var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>');
         // the small image
         var $birdImg = $('<img class="birdimg"/>');
         $elem.append($birdviewDiv);
@@ -702,12 +704,38 @@
         return isVisible;
     };
 
+    // shows bird view indicator
+    var showBirdIndicator = function (data) {
+        if (!data.settings.isBirdDivVisible || isFullArea(data)) return;
+        // TODO: more conditions: original size, pixel by pixel?
+        var $birdDiv = data.$birdDiv;
+        var $birdImg = $birdDiv.find('img.birdimg');
+        var pos = $birdImg.offset();
+        var birdRect = geom.rectangle(pos.left, pos.top, $birdImg.width(), $birdImg.height());
+        var area = data.zoomArea;
+        // TODO: couldn't we do a trafo here? :-)
+  		var indRect = geom.rectangle(
+  		    birdRect.x + birdRect.width  * area.x,
+	        birdRect.y + birdRect.height * area.y,
+	        birdRect.width  * area.width,
+	        birdRect.height * area.height
+	        );
+        var $ind = $birdDiv.find('div.birdzoom');
+        // TODO: set the coordinates all in one call?
+        $ind.width(indRect.width);
+        $ind.height(indRect.height);
+        $ind.offset({ left : indRect.x, top : indRect.y });
+        // TODO: how to override this style with a CSS stylesheet?
+        if (!$ind.css('border')) $ind.css('border', '2px solid #ff0000');
+        return;
+    };
+
     // returns function for load event of scaler img
     var scalerImgLoadedHandler = function (data) {
         var settings = data.settings;
         var $elem = data.$elem;
         var $img = data.$img;
-        
+
         return function () {
             console.debug("img loaded! this=", this, " data=", data);
             var area = data.zoomArea;
@@ -727,6 +755,7 @@
             // done -- hide about div --- 
             // --- why? This only leads to suprise effects when displayed programmatically
             // settings.isAboutDivVisible = showDiv(null, data.$aboutDiv, 0);
+            showBirdIndicator(data);
         };
     };
 
@@ -747,7 +776,7 @@
             }
         }
     };
-    
+
     // zooms by the given factor
     var zoomBy = function(data, factor) {
         var area = data.zoomArea;
@@ -865,17 +894,23 @@
         }
         return settings[key];
     };
-        
+
+    // auxiliary function (from old dllib.js)
+    isFullArea = function(data) {
+        var area = data.zoomArea;
+        return (area.width == 1.0) && (area.height == 1.0);
+    };
+
     // auxiliary function (from Douglas Crockford, A.10)
     var isNumber = function isNumber(value) {
             return typeof value === 'number' && isFinite(value);
     };
-    
+
     // auxiliary function to crop senseless precision
     var cropFloat = function (x) {
         return parseInt(10000 * x, 10) / 10000;
     };
-    
+
     // hook plugin into jquery
     $.fn.digilib = function(action) {
         if (actions[action]) {