var DualSlider = new Class({
	
	options: {
		styles: {
			bar: {
				padding: '5px'
			},
			knob1: {
				position: 'relative'
			},
			knob2: {
				position: 'relative'
			}
		}
	},
	
	initialize: function(bar, knob1, knob2, options){
		this.bar = bar;
		this.knob1 = knob1;
		this.knob2 = knob2;
		this.count = this.bar.offsetWidth - ((this.knob1.offsetWidth / 2) + (this.knob2.offsetWidth / 2));
		this.bar.setStyles(this.options.styles.bar);
		this.knob1.setStyles(this.options.styles.knob1);
		this.knob2.setStyles(this.options.styles.knob2);
		knob1.drag = new Drag.Base(this.knob1, {
			modifiers: {
				y: false
			},
			limit: {
				x: [0, this.count]
			},
			onDrag: function(){
				this.dragged();
			}.bind(this)
		});
		knob2.drag = new Drag.Base(this.knob2, {
			modifiers: {
				y: false
			},
			limit: {
				x: [-this.count, 0]
			},
			onDrag: function(){
				this.dragged();
			}.bind(this)						
		});					
		this.setOptions(options);
		return this;
	},
	
	dragged: function(){
		this.fireEvent("onDrag", [this.knob1.drag.value.now.x, this.knob2.drag.value.now.x]);
	},
	
	set: function(val1, val2){
		this.knob1.drag.value.now.x = val1;
		this.knob1.setStyle('left', val1);			
		this.knob2.drag.value.now.x = val2;
		this.knob2.setStyle('left', -(this.count - val2));
		this.fireEvent("onSet", [val1, val2]);												
	}
	
});
DualSlider.implement(new Options, new Events);