# HG changeset patch
# User robcast
# Date 1325520759 -3600
# Node ID a4d908d8c23c8928cbf95dbf22e7a73241a18286
# Parent  8260a666252541ae41fc3e9e50b3f647fdacc40f
moved button code into plugin

diff -r 8260a6662525 -r a4d908d8c23c webapp/src/main/webapp/jquery/digilib.html
--- a/webapp/src/main/webapp/jquery/digilib.html	Wed Dec 28 22:10:31 2011 +0100
+++ b/webapp/src/main/webapp/jquery/digilib.html	Mon Jan 02 17:12:39 2012 +0100
@@ -15,11 +15,11 @@
         <script type="text/javascript" src="jquery.cookie.js"></script>
         <script type="text/javascript" src="jquery.digilib.js"></script>
         <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
-        <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
-        <script type="text/javascript" src="jquery.digilib.regions.js"></script>
+        <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
+<!--         <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+        <script type="text/javascript" src="jquery.digilib.regions.js"></script> -->
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
 
-
         <script type="text/javascript">
             $(document).ready(function(){
                 var opts = {
diff -r 8260a6662525 -r a4d908d8c23c webapp/src/main/webapp/jquery/jquery.digilib.buttons.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Mon Jan 02 17:12:39 2012 +0100
@@ -0,0 +1,427 @@
+/**
+digilib buttons plugin
+ */
+
+(function($) {
+
+    // plugin object with digilib data
+    var digilib;
+
+    var buttons = {
+            reference : {
+                onclick : "reference",
+                tooltip : "get a reference URL",
+                icon : "reference.png"
+                },
+            zoomin : {
+                onclick : ["zoomBy", 1.4],
+                tooltip : "zoom in",
+                icon : "zoom-in.png"
+                },
+            zoomout : {
+                onclick : ["zoomBy", 0.7],
+                tooltip : "zoom out",
+                icon : "zoom-out.png"
+                },
+            zoomarea : {
+                onclick : "zoomArea",
+                tooltip : "zoom area",
+                icon : "zoom-area.png"
+                },
+            zoomfull : {
+                onclick : "zoomFull",
+                tooltip : "view the whole image",
+                icon : "zoom-full.png"
+                },
+            pagewidth : {
+                onclick : ["zoomFull", "width"],
+                tooltip : "page width",
+                icon : "pagewidth.png"
+                },
+            back : {
+                onclick : ["gotoPage", "-1"],
+                tooltip : "goto previous image",
+                icon : "back.png"
+                },
+            fwd : {
+                onclick : ["gotoPage", "+1"],
+                tooltip : "goto next image",
+                icon : "fwd.png"
+                },
+            page : {
+                onclick : "gotoPage",
+                tooltip : "goto image number",
+                icon : "page.png"
+                },
+            help : {
+                onclick : "showAboutDiv",
+                tooltip : "about Digilib",
+                icon : "help.png"
+                },
+            reset : {
+                onclick : "reset",
+                tooltip : "reset image",
+                icon : "reset.png"
+                },
+            mark : {
+                onclick : "setMark",
+                tooltip : "set a mark",
+                icon : "mark.png"
+                },
+            delmark : {
+                onclick : "removeMark",
+                tooltip : "delete the last mark",
+                icon : "delmark.png"
+                },
+            hmir : {
+                onclick : ["mirror", "h"],
+                tooltip : "mirror horizontally",
+                icon : "mirror-horizontal.png"
+                },
+            vmir : {
+                onclick : ["mirror", "v"],
+                tooltip : "mirror vertically",
+                icon : "mirror-vertical.png"
+                },
+            rot : {
+                onclick : "rotate",
+                tooltip : "rotate image",
+                icon : "rotate.png"
+                },
+            brgt : {
+                onclick : "brightness",
+                tooltip : "set brightness",
+                icon : "brightness.png"
+                },
+            cont : {
+                onclick : "contrast",
+                tooltip : "set contrast",
+                icon : "contrast.png"
+                },
+            rgb : {
+                onclick : "javascript:setParamWin('rgb', '...')",
+                tooltip : "set rgb values",
+                icon : "rgb.png"
+                },
+            quality : {
+                onclick : "setQuality",
+                tooltip : "set image quality",
+                icon : "quality.png"
+                },
+            size : {
+                onclick : "javascript:toggleSizeMenu()",
+                tooltip : "set page size",
+                icon : "size.png"
+                },
+            calibrationx : {
+                onclick : "calibrate",
+                tooltip : "calibrate screen resolution",
+                icon : "calibration-x.png"
+                },
+            scale : {
+                onclick : "setScaleMode",
+                tooltip : "change image scale",
+                icon : "original-size.png"
+                },
+            toggleoptions : {
+                onclick : "moreButtons",
+                tooltip : "more options",
+                icon : "options.png"
+                },
+            moreoptions : {
+                onclick : ["moreButtons", "+1"],
+                tooltip : "more options",
+                icon : "options.png"
+                },
+            lessoptions : {
+                onclick : ["moreButtons", "-1"],
+                tooltip : "less options",
+                icon : "options.png"
+                },
+            up : {
+                onclick : ["moveZoomArea", 0, -1],
+                tooltip : "move zoom area up",
+                icon : "up.png"
+                },
+            down : {
+                onclick : ["moveZoomArea", 0, 1],
+                tooltip : "move zoom area down",
+                icon : "down.png"
+                },
+            left : {
+                onclick : ["moveZoomArea", -1, 0],
+                tooltip : "move zoom area left",
+                icon : "left.png"
+                },
+            right : {
+                onclick : ["moveZoomArea", 1, 0],
+                tooltip : "move zoom area right",
+                icon : "right.png"
+                },
+            SEP : {
+                icon : "sep.png"
+                }
+            };
+
+    var defaults = {
+            // buttons
+            'buttons' : buttons,
+            // defaults for digilib buttons
+            'buttonSettings' : {
+                'fullscreen' : {
+                    // path to button images (must end with a slash)
+                    'imagePath' : 'img/fullscreen/',
+                    'buttonSetWidth' : 36,
+                    'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"],
+                    'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"],
+                    'arrowSet' : ["up", "down", "left", "right"],
+                    'buttonSets' : ['standardSet', 'specialSet']
+                    },
+                'embedded' : {
+                    'imagePath' : 'img/embedded/16/',
+                    'buttonSetWidth' : 18,
+                    'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"],
+                    'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"],
+                    'arrowSet' : ["up", "down", "left", "right"],
+                    'buttonSets' : ['standardSet', 'specialSet']
+                    }
+            },
+            // number of visible button groups
+            'visibleButtonSets' : 1,
+    };
+
+    var actions = {
+            // display more (or less) button sets
+            moreButtons : function (data, more) {
+                var settings = data.settings;
+                if (more == null) {
+                    // toggle more or less (only works for 2 sets)
+                    var maxbtns = settings.buttonSettings[settings.interactionMode].buttonSets.length;
+                    if (settings.visibleButtonSets >= maxbtns) {
+                        more = '-1';
+                    } else {
+                        more = '+1';
+                    }
+                }
+                if (more === '-1') {
+                    // remove set
+                    var setIdx = settings.visibleButtonSets - 1;
+                    if (showButtons(data, false, setIdx, true)) {
+                        settings.visibleButtonSets--;
+                    }
+                } else {
+                    // add set
+                    var setIdx = settings.visibleButtonSets;
+                    if (showButtons(data, true, setIdx, true)) {
+                        settings.visibleButtonSets++;
+                    }
+                }
+                // persist setting
+                digilib.fn.storeOptions(data);
+            },
+
+    };
+
+    // plugin installation called by digilib on plugin object.
+    var install = function(plugin) {
+        digilib = plugin;
+        console.debug('installing buttons plugin. digilib:', digilib);
+        // add defaults, actions, buttons
+        $.extend(digilib.defaults, defaults);
+        $.extend(digilib.actions, actions);
+        $.extend(digilib.buttons, buttons);
+        // export functions
+        digilib.fn.createButton = createButton;
+    };
+
+    // plugin initialization
+    var init = function (data) {
+        console.debug('initialising buttons plugin. data:', data);
+        /* create buttons before scaler 
+        for (var i = 0; i < data.settings.visibleButtonSets; ++i) {
+            showButtons(data, true, i);
+        } */
+        // install event handler
+        var $data = $(data);
+        $data.bind('setup', handleSetup);
+    };
+
+
+    var handleSetup = function (evt) {
+        console.debug("stub: handleSetup");
+        var data = this;
+        // create buttons before scaler 
+        for (var i = 0; i < data.settings.visibleButtonSets; ++i) {
+            showButtons(data, true, i);
+        }
+    };
+
+    // creates HTML structure for a single button
+    var createButton = function (data, $div, buttonName) {
+        var $elem = data.$elem;
+        var settings = data.settings;
+        var mode = settings.interactionMode;
+        var imagePath = settings.buttonSettings[mode].imagePath;
+        // make relative imagePath absolute
+        if (imagePath.charAt(0) !== '/' && imagePath.substring(0,3) !== 'http') {
+        	imagePath = settings.digilibBaseUrl + '/jquery/' + imagePath;
+        }
+        var buttonConfig = settings.buttons[buttonName];
+        // button properties
+        var action = buttonConfig.onclick;
+        var tooltip = buttonConfig.tooltip;
+        var icon = imagePath + buttonConfig.icon;
+        // construct the button html
+        var $button = $('<div class="button"></div>');
+        var $a = $('<a/>');
+        var $img = $('<img class="button"/>');
+        $div.append($button);
+        $button.append($a);
+        $a.append($img);
+        // add attributes and bindings
+        $button.attr('title', tooltip);
+        $button.addClass('button-' + buttonName);
+        $img.attr('src', icon);
+        // create handler for the buttons
+        $button.on('click.digilib', (function () {
+            // we create a new closure to capture the value of action
+            if ($.isArray(action)) {
+                // the handler function calls digilib with action and parameters
+                return function (evt) {
+                    console.debug('click action=', action, ' evt=', evt);
+                    $elem.digilib.apply($elem, action);
+                    return false;
+                };
+            } else {
+                // the handler function calls digilib with action
+                return function (evt) {
+                    console.debug('click action=', action, ' evt=', evt);
+                    $elem.digilib(action);
+                    return false;
+                };
+            }
+        })());
+    };
+
+    // creates HTML structure for buttons in elem
+    var createButtons = function (data, buttonSetIdx) {
+        var $elem = data.$elem;
+        var settings = data.settings;
+        var mode = settings.interactionMode;
+        var buttonSettings = settings.buttonSettings[mode];
+        var buttonGroup = buttonSettings.buttonSets[buttonSetIdx];
+        if (buttonGroup == null) {
+            // no buttons here
+            return;
+        }
+        // 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];
+            createButton(data, $buttonsDiv, buttonName);
+        }
+        // make buttons div scroll if too large for window
+        if ($buttonsDiv.height() > $(window).height() - 10) {
+            $buttonsDiv.css('position', 'absolute');
+        }
+        // buttons hidden at first
+        $buttonsDiv.hide();
+        $elem.append($buttonsDiv);
+        if (data.$buttonSets == null) {
+            // first button set
+            data.$buttonSets = [$buttonsDiv];
+        } else {
+            $elem.append($buttonsDiv);
+            data.$buttonSets[buttonSetIdx] = $buttonsDiv;
+        }
+        return $buttonsDiv;
+    };
+
+    // display more (or less) button sets
+    var showButtons = function (data, more, setIdx, animated) {
+        var atime = animated ? 'fast': 0;
+        // get button width from settings
+        var mode = data.settings.interactionMode;
+        var btnWidth = data.settings.buttonSettings[mode].buttonSetWidth;
+        if (more) {
+            // add set
+            var $otherSets = data.$elem.find('div.buttons:visible');
+            var $set;
+            if (data.$buttonSets && data.$buttonSets[setIdx]) {
+                // set exists
+                $set = data.$buttonSets[setIdx];
+            } else {
+                $set = createButtons(data, setIdx);
+                }
+            if ($set == null) return false;
+            // include border in calculation
+            //var btnWidth = $set.outerWidth();
+            // console.debug("btnWidth", btnWidth);
+            // move remaining sets left and show new set
+            if ($otherSets.length > 0) {
+                    $otherSets.animate({right : '+='+btnWidth+'px'}, atime,
+                            function () {$set.show();});
+            } else {
+                $set.show();
+            }
+        } else {
+            // remove set
+            var $set = data.$buttonSets[setIdx];
+            if ($set == null) return false;
+            //var btnWidth = $set.outerWidth();
+            // hide last set
+            $set.hide();
+            // take remaining sets and move right
+            var $otherSets = data.$elem.find('div.buttons:visible');
+            $otherSets.animate({right : '-='+btnWidth+'px'}, atime);
+        }
+        return true;
+    };
+
+    // check for buttons to highlight TODO: improve this!
+    var highlightButtons = function (data, name, on) {
+        var $buttons = data.$elem.find('div.buttons:visible'); // include hidden?
+        // add a class for highlighted button
+        var highlight = function (name, on) {
+            var $button = $buttons.find('div.button-' + name);
+            if (on) {
+                $button.addClass('button-on');
+            } else {
+                $button.removeClass('button-on');
+            }
+        };
+        if (name != null) {
+            return highlight(name, on);
+            }
+        var flags = data.scalerFlags;
+        var settings = data.settings;
+        highlight('rot', settings.rot);
+        highlight('brgt', settings.brgt);
+        highlight('cont', settings.cont);
+        highlight('bird', settings.isBirdDivVisible);
+        highlight('help', settings.isAboutDivVisible);
+        highlight('hmir', flags.hmir);
+        highlight('vmir', flags.vmir);
+        highlight('quality', flags.q1 || flags.q2);
+        highlight('zoomin', ! isFullArea(data.zoomArea));
+        };
+
+    // plugin object with name and init
+    // shared objects filled by digilib on registration
+    var plugin = {
+            name : 'buttons',
+            install : install,
+            init : init,
+            //buttons : {},
+            actions : {},
+            fn : {},
+            plugins : {}
+    };
+
+    if ($.fn.digilib == null) {
+        $.error("jquery.digilib.buttons must be loaded after jquery.digilib!");
+    } else {
+        $.fn.digilib('plugin', plugin);
+    }
+})(jQuery);
diff -r 8260a6662525 -r a4d908d8c23c webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Wed Dec 28 22:10:31 2011 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Jan 02 17:12:39 2012 +0100
@@ -35,165 +35,10 @@
 }
 
 (function($) {
-    var buttons = {
-        reference : {
-            onclick : "reference",
-            tooltip : "get a reference URL",
-            icon : "reference.png"
-            },
-        zoomin : {
-            onclick : ["zoomBy", 1.4],
-            tooltip : "zoom in",
-            icon : "zoom-in.png"
-            },
-        zoomout : {
-            onclick : ["zoomBy", 0.7],
-            tooltip : "zoom out",
-            icon : "zoom-out.png"
-            },
-        zoomarea : {
-            onclick : "zoomArea",
-            tooltip : "zoom area",
-            icon : "zoom-area.png"
-            },
-        zoomfull : {
-            onclick : "zoomFull",
-            tooltip : "view the whole image",
-            icon : "zoom-full.png"
-            },
-        pagewidth : {
-            onclick : ["zoomFull", "width"],
-            tooltip : "page width",
-            icon : "pagewidth.png"
-            },
-        back : {
-            onclick : ["gotoPage", "-1"],
-            tooltip : "goto previous image",
-            icon : "back.png"
-            },
-        fwd : {
-            onclick : ["gotoPage", "+1"],
-            tooltip : "goto next image",
-            icon : "fwd.png"
-            },
-        page : {
-            onclick : "gotoPage",
-            tooltip : "goto image number",
-            icon : "page.png"
-            },
-        help : {
-            onclick : "showAboutDiv",
-            tooltip : "about Digilib",
-            icon : "help.png"
-            },
-        reset : {
-            onclick : "reset",
-            tooltip : "reset image",
-            icon : "reset.png"
-            },
-        mark : {
-            onclick : "setMark",
-            tooltip : "set a mark",
-            icon : "mark.png"
-            },
-        delmark : {
-            onclick : "removeMark",
-            tooltip : "delete the last mark",
-            icon : "delmark.png"
-            },
-        hmir : {
-            onclick : ["mirror", "h"],
-            tooltip : "mirror horizontally",
-            icon : "mirror-horizontal.png"
-            },
-        vmir : {
-            onclick : ["mirror", "v"],
-            tooltip : "mirror vertically",
-            icon : "mirror-vertical.png"
-            },
-        rot : {
-            onclick : "rotate",
-            tooltip : "rotate image",
-            icon : "rotate.png"
-            },
-        brgt : {
-            onclick : "brightness",
-            tooltip : "set brightness",
-            icon : "brightness.png"
-            },
-        cont : {
-            onclick : "contrast",
-            tooltip : "set contrast",
-            icon : "contrast.png"
-            },
-        rgb : {
-            onclick : "javascript:setParamWin('rgb', '...')",
-            tooltip : "set rgb values",
-            icon : "rgb.png"
-            },
-        quality : {
-            onclick : "setQuality",
-            tooltip : "set image quality",
-            icon : "quality.png"
-            },
-        size : {
-            onclick : "javascript:toggleSizeMenu()",
-            tooltip : "set page size",
-            icon : "size.png"
-            },
-        calibrationx : {
-            onclick : "calibrate",
-            tooltip : "calibrate screen resolution",
-            icon : "calibration-x.png"
-            },
-        scale : {
-            onclick : "setScaleMode",
-            tooltip : "change image scale",
-            icon : "original-size.png"
-            },
-        toggleoptions : {
-            onclick : "moreButtons",
-            tooltip : "more options",
-            icon : "options.png"
-            },
-        moreoptions : {
-            onclick : ["moreButtons", "+1"],
-            tooltip : "more options",
-            icon : "options.png"
-            },
-        lessoptions : {
-            onclick : ["moreButtons", "-1"],
-            tooltip : "less options",
-            icon : "options.png"
-            },
-        up : {
-            onclick : ["moveZoomArea", 0, -1],
-            tooltip : "move zoom area up",
-            icon : "up.png"
-            },
-        down : {
-            onclick : ["moveZoomArea", 0, 1],
-            tooltip : "move zoom area down",
-            icon : "down.png"
-            },
-        left : {
-            onclick : ["moveZoomArea", -1, 0],
-            tooltip : "move zoom area left",
-            icon : "left.png"
-            },
-        right : {
-            onclick : ["moveZoomArea", 1, 0],
-            tooltip : "move zoom area right",
-            icon : "right.png"
-            },
-        SEP : {
-            icon : "sep.png"
-            }
-        };
 
     var defaults = {
         // version of this script
-        'version' : 'jquery.digilib.js 2.0b4',
+        'version' : 'jquery.digilib.js 2.1a1',
         // logo url
         'logoUrl' : 'img/digilib-logo-text1.png',
         // homepage url (behind logo)
@@ -234,28 +79,6 @@
         // fullscreen = take parameters from page URL, keep state in page URL
         // embedded = take parameters from Javascript options, keep state inside object 
         'interactionMode' : 'fullscreen',
-        // buttons
-        'buttons' : buttons,
-        // defaults for digilib buttons
-        'buttonSettings' : {
-            'fullscreen' : {
-                // path to button images (must end with a slash)
-                'imagePath' : 'img/fullscreen/',
-                'buttonSetWidth' : 36,
-                'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"],
-                'arrowSet' : ["up", "down", "left", "right"],
-                'buttonSets' : ['standardSet', 'specialSet']
-                },
-            'embedded' : {
-                'imagePath' : 'img/embedded/16/',
-                'buttonSetWidth' : 18,
-                'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"],
-                'arrowSet' : ["up", "down", "left", "right"],
-                'buttonSets' : ['standardSet', 'specialSet']
-                }
-        },
         // arrow bar overlays for moving the zoomed area
         'showZoomArrows' : true,
         // zoom arrow bar minimal width (for small images)
@@ -264,8 +87,6 @@
         'zoomArrowWidth' : 32,
         // by what percentage should the arrows move the zoomed area?
         'zoomArrowMoveFactor' : 0.5,
-        // number of visible button groups
-        'visibleButtonSets' : 1,
         // is the "about" window shown?
         'isAboutDivVisible' : false,
         // default size of background image for drag-scroll (same as Bird's Eye View image)
@@ -397,6 +218,7 @@
                 for (n in plugins) {
                     var p = plugins[n];
                     if (typeof p.init === 'function') {
+                    	// call the plugins init() method
                         p.init(data);
                     }
                 }
@@ -404,13 +226,8 @@
                 if (data.scaleMode === 'pixel' || data.scaleMode === 'size') {
                     loadImageInfo(data); // triggers "imageInfo" on completion
                 }
-                // create buttons before scaler 
-                for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
-                    showButtons(data, true, i);
-                }
                 // create HTML structure for scaler, taking width of buttons div into account
                 setupScalerDiv(data);
-                highlightButtons(data);
                 // about window creation - TODO: could be deferred? restrict to only one item?
                 setupAboutDiv(data);
                 // arrow overlays for moving zoomed detail
@@ -434,7 +251,7 @@
         showAboutDiv : function(data, show) {
             var on = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
             data.settings.isAboutDivVisible = on;
-            highlightButtons(data, 'help', on);
+            //FIXME: highlightButtons(data, 'help', on);
         },
 
         // goto given page nr (+/-: relative)
@@ -580,35 +397,6 @@
             redisplay(data);
         },
 
-        // display more (or less) button sets
-        moreButtons : function (data, more) {
-            var settings = data.settings;
-            if (more == null) {
-                // toggle more or less (only works for 2 sets)
-                var maxbtns = settings.buttonSettings[settings.interactionMode].buttonSets.length;
-                if (settings.visibleButtonSets >= maxbtns) {
-                    more = '-1';
-                } else {
-                    more = '+1';
-                }
-            }
-            if (more === '-1') {
-                // remove set
-                var setIdx = settings.visibleButtonSets - 1;
-                if (showButtons(data, false, setIdx, true)) {
-                    settings.visibleButtonSets--;
-                }
-            } else {
-                // add set
-                var setIdx = settings.visibleButtonSets;
-                if (showButtons(data, true, setIdx, true)) {
-                    settings.visibleButtonSets++;
-                }
-            }
-            // persist setting
-            storeOptions(data);
-        },
-
         // reset image parameters to defaults TODO: improve this!
         reset : function (data) {
             var settings = data.settings;
@@ -624,7 +412,7 @@
             settings.dw = params.dw;
             settings.dh = params.dh;
             settings.isBirdDivVisible = false;
-            settings.visibleButtonSets = 1;
+            settings.visibleButtonSets = 1; // FIXME
             // resets zoomArea, marks, scalerflags
             data.zoomArea = FULL_AREA.copy();
             data.marks = [];
@@ -976,7 +764,7 @@
                 			loadImageInfo(data);
                 		}
                 	}
-                	highlightButtons(data); // TODO: better solution
+                	//FIXME: highlightButtons(data);
                 	// invalidate background
                 	data.hasPreviewBg = false;
                 	// send event
@@ -1003,7 +791,7 @@
         			loadImageInfo(data);
         		}
         	}
