// JavaScript Document

///滚动条点击事件
		///scrollId为滚动条的Id
		///scrollbarId为卷动条Id，即滚动条下面的滑道的Id
		///showDivId要显示的内容（内容放到div中）的Id
		///divId为外围div的Id
		function ScrollClick(event,scrollId,scrollbarId,showDivId,divId)
		{
			
			var   delatX=parseInt(getAbsPoint(document.getElementById(scrollId)))-parseInt(document.getElementById(scrollId).style.left);
			//alert(document.getElementsByClassName("ui-slider-handle").style.width);
			var scrollWidth=parseInt(document.getElementById(scrollId).style.width);
			if(scrollWidth!="")
			{
				document.getElementById(scrollId).style.position="absolute";
				document.getElementById(showDivId).style.position="absolute";
				
				document.getElementById(scrollId).style.left=(event.clientX-scrollWidth/2-delatX)+"px";
				
				document.getElementById(showDivId).style.left=-((event.clientX-scrollWidth/2-delatX)*Scale(scrollId,scrollbarId,showDivId,divId))+"px";
				//document.getElementById("text").value=Scale(scrollId,scrollbarId,showDivId,divId);
				ScrollIsFlood(scrollId,scrollbarId,showDivId,divId);
			}
			else
			{
				alert("滚动条的宽度未设置，请先设置！");	
				return false;
			}
			
			
		}
		
		///得到滚动条的真实坐标
		function   getAbsPoint(e)      
		{      
			var   x   =   e.offsetLeft,   y   =   e.offsetTop;      
			while(e=e.offsetParent)    
			{    
			   x   +=   e.offsetLeft;      
			   y   +=   e.offsetTop;   
			}    
			return x;
		} 
		///滚动条拖动
		///scrollId为滚动条的Id
		///scrollbarId为卷动条Id，即滚动条下面的滑道的Id
		///showDivId要显示的内容（内容放到div中）的Id
		///divId为外围div的Id
          function  ScrollDrag(event,scrollId,scrollbarId,showDivId,divId)
		  {  
			  //计算元素原左上角与鼠标的距离  
			  //moveHandler要这值  
			  /*计算对象与鼠标之间的距离，x，y坐标*/  
			  
			  if(document.getElementById(scrollId).style.left=="") 
			  {
				  	document.getElementById(scrollId).style.left="0px";
			  }
			  var   delatX=event.clientX-parseInt(document.getElementById(scrollId).style.left);  
			  
			  //var   delatY=event.clientY-parseInt(elementToDrag.style.top);  
		   //注册响应mousemove和mousedown事件后的mouseup事件的处理程序  
			 if(document.addEventListener)
			 {     //2级DOM事件模型  
                  //注册捕捉事件处理程序  
                  document.addEventListener("mousemove",moveHandler,true); //添加事件，并设置事件的相应顺序 true为先执行 moveHandler（）  
                  document.addEventListener("mouseup",upHandler,true);  
              }  
              else if(document.attachEvent)
			  {   //IE5+   的事件模型  
                  /*在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时, 
                  它们才被触发.   假设不存在干涉元素,   处理了事件后它们就停止传播*/  
                  document.attachEvent("onmousemove",moveHandler);  
                  document.attachEvent("onmouseup",upHandler);  
              }  
              else
			  {  
                  //IE4事件模型  
                  //IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理  
                  //程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.  
                  //注意,这样依赖于事件起泡.  
                  var oldmovehandler=document.onmousemove;  
                  var olduphandler=document.onmouseup;  
                  document.onmousemove=moveHandler;  
                  document.onmouseup=upHandler;  
              }  
              //我们处理了该事件,不要再让其他元素看见.  
              if(event.stopPropagation)event.stopPropagation();   //2   级DOM  
              else event.cancelBubble=true; //IE  
              //下面禁止执行默认动作  
              if(event.preventDefault)event.preventDefault();     //2级DOM  
              else event.returnValue=false; //IE  
              /*这是元素被拖动时捕捉mousemove事件的处理程序. 
              * 它负责移动元素 
              */  
              function moveHandler(e)
			  {  
                  if(!e)e=window.event; //IE事件模型;  
               //把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整  
			   
			   	document.getElementById(scrollId).style.position="absolute";
				document.getElementById(showDivId).style.position="absolute";
                
				
				document.getElementById(scrollId).style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置 
				
				 var scrollLeft=parseInt(document.getElementById(scrollId).style.left);
				 var bili=Scale(scrollId,scrollbarId,showDivId,divId);
				 document.getElementById(showDivId).style.left=-(scrollLeft*bili)+"px";
				 //document.getElementById("text").value=elementToDrag.style.left;
				 
				  
				  ScrollIsFlood(scrollId,scrollbarId,showDivId,divId);
				  
				  
				  
				  
                  //elementToDrag.style.top=(e.clientY-delatY)+"px";  
                  //不要再让其他元素看到该事件.  
                  if(e.stopPropagation)e.stopPropagation();     //2级DOM  
                  else e.cancelBubble=true; //IE  
              }  
              /*     这是捕捉拖移结束最后发生的mouseup事件的处理程序. 
                */  
              function upHandler(e)
			  {  
                  if(!e)   e=window.event; //IE事件模型.  
                  //注销捕捉事件程序.  
                  if(document.removeEventListener)
				 {//DOM事件模型  
                      document.removeEventListener("mouseup",upHandler,true);  
                      document.removeEventListener("mousemove",moveHandler,true);  
                 }  
                  else if(document.detachEvent)
				 {//IE5+事件模型  
                      document.detachEvent("onmouseup",upHandler);  
                      document.detachEvent("onmousemove",moveHandler);  
                  }  
                  else
				 {//IE事件模型  
                      document.onmouseup=olduphandler;  
                      document.onousemove=oldmovehandler;  
                  }  
                  //不要再让事件进一步传播.  
                  if(e.stopPropagation)   e.stopPropagation();     //2级DOM  
                  else e.cancelBubble = true; //IE  
             	}  
          } 
		  
		  
	///计算比例
	///scrollId为滚动条的Id
	///scrollbarId为卷动条Id，即滚动条下面的滑道的Id
	///showDivId要显示的内容（内容放到div中）的Id
	///divId为外围div的Id
    function Scale(scrollId,scrollbarId,showDivId,divId)
	{
		//滚动条与卷动条长度之差
		if(document.getElementById(scrollId).style.width=="") 
		{
			alert("滚动条的宽度未设置，请先设置！");
			return false;
		}
		if(document.getElementById(scrollbarId).style.width=="") 
		{
			alert("卷动条的宽度未设置，请先设置！");
			return false;
		}
		if(document.getElementById(showDivId).style.width=="") 
		{
			alert("要显示内容的DIV宽度未设置，请先设置！");
			return false;
		}
		if(document.getElementById(divId).style.width=="") 
		{
			alert("外围DIV的宽度未设置，请先设置！");
			return false;
		}
		var changducha=parseInt(document.getElementById(scrollbarId).style.width)-parseInt(document.getElementById(scrollId).style.width);
		//document.getElementById("text").value=changducha;
		var bili=(parseInt(document.getElementById(showDivId).style.width)-parseInt(document.getElementById(divId).style.width))/changducha;
		return bili;
	}
	
	
	///判断滚动条是否超出
	///scrollId为滚动条的Id
	///scrollbarId为卷动条Id，即滚动条下面的滑道的Id
	///showDivId要显示的内容（内容放到div中）的Id
	///divId为外围div的Id
	function ScrollIsFlood(scrollId,scrollbarId,showDivId,divId)
	{
			if(parseInt(document.getElementById(scrollId).style.left)<0)
			{
				//alert("11");
				document.getElementById(scrollId).style.left="0px";
				document.getElementById(showDivId).style.left="10px";
			}
			var sliderchangdu=parseInt(document.getElementById(scrollbarId).style.width)-parseInt(document.getElementById(scrollId).style.width);
			if(parseInt(document.getElementById(scrollId).style.left)>sliderchangdu)
			{
				document.getElementById(scrollId).style.left=sliderchangdu+"px";
				document.getElementById(showDivId).style.left=-(parseInt(document.getElementById(showDivId).style.width)-parseInt(document.getElementById(divId).style.width))+"px";
			}
	}