var Slider = new Class({

	initialize: function(el, knob, pane){
		this.element = $(el);
		this.knob = $(knob);
		this.pane = $(pane);
		this.step = -1;
		this.element.addEvent('mousedown', this.clickedElement.bindWithEvent(this));
		var mod, offset;
		this.z = 'x';
		this.p = 'left';
		mod = {'x': 'left', 'y': false};
		offset = 'offsetWidth';
		this.max = this.element[offset] - this.knob[offset];
		this.half = this.knob[offset]/2;
		this.getPos = this.element['get' + this.p.capitalize()].bind(this.element);
		this.steps = this.element[offset];
		this.pane_max = this.pane[offset];
		this.element_max = this.element[offset];
		this.knob.setStyle('position', 'relative').setStyle(this.p, 0);
		var lim = {};
		lim[this.z] = [0, this.max];
		this.drag = new Drag.Base(this.knob, {
			limit: lim,
			modifiers: mod,
			snap: 0,
			onStart: function(){
				this.draggedKnob();
			}.bind(this),
			onDrag: function(){
				this.draggedKnob();
			}.bind(this),
			onComplete: function(){
				this.draggedKnob();
			}.bind(this)
		});
	},

	set: function(step){
		this.step = step.limit(0, this.steps);
		return this;
	},
	
	setDefault: function(step){
		if (step > this.steps) step = this.steps;
		else if (step < 0) step = 0;
		
		this.knob.setStyle(this.p, this.toPosition(step)+'px');
		this.pane.setStyle(this.p, this.toPanePosition(step)+'px');
		
		this.step = step;
		
		return this;
	},

	clickedElement: function(event){
		var position = event.page[this.z] - this.getPos() - this.half;
		position = position.limit(0, this.max);
		this.step = this.toStep(position);
		this.set(this.step);
	},

	draggedKnob: function(){
		this.step = this.toStep(this.drag.value.now[this.z]);
		this.setDefault(this.step);
	},

	toStep: function(position){
		return Math.round((position) / this.max * this.steps);
	},

	toPosition: function(step){
		return this.max * step / this.steps;
	},
	
	toPanePosition: function(step){
		return (this.element_max-this.pane_max) * step / this.steps;
	}

});

Slider.implement(new Events);