-            highlightButtons(data); // TODO: better solution
+            //FIXME: highlightButtons(data); // TODO: better solution
         	// invalidate background
         	data.hasPreviewBg = false;
             // send event
@@ -1039,7 +827,8 @@
             console.debug("fixing border height for getFullscreenImgSize!");
             borderH = 5;
         }
-        var buttonsW = 0; 
+        // FIXME!
+        var buttonsW = 0;
         if (data.settings.visibleButtonSets) {
             // get button width from settings
             buttonsW = data.settings.buttonSettings[mode].buttonSetWidth;
@@ -1114,88 +903,6 @@
     	data.$scaler.css('cursor', 'progress');
     };
 
-    // creates HTML structure for a single button
-    var createButton = function (data, $div, buttonName) {
-        var $elem = data.$elem;
-        var settings = data.settings;
-        var mode = settings.interactionMode;
-        var imagePath = settings.buttonSettings[mode].imagePath;
-        // make relative imagePath absolute
-        if (imagePath.charAt(0) !== '/' && imagePath.substring(0,3) !== 'http') {
-        	imagePath = settings.digilibBaseUrl + '/jquery/' + imagePath;
-        }
-        var buttonConfig = settings.buttons[buttonName];
-        // button properties
-        var action = buttonConfig.onclick;
-        var tooltip = buttonConfig.tooltip;
-        var icon = imagePath + buttonConfig.icon;
-        // construct the button html
-        var $button = $('<div class="button"></div>');
-        var $a = $('<a/>');
-        var $img = $('<img class="button"/>');
-        $div.append($button);
-        $button.append($a);
-        $a.append($img);
-        // add attributes and bindings
-        $button.attr('title', tooltip);
-        $button.addClass('button-' + buttonName);
-        $img.attr('src', icon);
-        // create handler for the buttons
-        $button.on('click.digilib', (function () {
-            // we create a new closure to capture the value of action
-            if ($.isArray(action)) {
-                // the handler function calls digilib with action and parameters
-                return function (evt) {
-                    console.debug('click action=', action, ' evt=', evt);
-                    $elem.digilib.apply($elem, action);
-                    return false;
-                };
-            } else {
-                // the handler function calls digilib with action
-                return function (evt) {
-                    console.debug('click action=', action, ' evt=', evt);
-                    $elem.digilib(action);
-                    return false;
-                };
-            }
-        })());
-    };
-
-    // creates HTML structure for buttons in elem
-    var createButtons = function (data, buttonSetIdx) {
-        var $elem = data.$elem;
-        var settings = data.settings;
-        var mode = settings.interactionMode;
-        var buttonSettings = settings.buttonSettings[mode];
-        var buttonGroup = buttonSettings.buttonSets[buttonSetIdx];
-        if (buttonGroup == null) {
-            // no buttons here
-            return;
-        }
-        // 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];
-            createButton(data, $buttonsDiv, buttonName);
-        }
-        // make buttons div scroll if too large for window
-        if ($buttonsDiv.height() > $(window).height() - 10) {
-            $buttonsDiv.css('position', 'absolute');
-        }
-        // buttons hidden at first
-        $buttonsDiv.hide();
-        $elem.append($buttonsDiv);
-        if (data.$buttonSets == null) {
-            // first button set
-            data.$buttonSets = [$buttonsDiv];
-        } else {
-            $elem.append($buttonsDiv);
-            data.$buttonSets[buttonSetIdx] = $buttonsDiv;
-        }
-        return $buttonsDiv;
-    };
-
     // creates arrow overlays for moving the zoomed area
     var setupZoomArrows = function (data) {
         var $elem = data.$elem;
@@ -1210,8 +917,9 @@
         var $arrowsDiv = $('<div class="keep arrows"/>');
         $elem.append($arrowsDiv);
         // create all arrow buttons
+        // TODO: do this without buttons plugin?
         $.each(arrowNames, function(i, arrowName){
-            createButton(data, $arrowsDiv, arrowName);
+            fn.createButton(data, $arrowsDiv, arrowName);
             });
     };
 
