var Slider = Class.create(JSControl, {
	initialize: function($super, element){
		$super(element);
		this.pointer_ = Element.down(this.element, ".pointer");
		this.value_type_ = double;
		this.min_ = 0;
		this.max_ = 1;
		this.SetValue(0);

		Event.observe(this.pointer_, "mousedown", this.start_pointer.bindAsEventListener(this));
	},

	clamp: function(val){
		if (val < this.min_) return this.min_;
		else if (val > this.max_) return this.max_;
		else return val;
	},

	SetAttribute: function($super, nam, val){
		switch (nam){
			case "min":
			case "max":
				var num = parseFloat(val);
				if (!isNaN(num)){
					if (this[nam + "_"] == num) return;
					var myval = this.Value();
					this[nam + "_"] = num;
					this.SetValue(myval);
				}
				break;
			case "value-type":
				if (val == "double") this.value_type_ = double;
				else if (val == "int") this.value_type_ = int;
				break;
			default: $super(nam, val);
		}
	},

	get_mypos: function(){ return parseFloat(Element.getStyle(this.pointer_, "left")) + .5 * this.pointer_.offsetWidth; },
	set_mypos: function(pos){ Element.setStyle(this.pointer_, {"left": (pos - .5 * this.pointer_.offsetWidth) + "px"}); },

	Value: function(){
		var pos = this.get_mypos();
		if (isNaN(pos)) return double();
		else return this.value_type_(pos / this.element.offsetWidth * (this.max_ - this.min_) + this.min_);
	},

	SetValue: function(val){
		while (val instanceof Optional) val = val.Value();
		if (typeof val == "undefined") return;
		if (typeof val.IsNull == "function" && val.IsNull()) return;
		if (typeof val.Value == "function") val = val.Value();
		var pos = this.element.offsetWidth / (this.max_ - this.min_) * (this.clamp(val) - this.min_);
		if (!isNaN(pos)) this.set_mypos(pos);
	},

	get_relpos: function(event){
		var offs = Element.viewportOffset(this.element);
		var scrl = document.viewport.getScrollOffsets();
		return Event.pointerX(event) - scrl.left - offs.left;
	},

	clamp_ab: function(num, a, b){
		if (num < a) return a;
		else if (num > b) return b;
		else return num;
	},

	start_pointer: function(event){
		this.pointer_.start_pos_ = this.get_mypos();
		this.pointer_.diff_ = this.get_relpos(event) - this.pointer_.start_pos_;
		if (!this.pointer_.handles_)
			this.pointer_.handles_ = [//
				[this.element, "mousemove", this.move_pointer.bindAsEventListener(this)],
				[document, "mouseup", this.stop_pointer.bindAsEventListener(this)]
			];
		this.pointer_.handles_.each(function(args){ Event.observe.apply(null, args); });
		event.preventDefault();
	},

	move_pointer: function(event){
		if (this.pointer_.diff_)
			this.set_mypos(this.clamp_ab(this.get_relpos(event) - this.pointer_.diff_, 0, this.element.offsetWidth));
		event.preventDefault();
	},

	stop_pointer: function(event){
		if (Element.descendantOf(Event.element(event), this.element)) this.move_pointer(event);
		this.pointer_.diff_ = 0;
		this.pointer_.handles_.each(function(args){ Event.stopObserving.apply(null, args); });
		if (this.get_mypos() != this.pointer_.start_pos_) this.onchange();
		this.pointer_.start_pos_ = null;
	}
});