# HG changeset patch
# User robcast
# Date 1298480971 -3600
# Node ID ba708c57e57ca12b9264e03fdb77506a22db5388
# Parent  f210731dc6cc2d11a5a9727b2aa1cc997c7855c8# Parent  f0a5e4d2cba75bcb374ccae5624da0af11c11927
merge from jquery branch
f0a5e4d2cba75bcb374ccae5624da0af11c11927

diff -r f210731dc6cc -r ba708c57e57c client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Wed Feb 23 18:09:31 2011 +0100
@@ -70,7 +70,9 @@
                 var opts = {
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
-                    showRegionNumbers : true
+                    showRegionNumbers : false,
+                    autoRegionLinks : false,
+                    includeRegionContent : true 
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
@@ -83,6 +85,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="keep regioncontent" title="0.1/0.1/0.4/0.1">
+                <a href="http://www.mpiwg-berlin.mpg.de">MPI fuer Wissenschaftsgeschichte</a>
+            </div>
+            <div class="keep regioncontent" title="0.5/0.8/0.4/0.1">
+                <a href="http://www.biblhertz.it">Bibliotheca Hertziana</a>
+            </div>
         </div>
         <div id="debug">DEBUG</div>
     </body>
diff -r f210731dc6cc -r ba708c57e57c client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Wed Feb 23 18:09:31 2011 +0100
@@ -66,8 +66,9 @@
 	opacity: 0.5;
 }
 
-div.regionnumber {
+div.regionnumber a {
     color: white;
+    text-decoration: none;
     font-size: 11px;
 	font-weight: bold;
 	height: 15px;
@@ -75,6 +76,24 @@
 	margin: 3px;
 }
 
+div.regioncontent {
+    display: none;
+    padding: 3px;
+}
+
+div.regioncontent a {
+    color: white;
+    text-decoration: none;
+    font-size: 11px;
+	font-weight: bold;
+}
+
+div.regioninfo {
+    display: none;
+    color: white;
+    background-color: black;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
diff -r f210731dc6cc -r ba708c57e57c client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Wed Feb 23 18:09:31 2011 +0100
@@ -774,40 +774,50 @@
         retrieveOptions(data);
     };
 
+    // put area into parameters
+    var packArea = function (settings, area) {
+        if (!area) return;
+        // zoom area
+        settings.wx = cropFloat(area.x);
+        settings.wy = cropFloat(area.y);
+        settings.ww = cropFloat(area.width);
+        settings.wh = cropFloat(area.height);
+    };
+
+    // put marks into parameters
+    var packMarks = function (settings, marks) {
+        if (!marks) return;
+        settings.mk = '';
+        for (var i = 0; i < marks.length; i++) {
+            if (i) {
+                settings.mk += ',';
+                }
+            settings.mk +=
+                cropFloatStr(marks[i].x) + '/' + 
+                cropFloatStr(marks[i].y);
+            }
+    };
+
+    // pack scaler flags into parameters
+    var packScalerFlags = function (settings, flags) {
+        if (!flags) return;
+        var mo = '';
+        for (var f in flags) {
+            if (mo) {
+                mo += ',';
+            }
+            mo += f;
+        }
+        settings.mo = mo;
+    };
+
     // put objects back into parameters
     var packParams = function (data) {
         var settings = data.settings;
-        // zoom area
-        if (data.zoomArea) {
-            settings.wx = cropFloat(data.zoomArea.x);
-            settings.wy = cropFloat(data.zoomArea.y);
-            settings.ww = cropFloat(data.zoomArea.width);
-            settings.wh = cropFloat(data.zoomArea.height);
-            }
-        // marks
-        if (data.marks) {
-            settings.mk = '';
-            for (var i = 0; i < data.marks.length; i++) {
-                if (i) {
-                    settings.mk += ',';
-                    }
-                settings.mk +=
-                    cropFloatStr(data.marks[i].x) + '/' + 
-                    cropFloatStr(data.marks[i].y);
-                }
-            }
-        // Scaler flags
-        if (data.scalerFlags) {
-            var mo = '';
-            for (var f in data.scalerFlags) {
-                if (mo) {
-                    mo += ',';
-                }
-                mo += f;
-            }
-            settings.mo = mo;
-        }
-        // user interface options
+        packArea(settings, data.zoomArea);
+        packMarks(settings, data.marks);
+        packScalerFlags(settings, data.scalerFlags);
+        // store user interface options in cookie
         storeOptions(data);
     };
 
@@ -961,8 +971,8 @@
                 $img = $('<img/>');
             }
         }
