# HG changeset patch
# User hertzhaft
# Date 1295021229 -3600
# Node ID fb94f1b74d59d133a335d72487ef0efb45a93dc1
# Parent  1b6202aba26eb1a476fe7bf265a6cd78b4d8c5fa
bind data and actions to buttons

diff -r 1b6202aba26e -r fb94f1b74d59 client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 14 15:21:15 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 14 17:07:09 2011 +0100
@@ -14,6 +14,16 @@
                 padding: 10px;
             }
             
+            div.buttons {
+                position: fixed;
+                right: 5px;
+                top: 5px;
+                padding: 3px;
+                background-color: silver;	 
+  }
+
+
+            
         </style>
     
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
diff -r 1b6202aba26e -r fb94f1b74d59 client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 14 15:21:15 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 14 17:07:09 2011 +0100
@@ -147,8 +147,8 @@
         'interactionMode' : 'fullscreen',
         // buttons
         'buttons' : buttons,
-        // path to button images
-        'buttonsImagePath' : 'img/buttons/', 
+        // path to button images (must end with a slash)
+        'buttonsImagePath' : '../greyskin/', 
         // button groups
         'buttonsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"],
         'buttonsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"],
@@ -292,24 +292,40 @@
         
     // creates HTML structure for buttons in elem
     var setupButtons = function ($elem, settings, buttonGroup) {
-        var $buttonDiv;
         if (settings.interactionMode === 'fullscreen') {
             // fullscreen -- create new
-            $buttonDiv = $elem.append('<div class="buttons"/>');
+            var $buttonsDiv = $('<div class="buttons"></div>');
+            $elem.append($buttonsDiv);
             var buttonNames = settings[buttonGroup];
             for (var i = 0; i < buttonNames.length; i++) {
                 var buttonName = buttonNames[i];
-                var buttonConfig = settings.buttons[buttonName];
-                var $button = $buttonDiv.append('<div class="button"/>');
-                $button.addClass('digilib-button-' + buttonName);
-                var $link = $button.append('<a/>');
-                $link.bind('click', buttonConfig.onclick)
-                    .attr('title', buttonConfig.toolTip );
-                var $img = $link.append('<img class="button"/>');
-                $img.attr('src', settings.buttonsImagePath + buttonConfig.img);
+                var buttonSettings = settings.buttons[buttonName];
+                // construct the button html
+                var $button = $('<div class="button"></div>');
+                var $a = $('<a/>');
+                var $img = $('<img/>');
+                $buttonsDiv.append($button);
+                $button.append($a);
+                $a.append($img);
+                // add attributes and bindings
+                $button.attr('title', buttonSettings.tooltip);
+                $button.addClass('button-' + buttonName);
+                // let the clicked <a> element know about the digilib context 
+                $a.data('digilib', { 'name' : buttonName, 'settings' : settings } );
+                $a.bind('click', function(){
+                    // get the context settings
+                    var data = $(this).data('digilib');
+                    // find the action for the clicked element
+                    console.log(data.settings.buttons[data.name].onclick);
+                    });
+                // binding mit closure
+                //(function(){ var action = buttonSettings.onclick;
+                //    $a.bind('click', function(){ console.log( action )} );
+                //})();
+                $img.attr('src', settings.buttonsImagePath + buttonSettings.img);
             };
         }
-        return $buttonDiv;
+        return $buttonsDiv;
     };
     
     // hook plugin into jquery