# HG changeset patch
# User hertzhaft
# Date 1298309864 -3600
# Node ID 29de310ed4f3f63c97b98b70dcb133f68b6cd226
# Parent  58dca7a7fe3728c6a1bf80c4beb5f10c86d22b60
read regions from HTML (not working yet), show info

diff -r 58dca7a7fe37 -r 29de310ed4f3 client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Mon Feb 21 01:20:22 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Mon Feb 21 18:37:44 2011 +0100
@@ -70,7 +70,8 @@
                 var opts = {
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
-                    showRegionNumbers : true
+                    showRegionNumbers : true,
+                    includeRegionContent : true 
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
@@ -83,6 +84,12 @@
 
         <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="regioncontent" title="0.1/0.1/0.2/0.2">
+                <a href="http://www.mpiwg-berlin.mpg.de">MPI fuer Wissenschaftsgeschichte</a>
+            </div>
+            <div class="regioncontent" title="0.8/0.8/0.9/0.9">
+                <a href="http://www.biblhertz.it">Bibliotheca Hertziana</a>
+            </div>
         </div>
         <div id="debug">DEBUG</div>
     </body>
diff -r 58dca7a7fe37 -r 29de310ed4f3 client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css	Mon Feb 21 01:20:22 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Mon Feb 21 18:37:44 2011 +0100
@@ -75,6 +75,16 @@
 	margin: 3px;
 }
 
+div.regioncontent {
+    display: none;
+}
+
+div.regioninfo {
+    display: none;
+    color: white;
+    background-color: black;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
diff -r 58dca7a7fe37 -r 29de310ed4f3 client/digitallibrary/jquery/jquery.digilib.regions.js
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Feb 21 01:20:22 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Feb 21 18:37:44 2011 +0100
@@ -41,8 +41,8 @@
             icon : "regions.png"
             },
         regioninfo : {
-            onclick : "infoRegions",
-            tooltip : "information about regions",
+            onclick : "toggleRegionInfo",
+            tooltip : "show information about regions",
             icon : "regioninfo.png"
             }
         };
@@ -52,8 +52,14 @@
         'isRegionVisible' : true,
         // are region numbers shown?
         'showRegionNumbers' : false,
+        // is region info shown?
+        'showRegionInfo' : false,
+        // should digilib look for region content in the page?
+        'includeRegionContent' : false,
+        // class name for content divs
+        'regionContentSelector' : 'div.regioncontent',
         // buttonset of this plugin
-        'regionSet' : ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'],
+        'regionSet' : ['regions', 'addregion', 'delregion', 'regioninfo', 'lessoptions'],
         // url param for regions
         'rg' : null,
         };
@@ -144,8 +150,21 @@
         "toggleRegions" : function (data) {
             var show = !data.settings.isRegionVisible;
             data.settings.isRegionVisible = show;
-            fn.highlightButtons(data, 'regions' , show);
-            showRegionDivs(data);
+            fn.highlightButtons(data, 'regions', show);
+            showRegionDivs(data, 1);
+        },
+
+        // show/hide region info 
+        "toggleRegionInfo" : function (data) {
+            var show = !data.settings.showRegionInfo;
+            data.settings.showRegionInfo = show;
+            fn.highlightButtons(data, 'regioninfo', show);
+            var $info = $('.regioninfo');
+            if (show) {
+                $info.fadeIn();
+            } else {
+                $info.fadeOut();
+            }
         }
     };
 
@@ -174,26 +193,55 @@
         return $regionDiv;
     };
 
