# HG changeset patch
# User hertzhaft
# Date 1330511322 -3600
# Node ID 9aa282ceec8aadad1a0f0a2f7870202279a52da7
# Parent  0eedb4a5b674f2f6b25406a8d9ed2bcac2550579
move sliders out of buttons plugin

diff -r 0eedb4a5b674 -r 9aa282ceec8a webapp/src/main/webapp/jquery/digilib.html
--- a/webapp/src/main/webapp/jquery/digilib.html	Tue Feb 21 00:08:04 2012 +0100
+++ b/webapp/src/main/webapp/jquery/digilib.html	Wed Feb 29 11:28:42 2012 +0100
@@ -17,6 +17,7 @@
         <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
         <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
         <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
+        <!-- <script type="text/javascript" src="jquery.digilib.sliders.js"></script> -->
         <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
         <script type="text/javascript" src="jquery.digilib.marks.js"></script>
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
@@ -26,7 +27,8 @@
             $(document).ready(function(){
                 var opts = {
                     interactionMode : 'fullscreen',
-                    showRegionNumbers : true
+                    showRegionNumbers : true,
+                    autoRegionLinks : true
                     };
                 var $div = $('div#digilib');
                 $div.digilib(opts);
diff -r 0eedb4a5b674 -r 9aa282ceec8a webapp/src/main/webapp/jquery/jquery.digilib.buttons.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Tue Feb 21 00:08:04 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Wed Feb 29 11:28:42 2012 +0100
@@ -78,17 +78,17 @@
             icon : "mirror-vertical.png"
             },
         rot : {
-            onclick : "sliderRotate",
+            onclick : "rotate",
             tooltip : "rotate image",
             icon : "rotate.png"
             },
         brgt : {
-            onclick : "sliderBrightness",
+            onclick : "brightness",
             tooltip : "set brightness",
             icon : "brightness.png"
             },
         cont : {
-            onclick : "sliderContrast",
+            onclick : "contrast",
             tooltip : "set contrast",
             icon : "contrast.png"
             },
@@ -138,59 +138,6 @@
             }
         };
 
-    var sliders = {
-        rot : {
-            label : "Rotation angle",
-            tooltip : "rotate image",
-            icon : "rotate.png",
-            'min' : 0,
-            'max' : 360,
-            'start' : 90
-            },
-        brgt : {
-            label : "Brightness",
-            tooltip : "set numeric value to be added",
-            icon : "brightness.png",
-            'min' : -255,
-            'max' : 255,
-            'start' : 0
-            },
-        cont : {
-            label : "Contrast",
-            tooltip : "set numeric value to be multiplied",
-            icon : "contrast.png",
-            'min' : -4,
-            'max' : 4,
-            'start' : 0
-        },
-        red : {
-            label : "Red value",
-            tooltip : "set red value",
-            icon : "rgb.png",
-            'min' : 0,
-            'max' : 255,
-            'start' : 127
-            },
-
-        green : {
-            label : "Green value",
-            tooltip : "set green value",
-            icon : "rgb.png",
-            'min' : 0,
-            'max' : 255,
-            'start' : 127
-            },
-
-        blue : {
-            label : "Blue value",
-            tooltip : "set blue value",
-            icon : "rgb.png",
-            'min' : 0,
-            'max' : 255,
-            'start' : 127
-            },
-        };
-
     var modes = [
         {   name : "screen", 
             label : "fit to screen",
@@ -263,66 +210,6 @@
                 fn.storeOptions(data);
             },
 
-            // slider to set a rotation angle
-            sliderRotate : function (data) {
-                var $elem = data.$elem;
-                var $panel = fn.setupPanel(data);
-                if ($panel == null) {
-                    return;
-                    };
-                var opts = { 'start' : parseFloat(data.settings.rot) };
-                var $slider = fn.setupSlider(data, 'rot', opts);
-                var ok = function(d) {
-                    var angle = $slider.slider('getval');
-                    digilib.actions.rotate(d, angle);
-                    };
-                $panel.data['ok'] = ok;
-                $panel.fadeIn();
-                $panel.prepend($slider);
-                centerOnScreen(data, $panel);
-                $slider.slider('show');
-            },
-
-            // slider to set a brightness value
-            sliderBrightness : function (data) {
-                var $elem = data.$elem;
-                var $panel = fn.setupPanel(data);
-                if ($panel == null) {
-                    return;
-                    };
-                var opts = { 'start' : parseFloat(data.settings.brgt) };
-                var $slider = fn.setupSlider(data, 'brgt', opts);
-                var ok = function(d) {
-                    var brgt = $slider.slider('getval');
-                    digilib.actions.brightness(d, brgt);
-                    };
-                $panel.data['ok'] = ok;
-                $panel.fadeIn();
-                $panel.prepend($slider);
-                centerOnScreen(data, $panel);
-                $slider.slider('show');
-            },
-
-            // slider to set a contrast value
-            sliderContrast : function (data) {
-                var $elem = data.$elem;
-                var $panel = fn.setupPanel(data);
-                if ($panel == null) {
-                    return;
-                    };
-                var opts = { 'start' : parseFloat(data.settings.cont) };
-                var $slider = fn.setupSlider(data, 'cont', opts);
-                var ok = function(d) {
-                    var cont = $slider.slider('getval');
-                    digilib.actions.contrast(d, cont, true);
-                    };
-                $panel.data['ok'] = ok;
-                $panel.fadeIn();
-                $panel.prepend($slider);
-                centerOnScreen(data, $panel);
-                $slider.slider('show');
-            },
-
             // shows Calibration Div
             showCalibrationDiv : function (data) {
                 var $elem = data.$elem;
@@ -377,8 +264,6 @@
         // export functions
         fn.createButton = createButton;
         fn.highlightButtons = highlightButtons;
-        fn.setupSlider = setupSlider;
-        fn.setupPanel = setupPanel;
     };
 
     // plugin initialization
@@ -389,7 +274,6 @@
         // install event handler
         var $data = $(data);
         $data.bind('setup', handleSetup);
-        sliderPlugin(jQuery, data);
     };
 
     var handleSetup = function (evt) {
@@ -416,271 +300,6 @@
         return insets;
     };
 
