$.fn.sliderbar = function(opts) {
    var settings = jQuery.extend({
        'segmentWidth': 81,
        'scaleMin': -3,
        'scaleMax': 3
    }, opts);

    this.each(function() {
        /* keep a permanent reference to the input element that backs this slider */
        var inputHtml = this;
        var input = $(this);

        var sliderBar = $('<div class="slider_bar"></div>');
        var sliderHandle = $('<div class="slider_handle"></div>');
        sliderBar.append(sliderHandle);
        input.after(sliderBar);

        /* set a tabindex on the slider handle so that it can receive keyboard events */
        sliderHandle.attr('tabindex', input.attr('tabindex'));

        sliderBar.hover(function() {
            $(this).addClass('slider_bar_hover');
        }, function() {
            $(this).removeClass('slider_bar_hover');
        })

        input.hide();

        function setHandlePosition(value) {
            sliderHandle.css({'left': settings.segmentWidth * (value - settings.scaleMin)});
        }
        function setValue(value) {
            value = parseInt(value);
            if (value < settings.scaleMin) value = settings.scaleMin;
            if (value > settings.scaleMax) value = settings.scaleMax;
            input.val(value);
            setHandlePosition(value);
            if (settings.onchange) {
                settings.onchange.call(inputHtml, value);
            }
        }

        /* set the initial value */
        setHandlePosition(input.val());

        function setValueFromMousePosition(event) {
            /* get mouse position relative to top left corner of sliderBar */
            var relativeX = event.pageX - sliderBar.offset().left;

            var sliderValue = Math.floor(relativeX / settings.segmentWidth) + settings.scaleMin;

            setValue(sliderValue);

            sliderHandle.focus();
        }

        sliderBar.drag(setValueFromMousePosition, setValueFromMousePosition);

        sliderHandle.focusin(function(){
            sliderBar.addClass('slider_bar_focus');
        }).focusout(function() {
            sliderBar.removeClass('slider_bar_focus');
        });

        sliderHandle.keydown(function(e) {
            if (e.which == 37) { /* left */
                setValue(parseInt(input.val()) - 1);
            } else if (e.which == 39) { /* right */
                setValue(parseInt(input.val()) + 1);
            }
        })

        this.disableSlider = function() {
            sliderBar.addClass('slider_bar_disabled');
        }
        this.enableSlider = function() {
            sliderBar.removeClass('slider_bar_disabled');
        }
    })
}
$.fn.disableSlider = function() {
    this.each(function(){
        this.disableSlider();
    })
}
$.fn.enableSlider = function() {
    this.each(function(){
        this.enableSlider();
    })
}