+    // add region info
+    var addRegionInfo = function (region) {
+        var $regionDiv = region.$div;
+        var $regionInfoDiv = $('<div class="regioninfo" />');
+        $regionInfoDiv.text(region.toString());
+        $regionDiv.append($regionInfoDiv);
+    }
+
+    // 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 (data, index) {
-        var regions = data.regions;
-        if (index > regions.length) return null;
+    var createRegionDiv = function (regions, index) {
         var region = regions[index];
         var $regionDiv = addRegionDiv(data, index + 1); // we count regions from 1
         region.$div = $regionDiv;
-        // TODO store original coords in $regionDiv.data for embedded mode?
+        addRegionInfo(region);
         return $regionDiv;
     };
 
     // create regions 
     var createRegionDivs = function (data) {
-        for (var i = 0; i < data.regions.length ; i++) {
-            createRegionDiv(data, i);
+        var regions = data.regions;
+        for (var i = 0; i < regions.length ; i++) {
+            createRegionDiv(regions, i);
         }
     };
 
+    // create regions from HTML
+    var createRegionsFromHTML = function (data) {
+        var selector = data.settings.regionContentSelector;
+        // TODO: has digilib div already been emptied here?
+        var $content = data.$elem.find(selector);
+        console.debug("createRegionsFromHTML", $content);
+        $content.each(function(index, $div) {
+            var r = $div.attr('title');
+            var pos = r.split("/", 4);
+            var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
+            regions.push(rect);
+            var $regionDiv = createRegionDiv(regions, index);
+            $regionDiv.append($div);
+        });
+    };
+
     // show a region on top of the scaler image 
-    var showRegionDiv = function (data, index) {
+    var showRegionDiv = function (data, index, anim) {
         if (!data.imgTrafo) return;
         var $elem = data.$elem;
         var regions = data.regions;
@@ -211,16 +259,24 @@
             regionRect.clipTo(data.zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
             screenRect.adjustDiv($regionDiv);
-            $regionDiv.show();
+            if (anim) {
+                $regionDiv.fadeIn();
+            } else{
+                $regionDiv.show();
+            }
         } else {
-            $regionDiv.hide();
+            if (anim) {
+                $regionDiv.fadeOut();
+            } else{
+                $regionDiv.show();
+            }
         }
     };
 
     // show regions 
-    var showRegionDivs = function (data) {
+    var showRegionDivs = function (data, anim) {
         for (var i = 0; i < data.regions.length ; i++) {
-            showRegionDiv(data, i);
+            showRegionDiv(data, i, anim);
         }
     };
 
@@ -263,34 +319,55 @@
         data.settings.rg = rg;
     };
 
+    // reload display after a region has been added or removed
     var redisplay = function (data) {
-        packRegions(data);
+        if (!data.settings.includeRegionContent) {
+            packRegions(data);
+        }
         fn.redisplay(data);
-    }
+    };
 
+    // TODO: turn region numbers or region divs into links to zoomed details 
+    var getDigilibUrl = function (data) {
+        packParams(data);
+        var settings = data.settings;
+        var queryString = getParamString(settings, settings.digilibParamNames, defaults);
+        return settings.digilibBaseUrl + '?' + queryString;
+    };
+
+    // event handler, reads region parameter and creates region divs
     var handleSetup = function (evt) {
         data = this;
         console.debug("regions: handleSetup", data.settings.rg);
-        unpackRegions(data);
-        createRegionDivs(data);
+        // content is given in HTML divs
+        if (data.settings.includeRegionContent) {
+            createRegionsFromHTML(data);
+        } else {
+            unpackRegions(data);
+            createRegionDivs(data);
+        }
     };
 
+    // event handler, sets buttons and shows regions
     var handleUpdate = function (evt) {
         data = this;
         fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
+        fn.highlightButtons(data, 'regioninfo' , data.settings.showRegionInfo);
         showRegionDivs(data);
         console.debug("regions: handleUpdate", data.settings.rg);
     };
 
+    // event handler, redisplays regions (e.g. in a new position)
     var handleRedisplay = function (evt) {
         data = this;
         showRegionDivs(data);
         console.debug("regions: handleRedisplay");
     };
 
+    // event handler
     var handleDragZoom = function (evt, zoomArea) {
-        console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
-        data = this;
+        // console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
+        // data = this;
     };
 
     // plugin installation called by digilib on plugin object.