# HG changeset patch
# User hertzhaft
# Date 1299486655 -3600
# Node ID 5922c444cd119c3d137f0e737682427325e72b57
# Parent  47a6b93bde43cd5e88bdbe0ad916452d52110e5d
fixed region position bug in embedded mode, sigh

diff -r 47a6b93bde43 -r 5922c444cd11 client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css	Mon Mar 07 00:38:20 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Mon Mar 07 09:30:55 2011 +0100
@@ -66,14 +66,22 @@
 	opacity: 0.5;
 }
 
-div.region a {
+div.region {
+    color: white;
+    font-size: 80%;
+}
+
+div.region a.regionnumber {
     color: white;
     text-decoration: none;
-    font-size: 11px;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
 	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 {
diff -r 47a6b93bde43 -r 5922c444cd11 client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Mon Mar 07 00:38:20 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Mon Mar 07 09:30:55 2011 +0100
@@ -1261,7 +1261,7 @@
             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);
diff -r 47a6b93bde43 -r 5922c444cd11 client/digitallibrary/jquery/jquery.digilib.regions.js
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Mar 07 00:38:20 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Mar 07 09:30:55 2011 +0100
@@ -59,7 +59,7 @@
         // buttonset of this plugin
         'regionSet' : ['regions', 'addregion', 'delregion', 'regionhtml', 'lessoptions'],
         // url param for regions
-        'rg' : null,
+        'rg' : null
         };
 
     var actions = { 
@@ -192,45 +192,38 @@
     };
 
     // 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);
@@ -243,20 +236,20 @@
         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); 
-            // the "rel" attribute has area coords
+            // the "rel" attribute contains the region coords
             var rel = $a.attr('rel');
             var area = rel.replace(/^area:/i, '');
             var pos = area.split("/", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
-            var $regionDiv = createRegionDiv(regions, index);
+            // create the div
             var href = $a.attr('href');
-            var text = $a.text();
-            $regionDiv.append($a.clone());
-            // $a.show();
+            var $regionDiv = createRegionDiv(regions, index, href);
+            var $contents = $a.contents().clone();
+            $regionDiv.append($contents);
         });
     };
 
@@ -266,7 +259,7 @@
         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("renderRegion: region has no $div", region);
@@ -278,14 +271,14 @@
         if (show && data.zoomArea.overlapsRect(regionRect)) {
             regionRect.clipTo(data.zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
-            // console.debug('renderRegion:', screenRect, regionRect, "imgTrafo=", data.imgTrafo);
-            console.debug("renderRegion: mpos=",geom.position(screenRect));
-            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();
@@ -373,13 +366,12 @@
             createRegionsFromHTML(data);
         // regions are defined in the URL
         } else {
-            unpackRegions(data);
-            createRegionDivs(data);
+            createRegionsFromURL(data);
             fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
         }
     };
 
-    // 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;
         console.debug("regions: handleUpdate");
@@ -393,7 +385,7 @@
     var handleRedisplay = function (evt) {
         data = this;
         console.debug("regions: handleRedisplay");
-        renderRegions(data);
+        // renderRegions(data);
     };
 
     // event handler
@@ -446,7 +438,7 @@
             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.regionSet = buttonSet;
                 buttonSettings.buttonSets.push('regionSet');
             }
         }