<!--
/*
----------------------------------------------------------------------
JTrackBar
初始日期：2007/07/11
Author:xlingFairy
Blog:http://xling.blueidea.com

目前只能生水平的，垂直的还没有写。
设计功能：
当改变时，触发事件onChange,并传当前值。

2007/07/12
加入拖动功能。

2007/07/13
加入皮肤功能

2007/08/06
加入垂直的。并修正一个setRange带来的BUG.

2007/08/17
改善鼠标拖动行为。加入：oBtnPointerMArea

未做功能：指定trackFrequence，你可以自己试着修改一下。

请尊重劳动成果！不得删除原作都信息！后果自负！
----------------------------------------------------------------------
*/
function JPos(){
	
}

JPos.getAbsPos = function(pTarget){
	var _x = 0;
	var _y = 0;
	while(pTarget.offsetParent){
			_x += pTarget.offsetLeft;
			_y += pTarget.offsetTop;
			pTarget = pTarget.offsetParent;
	}
	_x += pTarget.offsetLeft;
	_y += pTarget.offsetTop;
	
	return {x:_x,y:_y};
}

JPos.getMousePos = function(evt){
	var _x,_y;
	evt = evt || window.event;
	if(evt.pageX || evt.pageY){
		_x = evt.pageX;
		_y = evt.pageY;
	}else{
		_x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
		_y = evt.clientY + document.body.scrollTop - document.body.clientTop;
	}
	return {x:_x,y:_y};
}

