var domSlider = new Class({
	Implements: Events,
	opt: {
		value: 0,
		onSlide: null,
		onFinish: null
	},
	initialize: function(o, options) {
		var i=0;
		this.parent = $(o);
		if(options)
			this.opt = $merge(this.opt, options);
		if(this.opt.onSlide != null)	this.addEvent('slide', this.opt.onSlide);
		if(this.opt.onFinish != null)	this.addEvent('finish', this.opt.onFinish);
		this.pDim = this.parent.getCoordinates();
		
		this.moveStart = this.moveStart.bind(this);
		this.moveDo = this.moveDo.bind(this);
		this.moveEnd = this.moveEnd.bind(this);
		
		if(!this.parent.style.position || this.parent.style.position == '' || this.parent.style.position == 'static')
			this.parent.setStyles({position: 'relative'});
		this.parent.setStyles({cursor: 'pointer'}).addEvent('mousedown', this.moveStart);
		this.bar = new Element('img').set({src: '/lib/img.qzbar.php?size=simple'}).setStyles({position: 'absolute', top: 0, left: 0, height: this.pDim.height, cursor: 'pointer'}).injectInside(this.parent).addEvent('mousedown', this.moveStart);
		this.token = new Element('img').set({src: '/src/img/bar/triangle.gif'}).setStyles({position: 'absolute', top: this.pDim.height-15, cursor: 'pointer'}).injectInside(this.parent).addEvent('mousedown', this.moveStart);
		this.draw();
	},
	moveStart: function(e) {
		e.preventDefault();
		$(document).addEvent('mousemove', this.moveDo);
		$(document).addEvent('mouseup', this.moveEnd);
		$(document).fireEvent('mousemove', {page:{x:e.page.x}});
	},
	moveDo: function(e) {
		var pos = e.page.x - this.pDim.left;
		if(pos < 0) pos = 0;
		if(pos > this.pDim.width) pos = this.pDim.width;
		pos /= this.pDim.width;
		this.opt.value = pos;
		
		this.draw();
		this.fireEvent('slide', {value: this.opt.value});
	},
	moveEnd: function() {
		$(document).removeEvent('mousemove', this.moveDo);
		$(document).removeEvent('mouseup', this.moveEnd);
		this.fireEvent('finish', {value: this.opt.value});
	},
	add: function(v) {
		this.opt.value += v;
		this.draw();
		this.fireEvent('slide', {value: this.opt.value, set: true});
	},
	set: function(v) {
		this.opt.value = v;
		this.draw();
		this.fireEvent('slide', {value: this.opt.value, set: true});
	},
	draw: function() {
		this.token.setStyles({left: Math.ceil(this.opt.value*this.pDim.width-10.5)});
		this.bar.setStyles({width: this.opt.value*this.pDim.width+1});
	}
});
var domRanger = new Class({
	Implements: Events,
	opt: {
		value: 0,
		onSlide: null,
		onFinish: null
	},
	initialize: function(o, options) {
		var i=0;
		this.parent = $(o);
		if(options)
			this.opt = $merge(this.opt, options);
		if(this.opt.onSlide != null)	this.addEvent('slide', this.opt.onSlide);
		if(this.opt.onFinish != null)	this.addEvent('finish', this.opt.onFinish);
		this.pDim = this.parent.getCoordinates();
		this.opt.min = this.opt.min*this.pDim.width || 0;
		this.opt.max = this.opt.max*this.pDim.width || this.pDim.width;
		this.tmpRange = [0,0];
		
		this.moveStart = this.moveStart.bind(this);
		this.moveDo = this.moveDo.bind(this);
		this.moveEnd = this.moveEnd.bind(this);
		
		if(!this.parent.style.position || this.parent.style.position == '' || this.parent.style.position == 'static')
			this.parent.setStyles({position: 'relative'});
		this.parent.setStyles({cursor: 'pointer'}).addEvent('mousedown', this.moveStart);
		this.bar = new Element('img').set({src: '/lib/img.qzbar.php?size=simple'}).setStyles({position: 'absolute', top: 0, left: 0, height: this.pDim.height, cursor: 'pointer'}).injectInside(this.parent).addEvent('mousedown', this.moveStart);
		this.token1 = new Element('img').set({src: '/src/img/bar/triangle.gif'}).setStyles({position: 'absolute', top: this.pDim.height-15, cursor: 'pointer'}).injectInside(this.parent).addEvent('mousedown', this.moveStart);
		this.token2 = new Element('img').set({src: '/src/img/bar/triangle.gif'}).setStyles({position: 'absolute', top: this.pDim.height-15, cursor: 'pointer'}).injectInside(this.parent).addEvent('mousedown', this.moveStart);
		this.token1.pos = 'min';
		this.token2.pos = 'max';
		this.token = this.token1;
		this.draw();
		this.token = this.token2;
		this.draw();
	},
	moveStart: function(e) {
		e.preventDefault();
		var pos = e.page.x - this.pDim.left;
		if(pos <= this.opt.min)
			this.token = this.token1;
		else if(pos >= this.opt.max)
			this.token = this.token2;
		else
			this.token = ((this.opt.min+this.opt.max)/2 > pos)?this.token1:this.token2;
		this.tmpRange = (this.token == this.token1)?[0,this.token2.left]:[this.token1.left,this.pDim.width];
		$(document).addEvent('mousemove', this.moveDo);
		$(document).addEvent('mouseup', this.moveEnd);
		$(document).fireEvent('mousemove', {page:{x:e.page.x}});
	},
	moveDo: function(e) {
		var pos = e.page.x - this.pDim.left;
		if(pos < this.tmpRange[0]) pos = this.tmpRange[0];
		if(pos > this.tmpRange[1]) pos = this.tmpRange[1];
		this.opt[this.token.pos] = pos;
		
		this.draw();
		this.fireEvent('slide', {min: this.opt.min/this.pDim.width, max: this.opt.max/this.pDim.width});
	},
	moveEnd: function() {
		$(document).removeEvent('mousemove', this.moveDo);
		$(document).removeEvent('mouseup', this.moveEnd);
		this.fireEvent('finish', {min: this.opt.min/this.pDim.width, max: this.opt.max/this.pDim.width});
	},
	set: function(i,x) {
		this.opt.min = i*this.pDim.width;
		this.opt.max = x*this.pDim.width;
		this.token = this.token1;
		this.draw();
		this.token = this.token2;
		this.draw();
	},
	draw: function() {
		this.token.setStyles({left: Math.ceil(this.opt[this.token.pos]-10.5)});
		this.bar.setStyles({left: this.opt.min,width: this.opt.max-this.opt.min+1});
	}
});