@@ -1323,75 +1031,6 @@
         return isVisible;
     };
 
-    // display more (or less) button sets
-    var showButtons = function (data, more, setIdx, animated) {
-        var atime = animated ? 'fast': 0;
-        // get button width from settings
-        var mode = data.settings.interactionMode;
-        var btnWidth = data.settings.buttonSettings[mode].buttonSetWidth;
-        if (more) {
-            // add set
-            var $otherSets = data.$elem.find('div.buttons:visible');
-            var $set;
-            if (data.$buttonSets && data.$buttonSets[setIdx]) {
-                // set exists
-                $set = data.$buttonSets[setIdx];
-            } else {
-                $set = createButtons(data, setIdx);
-                }
-            if ($set == null) return false;
-            // include border in calculation
-            //var btnWidth = $set.outerWidth();
-            // console.debug("btnWidth", btnWidth);
-            // move remaining sets left and show new set
-            if ($otherSets.length > 0) {
-                    $otherSets.animate({right : '+='+btnWidth+'px'}, atime,
-                            function () {$set.show();});
-            } else {
-                $set.show();
-            }
-        } else {
-            // remove set
-            var $set = data.$buttonSets[setIdx];
-            if ($set == null) return false;
-            //var btnWidth = $set.outerWidth();
-            // hide last set
-            $set.hide();
-            // take remaining sets and move right
-            var $otherSets = data.$elem.find('div.buttons:visible');
-            $otherSets.animate({right : '-='+btnWidth+'px'}, atime);
-        }
-        return true;
-    };
-
-    // check for buttons to highlight TODO: improve this!
-    var highlightButtons = function (data, name, on) {
-        var $buttons = data.$elem.find('div.buttons:visible'); // include hidden?
-        // add a class for highlighted button
-        var highlight = function (name, on) {
-            var $button = $buttons.find('div.button-' + name);
-            if (on) {
-                $button.addClass('button-on');
-            } else {
-                $button.removeClass('button-on');
-            }
-        };
-        if (name != null) {
-            return highlight(name, on);
-            }
-        var flags = data.scalerFlags;
-        var settings = data.settings;
-        highlight('rot', settings.rot);
-        highlight('brgt', settings.brgt);
-        highlight('cont', settings.cont);
-        highlight('bird', settings.isBirdDivVisible);
-        highlight('help', settings.isAboutDivVisible);
-        highlight('hmir', flags.hmir);
-        highlight('vmir', flags.vmir);
-        highlight('quality', flags.q1 || flags.q2);
-        highlight('zoomin', ! isFullArea(data.zoomArea));
-        };
-
     // create Transform from area and $img
     var getImgTrafo = function ($img, area, rot, hmir, vmir, mode, data) {
         var picrect = geom.rectangle($img);
@@ -1927,7 +1566,6 @@
             storeOptions : storeOptions,
             redisplay : redisplay,
             updateDisplay : updateDisplay,
-            highlightButtons : highlightButtons,
             showDiv : showDiv,
             setZoomBg : setZoomBg,
             getImgTrafo : getImgTrafo,
@@ -1953,7 +1591,7 @@
                 plugins[plugin.name] = plugin;
                 // share common objects
                 plugin.defaults = defaults;
-                plugin.buttons = buttons;
+                //plugin.buttons = buttons; FIXME
                 plugin.actions = actions;
                 plugin.fn = fn;
                 plugin.plugins = plugins;