function JTrackBar(pParent){
	var self = this;
	
	var $ = function(pId){
		return document.getElementById(pId);
	}
	
	var $c = function(pTag){
		return document.createElement(pTag);
	}
	
	var trackBarType;	//V & H
	var body = (typeof pParent == "object") ? pParent : ($(pParent) || document.body);
	var oOutline	= null;
	var oTrackArea 	= null;
	var oBtnPointer	= null;
	var oBtnPointerMArea = null;
	//注：不能写成：var oBtnPointer = oBtnPointerMArea = null; 会有潜在的问题。
	var oArrBtnLeft = oArrBtnRight = oArrBtnUp = oArrBtnDown = null;
	
	var inDrag 		= false;
	var dragStartPos = null;
	
	var maxPosition 	= 100;	//最大刻度
	var minPosition		= 0;	//最小刻度
	var base			= 0;
	var position		= 0;	//当前位置
	var trackFrequence	= 10;	//点击一次移动多少刻度
	
	var defaultArrowW = defaultArrowH = 15;//Only for IE!
		
	this.setRange = function(pMin,pMax){
		maxPosition = Math.max(pMin,pMax);
		minPosition	= Math.min(pMin,pMax);
		
		maxPosition -= minPosition;
		base = minPosition;
		minPosition = 0;
	}	
	
	var outlineWidth,trackAreaWidth,preFrequenceWidth;
	var outlineHeight,trackAreaHeight,preFrequenceHeight;
	
	this.onChange = new Function();
	
	var getRunStyle = function(pObj,pProperty){
		try{
			if(pObj.currentStyle){
				return eval("pObj.currentStyle." + pProperty);
			}else{
				return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);
			}
		}catch(e){
			alert(e.message);
		}
	}
	
	/*-----------------------------------------------------*/
	var createOutline = function(pWH){
		oOutline			= $c("DIV");
		body.appendChild(oOutline);
		oOutline.className	= "JTrackBarStand";
		if(trackBarType == "H")
			oOutline.style.width = pWH + "px";
		else if(trackBarType == "V")
			oOutline.style.height = pWH + "px";
		oOutline.style.overflow = "hidden";
	}
	/*-----------------------------------------------------*/
	var createArrBtn	= function(pDirection){
		var arrBtn = $c("DIV");
		switch(pDirection){
			case "LEFT":
				arrBtn.className = "btnLeft";
				arrBtn.style.styleFloat = "left";
				arrBtn.style.cssFloat	= "left";
				break;
			case "RIGHT":
				arrBtn.className = "btnRight";
				arrBtn.style.styleFloat = "left";
				arrBtn.style.cssFloat	= "left";		
				break;
			case "UP":
				arrBtn.className = "btnUp";
				break;
			case "DOWN":
				arrBtn.className = "btnDown";
				break;
		}
		
		arrBtn.direction = pDirection;
		arrBtn.onclick = arrBtn_click;
		return arrBtn;
	}
	
	var arrBtn_click = function(evt){
		
		evt = window.event || evt;
		var o = evt.srcElement || evt.target;
		
		switch(o.direction){
			case "LEFT":
			case "UP":
				self.setPositionBy( -trackFrequence);
				break;
			case "RIGHT":
			case "DOWN":
				self.setPositionBy(trackFrequence);
				break;
		}
	}
	
	var trackarea_click = function(evt){
		evt = window.event || evt;
		var mPos = JPos.getMousePos(evt);
		
		var pos_ = JPos.getAbsPos(oTrackArea);
		
		if(trackBarType == "H"){
			var w_ = parseInt(getRunStyle(oBtnPointer,"width"));		
			self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));
		}else{
			var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
			self.setPosition(parseInt((mPos.y - pos_.y) / preFrequenceHeight));
		}
	}
	
	var createHTrackArea = function(){
		var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));
		if(isNaN(w_)) w_ = defaultArrowW;
		
		trackAreaWidth = outlineWidth - 2 * w_;
		preFrequenceWidth = trackAreaWidth / (maxPosition - minPosition);
		
		oTrackArea = $c("DIV");
		oOutline.appendChild(oTrackArea);
		
		oTrackArea.onclick = trackarea_click;
		
		oTrackArea.className = "trackAreaH";
		oTrackArea.style.width = trackAreaWidth + "px";
		oTrackArea.style.styleFloat = "left";
		oTrackArea.style.cssFloat	= "left";
	}
	
	var createVTrackArea = function(){
		var h_ = parseInt(getRunStyle(oArrBtnUp,"height"));	
		if(isNaN(h_)) h_ = defaultArrowH;
		trackAreaHeight = outlineHeight - 2 * h_;
		preFrequenceHeight = trackAreaHeight / (maxPosition - minPosition);
		
		oTrackArea = $c("DIV");		
		oOutline.appendChild(oTrackArea);
		
		oTrackArea.onclick = trackarea_click;
		oTrackArea.className = "trackAreaV";
		oTrackArea.style.height = trackAreaHeight + "px";
	}
	
	var recalcTrackArea = function(){
		if(trackBarType == "H"){
			var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));
			if(isNaN(w_)) w_ = defaultArrowW;
			
			trackAreaWidth = outlineWidth - 2 * w_;	
			preFrequenceWidth = trackAreaWidth / maxPosition;
			
			oTrackArea.style.width = trackAreaWidth + "px";
		}else{
			var h_ = parseInt(getRunStyle(oArrBtnUp,"height"));
			if(isNaN(h_)) h_ = defaultArrowH;
			
			trackAreaHeight = outlineHeight - 2 * h_;
			preFrequenceHeight = trackAreaHeight / maxPosition;
			oTrackArea.style.height = trackAreaHeight + "px";
		}
	}
	
	var pointer_mousedown = function(evt){
		inDrag = true;
		dragStartPos = JPos.getMousePos(evt);
		
		oBtnPointerMArea.style.display = "";
		oBtnPointerMArea.onmousemove = pointer_mousemove;
		oBtnPointerMArea.onmouseout = pointer_mouseout;
		oBtnPointerMArea.onmouseup = pointer_mouseup;
	}
	
	var pointer_mousemove = function(evt){
		if(!inDrag)	return;		
		var mPos = JPos.getMousePos(evt);
		var pos_ = JPos.getAbsPos(oTrackArea);
		
		if(trackBarType == "H")
			self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));
		else
			self.setPosition(parseInt((mPos.y - pos_.y) / preFrequenceHeight));
	}
	
	var pointer_mouseup = function(){
		oBtnPointerMArea.style.display = "none";
		inDrag = false;
	}
	
	var pointer_mouseout = function(){
		oBtnPointerMArea.style.display = "none";
		inDrag = false;
	}
	
	var createPointerMArea = function(){
		oBtnPointerMArea = $c("DIV");
		oOutline.appendChild(oBtnPointerMArea);
		oBtnPointerMArea.className = "oBtnPointerMArea";
		
		var w_ = parseInt(getRunStyle(oBtnPointer,"width"));
		if(isNaN(w_)) w_ = defaultArrowW;

		with(oBtnPointerMArea.style){
			display = "none";
			position = "absolute";
			width = height = w_ * 3 + "px";
			//cursor = "move";
		}
	}
	
	var createHPointer = function(){
		oBtnPointer = $c("DIV");
		oOutline.appendChild(oBtnPointer);
		createPointerMArea();
		oBtnPointerMArea.style.cursor = "e-resize";
		oBtnPointer.onmousedown = pointer_mousedown;
		
		oBtnPointer.className = "btnPointerH";
		oBtnPointer.style.position = "absolute";
		
		var w_ = parseInt(getRunStyle(oBtnPointer,"width"));
		if(isNaN(w_)) w_ = defaultArrowW;
		
		var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
		if(isNaN(h_)) h_ = defaultArrowH;		
		
		var pos_ = JPos.getAbsPos(oTrackArea);
		var left_ = pos_.x - w_/2;
		
		oBtnPointer.style.left = left_ + "px";
		oBtnPointer.style.top = pos_.y + "px";
		oBtnPointer.style.cssText += "left:" + (pos_.x - w_/2) + "px;top:" + pos_.y + "px;";
		oBtnPointerMArea.style.left = left_ - w_ + "px";
		oBtnPointerMArea.style.top = pos_.y - h_ + "px";
	}
	
	var createVPointer = function(){
		oBtnPointer = $c("DIV");
		oOutline.appendChild(oBtnPointer);
		createPointerMArea();
		oBtnPointerMArea.style.cursor = "n-resize";
		oBtnPointer.onmousedown = pointer_mousedown;
		
		oBtnPointer.className = "btnPointerV";
		oBtnPointer.style.position = "absolute";
		var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
		if(isNaN(h_)) h_ = defaultArrowH;
		
		var w_ = parseInt(getRunStyle(oBtnPointer,"width"));
		if(isNaN(w_)) w_ = defaultArrowW;		
		
		var pos_ = JPos.getAbsPos(oTrackArea);
		var top_ = pos_.y - h_/2;
		
		oBtnPointer.style.top = top_ + "px";
		oBtnPointer.style.left = pos_.x + "px";
		oBtnPointer.style.cssText += "left:" + pos_.x + "px;top:" + (pos_.y - h_/2) + "px";
		
		oBtnPointerMArea.style.top = top_ - h_ + "px";
		oBtnPointerMArea.style.left = pos_.x - w_ + "px";
	}
	
	/*-----------------------------------------------------*/
	this.createHTrackBar = function(pWidth){
		trackBarType = "H";
		outlineWidth = pWidth;
		createOutline(pWidth);
		
		oArrBtnLeft = createArrBtn("LEFT");
		oOutline.appendChild(oArrBtnLeft);

		createHTrackArea();
		
		oArrBtnRight = createArrBtn("RIGHT");
		oOutline.appendChild(oArrBtnRight);
		
		createHPointer();
	}
	/*-----------------------------------------------------*/
	this.createVTrackBar = function(pHeight){
		trackBarType = "V";
		outlineHeight = pHeight;
		createOutline(pHeight);
		
		oArrBtnUp = createArrBtn("UP");
		oOutline.appendChild(oArrBtnUp);

		createVTrackArea();
		
		oArrBtnDown = createArrBtn("DOWN");
		oOutline.appendChild(oArrBtnDown);
		
		createVPointer();
	}	
	/*-----------------------------------------------------*/	
	
	this.setPositionBy = function(pPosition){
		position += pPosition;
		self.setPosition(position);
	}
	
	this.setPosition = function(pPosition){
		position = pPosition;
		if(position > maxPosition)
			position = maxPosition;
		if(position < minPosition)
			position = minPosition;		
		
		var pos_ = JPos.getAbsPos(oTrackArea);
		
		if(trackBarType == "H"){
			var w_ = parseInt(getRunStyle(oBtnPointer,"width"));
			if(isNaN(w_)) w_ = defaultArrowW;
			
			var left_ = pos_.x - w_/2 + preFrequenceWidth * position
			
			oBtnPointer.style.left = left_ + "px"; 
			oBtnPointerMArea.style.left = left_ - w_ + "px";
		}else if(trackBarType == "V"){
			var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
			if(isNaN(h_)) h_ = defaultArrowH;
			
			var top_ = pos_.y - h_/2 + preFrequenceHeight * position;
			
			oBtnPointer.style.top = top_ + "px"; 
			oBtnPointerMArea.style.top = top_ - h_ + "px";
		}
			
		doChange();
	}
	
	var doChange = function(){
		self.onChange(position + base);
	}
	
	this.getPosition = function(){
		return position;
	}
	
	this.setSkin = function(pSkin){
		oOutline.className = pSkin;
		recalcTrackArea();
		self.setPosition(minPosition)
	}
}