var Ranger = new Class
({
 options:
 {
 type: 'slider',
 min: 1,
 max: 100,
 step: 1,
 width: 0,
 label: 'Amount',
 pre: '',
 post: '',
 format: 'comma'
 },

 initialize: function(el, options)
 {
 this.setOptions(options);

 this.el = el;
 this.tickers = [];
 this.knobs = [];
 this.inputs = this.el.getElements('input');

 if (this.options.width != 0 && this.el.getSize().size.x > this.options.width) this.el.setStyle('width', this.options.width + 'px');

 this.el.getChildren().each
 (
 function(elem, i)
 {
 elem.setStyle('display', 'none');
 }
 );

 this.display = new Element
 (
 'div',
 {
 'class': 'display'
 }
 ).injectInside(this.el);

 this.display.adopt
 (
 new Element
 (
 'span',
 {
 'class': 'title'
 }
 ).setText(this.options.label)
 );

 this.bar = new Element
 (
 'div',
 {
 'class': 'bar'
 }
 ).injectInside(this.el);

 this.knobs[0] = new Element
 (
 'div',
 {
 'class': 'knob left'
 }
 ).injectInside(this.bar);

 switch (this.inputs.length)
 {
 case 1:
 this.single();
 break;
 case 2:
 this.dual();
 break;
 default:
 return;
 }
 },

 single: function()
 {
 this.el.addClass('single');

 this.tickers[0] = new Element
 (
 'span',
 {
 'class': 'ticker'
 }
 ).injectInside(this.display);

 this.slider = new DualSlider
 (
 this.bar,
 this.knobs,
 {
 'steps': this.options.max,
 'mode': 'horizontal',
 'onChange': this.update.bind(this),
 'onComplete': this.change.bind(this)
 }
 );

 this.set();
 },

 dual: function()
 {
 this.el.addClass('dual');

 this.tickers[0] = new Element
 (
 'span',
 {
 'class': 'ticker left'
 }
 );

 this.tickers[1] = new Element
 (
 'span',
 {
 'class': 'ticker right'
 }
 );

 this.el.adopt(new Element('div').adopt(this.tickers));

 this.knobs[1] = new Element
 (
 'div',
 {
 'class': 'knob right'
 }
 ).injectInside(this.bar);

 var vals = [this.inputs[0].value, this.inputs[1].value];

 this.slider = new DualSlider
 (
 this.bar,
 this.knobs,
 {
 'steps': this.options.max,
 'min': this.options.min,
 'mode': 'horizontal',
 'onChange': this.update.bind(this),
 'onComplete': this.change.bind(this),
 'stepper': this.options.step
 }
 );

 this.inputs[0].value = vals[0];
 this.inputs[1].value = vals[1];
 this.set();
 },

 set: function()
 {
 this.inputs.each
 (
 function(input, i)
 {
 this.slider.set(i, input.value);
 this.update(i, input.value);
 },
 this
 );
 },

 format: function(value)
 {
 switch (this.options.format)
 {
 case 'none':
 return this.options.pre + value + this.options.post;
 break;
 case 'comma':
 default:
 return value.toFloat().toComma(this.options.pre) + this.options.post;
 break;

 }
 },

 update: function(i, pos)
 {
 this.inputs[i].value = pos;
 var value = parseInt(pos);

 if (isNaN(value) || (value < this.options.min) || (value >= this.options.max))
 {
 this.inputs[i].value = '';
 this.tickers[i].setText('any');
 }
 else this.tickers[i].setText(this.format(pos));
 },

 change: function(i, pos)
 {
 this.update(i, pos);
 this.inputs[i].fireChange();
 }
});

Ranger.implement(new Events, new Options);