/*自定义滚动条控件
接受参数:
无

返回类型:
无

应用技术：
javascript

制作人：
黄若儒 Roy.Huang

注意:
本类包应用了offsetHeight、offsetWidth、clientHeight等属性，因此可能在不同浏览器中应用会有效果差异~
*/
function sScroll(){
	this.upButton;//向上按扭ID/对象
	this.downButton;//向下按扭ID/对象
	this.leftButton;//向左按扭ID/对象
	this.rightButton;//向右按扭ID/对象
	this.xScrollButton;//X轴滚动条按扭ID/对象
	this.yScrollButton;//Y轴滚动条按扭ID/对象
	this.display;//显示内容容器ID/对象
	this.frame=10;//设置滚动跨度
	this.speed=10;//设置滚动速度
	this.displayH;//设置显示高度
	this.displayW;//设置显示宽度
	this.init=init;//程序事例化
	this.resetAll=resetAll;//重置控件
	
	var scrollH;//可滚动高度
	var scrollW;//可滚动宽度
	var totalW;//内容实际宽
	var totalH;//内容实际高
	
	var base=this;
	var fun;//由于存放函数实例
	var mouseOn;//记录当前点击对象
	//临时变量
	var marginT;
	var marginL;
	var eventY;
	var eventX;
	
	
	function init(){
		setDisplay();//设置显示区域的显示大小
		getTotalSize();//获取显示区域的原来大小
		getScrollSize();//获取滚动条的可滚动长度
		//设置按钮事件
		setButtonEvent(this.upButton,UD,"-");
		setButtonEvent(this.downButton,UD,"+");
		setButtonEvent(this.leftButton,LR,"-");
		setButtonEvent(this.rightButton,LR,"+");
		//设置滚动条事件
		setScrollEvent(this.xScrollButton,scrollMove,"x","L","X","W","Left","Width");
		setScrollEvent(this.yScrollButton,scrollMove,"y","T","Y","H","Top","Height");
		resetAll();//重置控件
	}
	
	function scrollMove(yx,TL,YX,HW,TopLeft,HeightWidth){//滚动条事件
		var target=eval("getElement(base."+yx+"ScrollButton);");
		if(target==null)
			return;
		var m = eval("margin"+TL+"+(event."+yx+"-event"+YX+");");
		if (m < 0)
			m = 0;
		if(m>=eval("scroll"+HW+"-target.offset"+HeightWidth))
			m=eval("scroll"+HW+"-target.offset"+HeightWidth);
		eval("target.style.margin"+TopLeft+"=m;");
		var p=eval("m/(scroll"+HW+"-target.offset"+HeightWidth+");");
		target=getElement(base.display)
		if(target==null)
			return;
		eval("target.scroll"+TopLeft+"=(total"+HW+"-target.client"+HeightWidth+")*p;");
	}
	
	function UD(sign){//上下按扭事件
		var target=getElement(base.display);
		if(target==null)
			return;
		target.scrollTop=eval("target.scrollTop"+sign+"base.frame");
		setScroll();
	}
	
	function LR(sign){//左右按扭事件
		var target=getElement(base.display);
		if(target==null)
			return;
		target.scrollLeft=eval("target.scrollLeft"+sign+"base.frame");
		setScroll();
	}
	
	function setScroll(){//按扭事件触发的事件
		var target=getElement(base.display);
		if(target==null)
			return;
		var pY=target.scrollTop/(totalH-target.offsetHeight);
		var pX=target.scrollLeft/(totalW-target.offsetWidth);
		if(pY<0)
			pY=0;
		else if(pY>1)
			pY=1;
		if(pX<0)
			pX=0;
		else if(pX>1)
			pX=1;
		target=getElement(base.yScrollButton);
		if(target!=null){
			target.style.marginTop=(scrollH-target.offsetHeight)*pY;
		}
		target=getElement(base.xScrollButton);
		if(target!=null){
			target.style.marginLeft=(scrollW-target.offsetWidth)*pX;
		}
	}


//-------------------------------------------------------------------------------------------------------------------------------------------------	
//-------------------------------------------------------------------------------------------------------------------------------------------------	//-------------------------------------------------------------------------------------------------------------------------------------------------	
	function getElement(target){//快速获取对象函数
		if(target==null || target=="")
			return null
		if(typeof(target)!="object")
			target=document.getElementById(target);
		return target;
	}
		
	function getTotalSize(){//获取显示内容实际大小
		var target=getElement(base.display);
		if(target==null)
			return;
		totalW=target.scrollWidth;
		totalH=target.scrollHeight;
	}
	
	function getScrollSize(){//获取滚动条可滚动大小
		var target=getElement(base.yScrollButton)
		if(target!=null){
			target=target.parentNode;
			scrollH=target.clientHeight;
		}
		target=getElement(base.xScrollButton)
		if(target!=null){
			target=target.parentNode;
			scrollW=target.clientWidth;
		}
	}
	
	function resetAll(){//重置所有
		var target=getElement(base.display);
		if(target!=null)
			target.scrollTop=target.scrollLeft=0;
		target=getElement(base.xScrollButton);
		if(target!=null){
			target.style.cursor="hand";
			target.style.marginLeft=0;
			target=target.parentNode;
			target.style.textAlign="left";
			if(totalW<=base.displayW)
				target.style.visibility="hidden";
		}
		target=getElement(base.yScrollButton);
		if(target!=null){
			target.style.cursor="hand";
			target.style.marginTop=0;
			target=target.parentNode;
			target.style.verticalAlign="top";
			if(totalH<=base.displayH)
				target.style.visibility="hidden";
		}
		target=getElement(base.upButton);
		if(target!=null){
			if(totalH<=base.displayH)
				target.style.cursor="";
			else
				target.style.cursor="hand";
		}
		target=getElement(base.downButton);
		if(target!=null){
			if(totalH<=base.displayH)
				target.style.cursor="";
			else
				target.style.cursor="hand";
		}
		target=getElement(base.leftButton);
		if(target!=null){
			if(totalW<=base.displayW)
				target.style.cursor="";
			else
				target.style.cursor="hand";
		}
		target=getElement(base.rightButton);
		if(target!=null){
			if(totalW<=base.displayW)
				target.style.cursor="";
			else
				target.style.cursor="hand";
		}
	}
	
	function setDisplay(){//设置内容框
		var target=getElement(base.display);
		if(target==null)
			return;
		target.style.overflowY=target.style.overflowX="hidden";
		if(base.displayH!=null)
			target.style.height=base.displayH;
		else
			base.displayH=target.style.height;
		if(base.displayW!=null)
			target.style.width=base.displayW;
		else
			base.displayW=target.style.width;
	}
	
	function setButtonEvent(target,eventFn,sign){//按扭事件绑定器
		target=getElement(target);
		if(target==null)
			return;
		target.ondragstart=function(){return false};
		target.onmouseup=function(){
							clearInterval(fun);
							this.releaseCapture()
						};
		target.onmousedown=function(){
							this.setCapture();
							fun=setInterval(function(){eventFn(sign)},base.speed)
						};
	}
	
	function setScrollEvent(target,eventFn,yx,TL,YX,HW,TopLeft,HeightWidth){//滚动条事件绑定器
		target=getElement(target);
		if(target==null)
			return;	
		target.ondragstart=function(){return false};
		target.onmouseup=function(){
							mouseOn=null;
							this.releaseCapture();
						};
		target.onmousedown=function(){
							mouseOn=this;
							eventY=event.y;
							eventX=event.x;
							marginT=parseInt(this.style.marginTop);
							marginL=parseInt(this.style.marginLeft);
							this.setCapture();
						};
		target.onmousemove=function(){
							if (event.button && mouseOn==this)
    							eventFn(yx,TL,YX,HW,TopLeft,HeightWidth);
						};
	}
}