").parent().html(), + clone = $(def.replace(/type/i, "type=text data-orig-type")); + + clone.val(conf.value); + input.replaceWith(clone); + input = clone; + } + + input.addClass(css.input); + + var fire = $(self).add(input); + var fireOnSlide = true; + + + /** + The flesh and bone of this tool. All sliding is routed trough this. + + @param evt types include: click, keydown, blur and api (setValue call) + @param isSetValue when called trough setValue() call (keydown, blur, api) + + vertical configuration gives additional complexity. + */ + function slide(evt, x, val, isSetValue) { + + // calculate value based on slide position + if (val === undefined) { + val = x / len * range; + + // x is calculated based on val. we need to strip off min during calculation + } else if (isSetValue) { + val -= conf.min; + } + + // increment in steps + if (step) { + val = Math.round(val / step) * step; + } + + // count x based on value or tweak x if stepping is done + if (x === undefined || step) { + x = val * len / range; + } + + // crazy value? + if (isNaN(val)) { return self; } + + // stay within range + x = Math.max(0, Math.min(x, len)); + val = x / len * range; + + if (isSetValue || !vertical) { + val += conf.min; + } + + // in vertical ranges value rises upwards + if (vertical) { + if (isSetValue) { + x = len -x; + } else { + val = conf.max - val; + } + } + + // precision + val = round(val, precision); + if (val == value) { return self; } + + // onSlide + var isClick = evt.type == "click"; + if (fireOnSlide && value !== undefined && !isClick) { + evt.type = "onSlide"; + fire.trigger(evt, [val, x]); + if (evt.isDefaultPrevented()) { return self; } + } + + // Speed of animation (really duration): if it was a click, use the configured value; + // if it's a drag, then use zero (instant). + var speed = isClick ? conf.speed : 0; + + // Function called at the end of the animation will fire a change event. + var callback = function() { + //console.info("rangeinput: firing a rangeinput change event."); + evt.type = "change"; + fire.trigger(evt, [val]); + }; + + if (vertical) { + handle.animate({top: x}, speed, callback); + if (conf.progress) { + progress.animate({height: len - x + handle.height() / 2}, speed); + } + + } else { + handle.animate({left: x}, speed, callback); + if (conf.progress) { + progress.animate({width: x + handle.width() / 2}, speed); + } + } + + // store current value + value = val; + pos = x; + + // se input field's value + input.val(val); + + return self; + } + + + $.extend(self, { + + getValue: function() { + return value; + }, + + setValue: function(val, e) { + init(); + return slide(e || $.Event("api"), undefined, val, true); + }, + + setMax: function(val) { + //console.info("Setting max to " + val); + conf.max = val; + range = conf.max - conf.min; + return self.setValue(value); + }, + + setRange: function(min, max, val) { + if (typeof min !== "undefined") { conf.min = min; } + if (typeof max !== "undefined") { conf.max = max; } + range = conf.max - conf.min; + return self.setValue(typeof val !== "undefined" ? val : value); + }, + + getConf: function() { + return conf; + }, + + getProgress: function() { + return progress; + }, + + getHandle: function() { + return handle; + }, + + getInput: function() { + return input; + }, + + step: function(am, e) { + e = e || $.Event(); + var step = conf.step == 'any' ? 1 : conf.step; + self.setValue(value + step * (am || 1), e); + }, + + // HTML5 compatible name + stepUp: function(am) { + return self.step(am || 1); + }, + + // HTML5 compatible name + stepDown: function(am) { + return self.step(-am || -1); + } + + }); + + // callbacks + $.each("onSlide,change".split(","), function(i, name) { + + // from configuration + if ($.isFunction(conf[name])) { + $(self).bind(name, conf[name]); + } + + // API methods + self[name] = function(fn) { + if (fn) { $(self).bind(name, fn); } + return self; + }; + }); + + + // dragging + handle.drag({drag: false}).bind("dragStart", function() { + + /* do some pre- calculations for seek() function. improves performance */ + init(); + + // avoid redundant event triggering (= heavy stuff) + fireOnSlide = hasEvent($(self)) || hasEvent(input); + + + }).bind("drag", function(e, y, x) { + + if (input.is(":disabled")) { return false; } + slide(e, vertical ? y : x); + + }).bind("dragEnd", function(e) { + if (!e.isDefaultPrevented()) { + e.type = "change"; + fire.trigger(e, [value]); + } + + }).click(function(e) { + return e.preventDefault(); + }); + + // clicking + root.click(function(e) { + if (input.is(":disabled") || e.target == handle[0]) { + return e.preventDefault(); + } + init(); + var fix = vertical ? handle.height() / 2 : handle.width() / 2; + slide(e, vertical ? len-origo-fix + e.pageY : e.pageX -origo -fix); + }); + + if (conf.keyboard) { + + input.keydown(function(e) { + + if (input.attr("readonly")) { return; } + + var key = e.keyCode, + up = $([75, 76, 38, 33, 39]).index(key) != -1, + down = $([74, 72, 40, 34, 37]).index(key) != -1; + + if ((up || down) && !(e.shiftKey || e.altKey || e.ctrlKey)) { + + // UP: k=75, l=76, up=38, pageup=33, right=39 + if (up) { + self.step(key == 33 ? 10 : 1, e); + + // DOWN: j=74, h=72, down=40, pagedown=34, left=37 + } else if (down) { + self.step(key == 34 ? -10 : -1, e); + } + return e.preventDefault(); + } + }); + } + + + input.blur(function(e) { + var val = $(this).val(); + if (val !== value) { + self.setValue(val, e); + } + }); + + + // HTML5 DOM methods + $.extend(input[0], { stepUp: self.stepUp, stepDown: self.stepDown}); + + + // calculate all dimension related stuff + function init() { + vertical = conf.vertical || dim(root, "height") > dim(root, "width"); + + if (vertical) { + len = dim(root, "height") - dim(handle, "height"); + origo = root.offset().top + len; + + } else { + len = dim(root, "width") - dim(handle, "width"); + origo = root.offset().left; + } + } + + function begin() { + init(); + //self.setValue(conf.value !== undefined ? conf.value : conf.min); + } + begin(); + + // some browsers cannot get dimensions upon initialization + if (!len) { + $(window).load(begin); + } + } + + $.expr[':'].range = function(el) { + var type = el.getAttribute("type"); + return type && type == 'range' || !!$(el).filter("input").data("rangeinput"); + }; + + + // jQuery plugin implementation + $.fn.rangeinput = function(conf) { + + // already installed + if (this.data("rangeinput")) { return this; } + + // extend configuration with globals + conf = $.extend(true, {}, tool.conf, conf); + + var els; + + this.each(function() { + var el = new RangeInput($(this), $.extend(true, {}, conf)); + var input = el.getInput().data("rangeinput", el); + els = els ? els.add(input) : input; + }); + + return els ? els : this; + }; + + }) (jQuery);