-        // create new inner html, keep buttons
-        $elem.contents(":not(div.buttons)").remove();
+        // create new inner html, keeping buttons and content marked with "keep" class
+        $elem.contents(":not(.keep)").remove();
         var $scaler = $('<div class="scaler"/>');
         // scaler should be the first child element?
         $elem.prepend($scaler);
@@ -987,7 +997,8 @@
             // no buttons here
             return;
         }
-        var $buttonsDiv = $('<div class="buttons"/>');
+        // button divs are marked with class "keep"
+        var $buttonsDiv = $('<div class="keep buttons"/>');
         var buttonNames = buttonSettings[buttonGroup];
         for (var i = 0; i < buttonNames.length; i++) {
             var buttonName = buttonNames[i];
@@ -1588,6 +1599,9 @@
             getDigilibUrl : getDigilibUrl,
             unpackParams : unpackParams,
             packParams : packParams,
+            packArea : packArea,
+            packMarks : packMarks,
+            packScalerFlags : packScalerFlags,
             storeOptions : storeOptions,
             redisplay : redisplay,
             updateDisplay : updateDisplay,
diff -r f210731dc6cc -r ba708c57e57c client/digitallibrary/jquery/jquery.digilib.regions.js
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Feb 23 18:09:31 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,16 @@
         '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,
+        // 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")
+        '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,
         };
@@ -76,8 +84,7 @@
             var $overlay = $('<div class="digilib-overlay"/>');
             $body.append($overlay);
             bodyRect.adjustDiv($overlay);
-             // we count regions from 1
-            var $regionDiv = addRegionDiv(data, data.regions.length + 1);
+            var $regionDiv = addRegionDiv(data, data.regions.length);
 
             // mousedown handler: start sizing
             var regionStart = function (evt) {
@@ -144,8 +151,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();
+            }
         }
     };
 
@@ -162,38 +182,80 @@
     };
 
     // add a region to data.$elem
-    var addRegionDiv = function (data, nr) {
+    var addRegionDiv = function (data, index) {
+        var nr = index + 1; // we count regions from 1
+        // create a digilib URL for this detail
+        var regionUrl = 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" />');
-            $regionNr.text(nr);
+            var $regionNr = $('<div class="regionnumber"/>');
+            var $regionLink = $('<a/>');
+            $regionLink.attr('href', regionUrl);
+            $regionLink.text(nr);
+            $regionNr.append($regionLink);
             $regionDiv.append($regionNr);
         }
+        if (data.settings.autoRegionLinks) {
+            $regionDiv.bind('click.dlRegion', function() {
+                 window.location = regionUrl;
+            })
+        }
         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
+        var $regionDiv = addRegionDiv(data, index);
         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 regions = data.regions;
+        var selector = data.settings.regionContentSelector;
+        var $content = data.$elem.find(selector);
+        console.debug("createRegionsFromHTML", $content);
+        $content.each(function(index, elem) {
+            var $div = $(elem); 
+            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);
+            $div.show();
+        });
+    };
+
     // 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 +273,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.hide();
+            }
         }
     };
 
     // 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);
         }
     };
 
@@ -235,8 +305,6 @@
             var pos = r.split("/", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
-            // TODO: backlink mechanism
-            // var url = paramString.match(/http.*$/);
             }
     };
 
@@ -263,34 +331,65 @@
         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);
-    }
+    };
 
+    // for turning region numbers/region divs into links to zoomed details 
+    var getRegionUrl = function (data, index) {
+        var region = data.regions[index];
+        var settings = data.settings;
+        var params = {
+            "fn" : settings.fn,
+            "pn" : settings.pn
+            };
+        fn.packArea(params, region);
+        fn.packMarks(params, data.marks);
+        fn.packScalerFlags(params, data.scalerFlags);
+        var paramNames = digilib.defaults.digilibParamNames;
+        // build our own digilib URL without storing anything
+        var queryString = fn.getParamString(params, paramNames, digilib.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);
+        // regions with content are given in HTML divs
+        if (data.settings.includeRegionContent) {
+            createRegionsFromHTML(data);
+        // regions are defined in the URL
+        } 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.
@@ -311,23 +410,27 @@
     var init = function (data) {
         console.debug('initialising regions plugin. data:', data);
         var $data = $(data);
-        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');
+        // regions array
+        data.regions = [];
+        // no URL-defined regions, no buttons when regions are predefined in HTML
+        if (!data.settings.includeRegionContent) {
+            // 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
         $data.bind('setup', handleSetup);
         $data.bind('update', handleUpdate);
         $data.bind('redisplay', handleRedisplay);
         $data.bind('dragZoom', handleDragZoom);
-        // regions array
-        data.regions = [];
-        // add "rg" to digilibParamNames
-        data.settings.digilibParamNames.push('rg');
     };
 
     // plugin object with name and install/init methods