-    var centerOnScreen = function (data, $div) {
-        var r = geom.rectangle($div);
-        var s = fn.getFullscreenRect(data);
-        r.setCenter(s.getCenter());
-        r.adjustDiv($div);
-    };
-
-    // slider
-    var sliderPlugin = function($, digilibdata) {
-        var cssPrefix = digilibdata.settings.cssPrefix;
-        var defaults = {
-            'cssclass' : cssPrefix+'slider',
-            'label' : 'Slider',
-            'direction' : 'x',
-            'handlesize' : 16,
-            'min' : 0,
-            'max' : 100,
-            'start' : 33,
-            'numberoffset' : -24,
-            'labeloffset' : 16,
-            'rect' : null,
-            'factor' : null,
-            'onmove' : null // callback function
-            };
-        var methods = {
-            init : function( options ) {
-                // make a slider from each element
-                return this.each(function() {
-                    var $this = $(this);
-                    // var settings = data.settings;
-                    var settings = $.extend( defaults, options);
-                    console.debug('new slider: ', $this, ' settings:', settings);
-                    $this.data('digilib', digilibdata);
-                    var data = $this.data('settings');
-                    if (!data) {
-                        $this.data('settings', settings);
-                        $this.addClass(settings.cssclass);
-                        var $handle = $('<div class="'+settings.cssclass+'handle" />');
-                        var $label = $('<div class="'+settings.cssclass+'label">'
-                            +settings.label+': '+settings.start+'</div>');
-                        var $min = $('<div class="'+settings.cssclass+'number">'+settings.min+'</div>');
-                        var $max = $('<div class="'+settings.cssclass+'number">'+settings.max+'</div>');
-                        $this.append($handle);
-                        $this.append($label);
-                        $this.append($min);
-                        $this.append($max);
-                        $.extend(settings, {
-                            '$handle' : $handle,
-                            '$label' : $label,
-                            '$min' : $min,
-                            '$max' : $max,
-                            'diff' : settings.max - settings.min,
-                            'vertical' : settings.direction == 'y',
-                            'val' : settings.start,
-                            'handlerect' : geom.rectangle(0, 0, settings.handlesize, settings.handlesize)
-                            });
-                        }
-                    });
-            },
-            getval : function(data) {
-                // returns the slider value
-                var $this = this;
-                var settings = $this.data('settings');
-                return settings.val;
-            },
-            setval : function(data, val) {
-                // sets the slider value and moves the handle acordingly
-                var $this = this;
-                var settings = $this.data('settings');
-                if (val != null) settings.val = val;
-                var ratio = (settings.val - settings.min) / settings.diff;
-                var r = settings.rect;
-                var newpos = settings.vertical
-                    ? geom.position(r.x + r.width / 2, r.y + ratio * r.height)
-                    : geom.position(r.x + ratio * r.width, r.y + r.height / 2);
-                $this.slider('moveto', newpos);
-            },
-            moveto : function(data, pos, calc) {
-                // move the handle in response to a mouse position
-                var $this = this;
-                var settings = $this.data('settings');
-                var r = settings.rect;
-                var h = settings.handlerect;
-                var handlepos = r.getCenter();
-                if (settings.vertical) {
-                    handlepos.y = Math.min(Math.max(r.y, pos.y), r.y + r.height)
-                } else {
-                    handlepos.x = Math.min(Math.max(r.x, pos.x), r.x + r.width)
-                    }
-                h.setCenter(handlepos);
-                h.adjustDiv(settings.$handle);
-                if (calc) {
-                    // calculate new slider value
-                    var temp = settings.vertical
-                        ? (handlepos.y - r.y)
-                        : (handlepos.x - r.x);
-                    settings.val = fn.cropFloat(temp * settings.factor + settings.min);
-                    }
-                if (settings.onmove) {
-                    settings.onmove($this);
-                    }
-            },
-            show : function(data) {
-                var $this = this;
-                $this.fadeIn();
-                var settings = $this.data('settings');
-                // the jquery elements we need
-                var $body = $('body');
-                // some variables for easier calculation
-                var label = settings.label + ': ';
-                // calculate positions for the slider elements
-                var r = geom.rectangle($this);
-                settings.rect = r;
-                var v = settings.vertical;
-                settings.factor = v
-                    ? settings.diff / r.height
-                    : settings.diff / r.width;
-                var labelpos = geom.position(r.x, r.y + settings.labeloffset);
-                var minpos = v
-                    ? geom.position(r.x + settings.numberoffset, r.y)
-                    : geom.position(r.x, r.y + settings.numberoffset);
-                var maxpos = v
-                    ? geom.position(r.x + settings.numberoffset, r.y + r.width)
-                    : geom.position(r.x + r.width - settings.$max.width(), r.y + settings.numberoffset);
-                // adjust elements
-                labelpos.adjustDiv(settings.$label);
-                minpos.adjustDiv(settings.$min);
-                maxpos.adjustDiv(settings.$max);
-                // set the handle
-                $this.slider('setval');
-
-                // mousedown handler: start sliding
-                var sliderStart = function (event) {
-                    $body.on("mousemove.slider", sliderMove);
-                    $body.on("mouseup.slider", sliderEnd);
-                    return false;
-                };
-
-                // mousemove handler: move slider
-                var sliderMove = function (event) {
-                    var pos = geom.position(event);
-                    $this.slider('moveto', pos, true);
-                    settings.$label.text(label + settings.val);
-                    return false;
-                };
-
-                // mouseup handler: end sliding
-                var sliderEnd = function (event) {
-                    $body.off("mousemove.slider");
-                    $body.off("mouseup.slider");
-                    return false;
-                };
-
-                // bind mousedown handler to sliderhandle
-                settings.$handle.on('mousedown.slider', sliderStart);
-                console.debug('show slider: ', $this, ' settings:', settings);
-            },
-            destroy : function( ) {
-                var $this = this;
-                var settings = $this.data('settings');
-                var $handle = settings.$handle;
-                $handle.off('mousedown.slider');
-                $this.fadeOut(function(){
-                    $this.remove()
-                    });
-            }
-        };
-
-        // TODO:
-        // - take start value from a given param
-        // - set the param after sliding
-        // - show min/max/current values on slider
-        $.fn.slider = function( method ) {
-            if ( methods[method] ) {
-                // call a method
-                var $elem = $(this);
-                var data = $elem.data('digilib');
-                var args = Array.prototype.slice.call(arguments, 1);
-                args.unshift(data);
-                return methods[method].apply(this, args);
-                }
-            else if ( !method || typeof method === 'object' ) {
-                // call init(), with an optional object containing options
-                return methods.init.apply( this, arguments );
-                }
-            else {
-                $.error( 'Method ' +  method + ' does not exist on digilib.buttons.slider!' );
-                }
-        };
-    };
-
-    /** creates the HTML structure for a panel div
-     */
-    var setupPanel = function (data) {
-        var $elem = data.$elem;
-        var panelClass = data.settings.cssPrefix + 'panel';
-        var $panel = $elem.find('.' + panelClass);
-        // remove panel if it exists already
-        if ($panel.length > 0) {
-            $panel.fadeOut(function() {
-                $panel.remove();
-                });
-            return null;
-            }
-        $panel = $('<div/>');
-        $panel.addClass(panelClass);
-        var $okcancel = setupOkCancel(data);
-        $panel.append($okcancel);
-        $elem.append($panel);
-        return $panel;
-    };
-
-    /** creates the HTML structure for a slider div
-     */
-    var setupSlider = function (data, paramname, opts) {
-        var id = paramname + "-slider";
-        var $div = $('#' + id);
-        if ($div.length == 0) {
-            // slider not yet created
-            $div = $('<div/>');
-            var options = sliders[paramname];
-            if (opts != null) {
-                $.extend(options, opts);
-                }
-            $div.attr('id', paramname + "-slider");
-            $div.slider(options);
-            }
-        return $div;
-    };
-
-    /** creates the HTML structure for a ok and cancel div
-     */
-    var setupOkCancel = function (data) {
-        var settings = data.settings;
-        var cssPrefix = settings.cssPrefix;
-        var html = '\
-            <div>\
-                <button class="'+cssPrefix+'button" id="'+cssPrefix+'Ok">OK</button>\
-                <button class="'+cssPrefix+'button" id="'+cssPrefix+'Cancel">Cancel</button>\
-            </div>';
-        var $div = $(html);
-        var handler = function(event) {
-            var $panel = $(this).parents('.'+cssPrefix+'panel');
-            if (event.keyCode == 27 || event.target.id == cssPrefix+'Cancel') {
-                var callback = $panel.data['cancel'];
-                if (callback) {
-                    callback(data);
-                    }
-                }
-            if (event.keyCode == 13 || event.target.id == cssPrefix+'Ok') {
-                var callback = $panel.data['ok'];
-                if (callback) {
-                    callback(data);
-                    }
-                }
-            $panel.fadeOut(function() {
-                $panel.remove();
-                });
-            return false;
-            };
-        $div.children().on('click', handler);
-        return $div;
-    };
-
-
     /** creates HTML structure for the calibration div
      */
     var setupCalibrationDiv = function (data) {
@@ -707,7 +326,7 @@
         data.calibrationDiv = $calDiv;
         data.calibrationErrorDiv = $calDiv.find('div.'+cssPrefix+'calibration-error');
         data.calibrationInput = $input;
-        centerOnScreen(data, $calDiv);
+        fn.centerOnScreen(data, $calDiv);
         var handler = function(event) {
             var _data = data;
             if (event.keyCode == 27 || event.target.id == cssPrefix+'calibrationCancel') {
diff -r 0eedb4a5b674 -r 9aa282ceec8a webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Tue Feb 21 00:08:04 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Wed Feb 29 11:28:42 2012 +0100
@@ -1607,6 +1607,13 @@
         return cropFloat(x).toString();
     };
 
+    var centerOnScreen = function (data, $div) {
+        var r = geom.rectangle($div);
+        var s = fn.getFullscreenRect(data);
+        r.setCenter(s.getCenter());
+        r.adjustDiv($div);
+    };
+
     // fallback for console.log calls
     if (customConsole) {
         var logFunction = function(type) {
@@ -1657,7 +1664,8 @@
             getFullscreenRect : getFullscreenRect,
             getBorderWidth : getBorderWidth,
             cropFloat : cropFloat,
-            cropFloatStr : cropFloatStr
+            cropFloatStr : cropFloatStr,
+            centerOnScreen : centerOnScreen
     };
 
     // hook digilib plugin into jquery