/*
Author: M Haris Munir
Author Email: haris.multi@gmail.com
Last Updated: Monday, December 07, 2009

Example:
<script type="text/javascript">
	var slider = new hr_barslider({
		area: 'areahere', // area where slider created
		maxValue: 5000, // max value required
		dualbars: true,	// dual bars
		length: 300,	// slider length
		start: 200,	// first bar staring point against {maxValue}
		startSec: 800, // secong bar staring point against {maxValue}, note: {startSec} must be grater then {start}
		orientation: 'H', // orientation horizontal(H) or vertical(V) , now vertical not avalable
		onChange: onch, // return area on Change
		onSet: onse // reture area on set value
	});
</script>
<style type="text/css">
.hr_barslider{
	position:relative;
	background:url(barline.gif) repeat-x center center;
	height:22px;
}
.hr_barslider .mbar{
	position:absolute;
	background:url(bar.gif) no-repeat;
	display:block;
	width:9px;
	height:22px;
	cursor:w-resize;
	float:left;
	-moz-user-select: none;
}
</style>
*/

var hr_move={
	load: function (){
		var onUp = window.onmouseup;
		document.onmousemove = hr_move.move;
		if(typeof onUp=='function'){
			document.onmouseup = function (){
				onUp();
				hr_move.up();
			}
		}else{
			document.onmouseup = hr_move.up;
		}
	},
	move: function (e){
		var ret = Array();
		var e = window.event||e;
		ret[0] = e.pageX||e.clientX;
		ret[1] = e.pageY||e.clientY;
		if(typeof hr_move.onmove=='function'){
			hr_move.onmove(ret[0],ret[1]);
		}
	},
	up: function (){
		if(typeof hr_move.onUp=='function') 
			hr_move.onUp();
		else 
			hr_move.onUp = true;
	},
	onmove: 0,
	onUp: 0,
	tmpvars: 0
}

function hr_barslider(vars){
	this.barsValue = {A:0,B:0};
	this.objId = hr_barslider.objLength;
	this.config = vars;
	this.downvalue = false;
	this.maxValue = 100;
	hr_barslider.objects[hr_barslider.objLength++] = this;
	this.barControlObj = Object();
	this.barsObj = {A:Object(),B:Object()};
	this.create = function(){
		hr_move.load();
		this.config.length = this.config.length||100;
		this.maxValue = this.config.maxValue||this.config.length;
		var offsetObj = document.createElement('div');
		offsetObj.style.width = this.config.length + 'px';
		offsetObj.className = 'hr_barslider';
		hr.$(this.config.area+'').appendChild(offsetObj)
		offsetObj.appendChild(this.createBar('a'));
		this.barControlObj = offsetObj;
		if(this.config.dualbars==true)
			offsetObj.appendChild(this.createBar('b'));
	}
	this.createBar = function(btype){
		var barObj = document.createElement('div');
		barObj.className = 'mbar';
		barObj.onmousedown = this.barsonmove;
		var ext;
		var resetValue = 0;
		if(!btype || btype=='a'){
			if(this.config.start)
				resetValue = this.extValue(parseInt(this.config.start)||0,1);
			this.barsValue.A = resetValue;
			ext = 'barA';
			this.barsObj.A = barObj;
		}else{
			if(this.config.startSec)
				resetValue = this.extValue(parseInt(this.config.startSec)||0,1);
			this.barsValue.B = resetValue;
			ext = 'barB';
			this.barsObj.B = barObj;
		}
		
		barObj.style.left = resetValue + "px";
		barObj.id = 'hr_barslider' + this.objId + ext;
		return barObj;
	}
	this.barsonmove = function (e){
		var e = window.event||e;
		var objId = this.id;
		var objInfo = (objId.substr(12)).split('bar');
		var Obj = hr_barslider.objects[objInfo[0]];
		var clickPosition = {x:e.layerX||e.offsetX,y:e.layerY||e.offsetY};
		var thatObj = this;
		hr_move.onmove = function (x,y){
			//if(!Obj.downvalue)
			//	Obj.downvalue=x;
			var offSet = (x-(Obj.barControlObj.offsetLeft+1))-clickPosition.x;
			if(offSet < 0 || offSet > Obj.config.length)
				return false;
			if(objInfo[1]=='A'){
				if((thatObj.offsetWidth+offSet) > Obj.barsValue.B)
					return false;
				Obj.barsValue.A=offSet;
			}else{
				if(offSet < (Obj.barsValue.A+thatObj.offsetWidth))
					return false;
				Obj.barsValue.B=offSet;
			}
			thatObj.style.left = offSet + 'px';
			if(typeof Obj.config.onChange == 'function')
				Obj.config.onChange(Obj.extValue(Obj.barsValue.A),Obj.extValue(Obj.barsValue.B));
		}
		hr_move.onUp = function (){
			if(typeof Obj.config.onSet == 'function')
				Obj.config.onSet(Obj.extValue(Obj.barsValue.A),Obj.extValue(Obj.barsValue.B));
			hr_move.onmove = 0;
			hr_move.onUp = false;
		}
	}
	this.extValue = function (i,type){
		var eachPx = this.maxValue/this.config.length;
		if(type){
			var returnPx = Math.ceil(i/eachPx);
			return returnPx;
		}else{
			var returnValue = Math.ceil(eachPx*i);
			return returnValue;
		}
	}
	this.setvaluetobar = function (value,type){
		var resetValue = this.extValue(parseInt(value)||0,1);
		var obj = Object();
		if(!type || type=='A'){
			obj = this.barsObj.A;
		}else{
			obj = this.barsObj.B;
		}
		obj.style.left = resetValue + "px";
	}
	this.create();
}
hr_barslider.objLength = 0;
hr_barslider.objects = new Array();