source: issm/trunk/src/m/plot/slider.js

function sliderInit(){ //{{{
        /*
        Name:
                sliderInit
        
        Description:
                Initialize slider corresponding to passed selector with passed value,
                minimum and maximum values, step (which is the increment for the 
                slider), and callback function (which is called when slider is changed). 
        
                Options are passed as pairs to the function according to the usage 
                example below.
        
        Usage:
                sliderInit(
                        'selector', #some-element, 
                        'value', 0,
                        'min', -1,
                        'max', 1,
                        'step', 0.1,
                        'callback', function(value){someEngineFunction(value)}
                );
        
        NOTE:   jQuery Mobile will reflect changes to slider in its input "label" 
                        based on the width of the slider. For example, step might be set to
                        0.1, but if the width of the slider is too narrow, changes to the 
                        slider will only be reflected in whole numeral increments in the
                        slider' label. That said, *all* sliders can be adjusted via the
                        "up" and "down" keys by whatever increment step is set to.
        */

        // Convert arguments to options
        var args                = Array.prototype.slice.call(arguments);
        var options     = new pairoptions(args.slice());

        // Recover option values
        var selector    = options.getfieldvalue('selector', '');
        var value               = options.getfieldvalue('value', 0);
        var callback    = options.getfieldvalue('callback', function(event, ui){});
        var min                 = options.getfieldvalue('min', 0.6 * value);
        var max                 = options.getfieldvalue('max', 1.4 * value);
        var step                = options.getfieldvalue('step', 1);

        /*
                Update slider attributes.
                
                NOTE:   Although slider has already been created, need to call slider() 
                                in order to avoid:
                                
                                        Error: cannot call methods on slider prior to 
                                        initialization; attempted to call method 'refresh'
                                        
                                Attempted all other methods for intialization of slider widget
                                from jQuery Mobile, and this is the only one that seemed to work
                                (see index.php for related markup).
        */
        $(selector).slider();
        $(selector).val(value);
        $(selector).attr('min', min);
        $(selector).attr('max', max);
        $(selector).attr('step', step);
        $(selector).on('slidestop', function(event, ui){
                callback(parseFloat($(selector).val()));
        });
        $(selector).slider('refresh'); //Slider must be "refreshed" after any JavaScript change to it, as it is an AJAX object.
} //}}}

function sliderMoveInput(selector){ //{{{
        /*
        Name:
                sliderMoveInput
        
        Description:
                Appends a jQuery Mobile slider input to an element whose selector 
                adheres to the following protocol,
                
                        destination = sliderSelector + '-value'
                        
        Usage:
                sliderMoveInput('#someSliderSelector');
                
        NOTE:   Destination element must, obviously, be hardcoded into markup for a
                        call to this function to work as expected.
        */
        $(selector).appendTo(selector + '-value');
        $(selector).slider('refresh'); //Slider must be "refreshed" after any JavaScript change to it, as it is an AJAX object.
} //}}}

function progressInit(){ //{{{
        
        // Convert arguments to options.
        var args                        = Array.prototype.slice.call(arguments);
        var options             = new pairoptions(args.slice());
        
        // Recover option values
        var sim                         = options.getfieldvalue('sim', '');
        
        var canvas                      = $(sim + '-canvas')[0];
        var progressBar         = $(sim + '-controls-slider-progress');
        var playButton          = $(sim + '-controls-button-play');
        var reverseButton       = $(sim + '-controls-button-reverse');
        var timeText            = $(sim + '-controls-progress-time');
        
        /*
                Update slider attributes.
                
                NOTE:   Although slider has already been created, need to call slider() 
                                in order to avoid:
                                
                                        Error: cannot call methods on slider prior to 
                                        initialization; attempted to call method 'refresh'
                                        
                                Attempted all other methods for intialization of slider widget
                                from jQuery Mobile, and this is the only one that seemed to work
                                (see index.php for related markup).
        */
        $(progressBar).slider();
        $(progressBar).val(value);
        $(progressBar).attr('min', 0);
        $(progressBar).attr('max', 1);
        $(progressBar).attr('step', 1);
        $(progressBar).on('slidestart', function(event, ui){
                onSlideStart(canvas, progressBar);
        });
        $(progressBar).on('change', function(event, ui){
                onSlideChange(canvas, progressBar);
        });
        $(progressBar).on('slidestop', function(event, ui){
                onSlideStop(canvas, progressBar);
        });
        $(progressBar).slider('refresh'); //Slider must be "refreshed" after any JavaScript change to it, as it is an AJAX object.      

        playButton.click(function(){
                toggleMoviePlay(canvas);
        });
        
        canvas.progressBar = progressBar;
        canvas.playButton = playButton;
        canvas.timeLabel = timeText;
} //}}}