var isMouseDown			= false; //滑鼠狀態值，當滑鼠處於按下狀態時，滑鼠的移動效果才會有效
var scrollY			= 0; //初始狀態時有滾動效果的div的scrollTop值
var scrollObjInfo		= new Array(); //陣列物件，用於存放外層div物件、滾動內容物件、滾動條物件、滾動條上面的滑塊物件
var mouseDownY			= null; //記錄滑鼠按下時的點選點y軸高度
var scrollBarIndexHight	= null; //滑塊高度，按比例計算得到值

function jsScroll(scrollDivId,scrollDivContentId,scrollBarId,scrollBarIndexId)
{
	//資料初始化：
	scrollObjInfo		= [];
	isMouseDown		= false;
	scrollY			= 0;
	mouseDownY		= null;
	scrollBarIndexHight	= null;
	scrollY			= null;
	
	//jquery 獲取物件
	scrollDivObj		= $('#'+scrollDivId);
	scrollDivContentObj	= $('#'+scrollDivContentId);
	scrollBarObj		= $('#'+scrollBarId);
	scrollBarIndexObj	= $('#'+scrollBarIndexId);
	//資料存入陣列物件中供後續函式使用
	scrollObjInfo.push(scrollDivObj,scrollDivContentObj,scrollBarObj,scrollBarIndexObj);
	
	//判斷是否需要顯示滾動條
	if(scrollDivObj.height() >= scrollDivContentObj.height())
	{
		$('#'+scrollBarId).hide();
		return false;
	}
	
	//計算滾動條的顯示比例
	scrollBarIndexHight = ( scrollDivObj.height() / scrollDivContentObj.height() ) * scrollBarObj.height();
	//當計算出來的滑塊高度過小的時候將滑塊高度設定為20畫素的預設值
	if(scrollBarIndexHight < 20)
	{
		scrollBarIndexHight = 20;
	}
	//設定滑塊css高度屬性
	scrollBarIndexObj.height(scrollBarIndexHight);
	//初始化滑塊，內容位置均為頂部開始
	scrollDivObj[0].scrollTop = 0;
	reSetScrollBarPosition();
	//顯示滾動條
	scrollBarObj.show();
	
	//繫結滑塊的滑鼠事件：滑鼠按下
	scrollBarIndexObj.mousedown(function(event){
		mouseDownY	= event.clientY;
		scrollY		= scrollDivObj[0].scrollTop
		isMouseDown	= true;
	})

	//繫結滑塊的滑鼠事件：滑鼠鬆開，將滑鼠isMouseDown值置為false，scrollY置為0
	$(document).mouseup(function(event){
		scrollY		= 0;
		isMouseDown	= false;
	})
	
	//滑鼠滾輪事件
	if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){//火狐
		document.getElementById(scrollDivId).addEventListener('DOMMouseScroll',DivMouseWheel,false);
		document.getElementById(scrollBarId).addEventListener('DOMMouseScroll',DivMouseWheel,false);
		
	}else{//非火狐
		document.getElementById(scrollDivId).onmousewheel = DivMouseWheel;
		document.getElementById(scrollBarId).onmousewheel = DivMouseWheel;
	}
}

//全頁面事件：滑鼠移動事件
$(document).mousemove(function(event){
	event			= event || window.event;
	//滾動元素存在且滾動滑塊被按下的時候才執行滾動效果
	scrollDivObj	= scrollObjInfo[0];
	if(scrollDivObj && isMouseDown)
	{
		var per	= (scrollDivObj[0].scrollHeight - scrollDivObj[0].clientHeight) / (scrollDivObj[0].clientHeight - scrollBarIndexHight);
		scrollDivObj[0].scrollTop = scrollY - (mouseDownY - event.clientY) * per;
		reSetScrollBarPosition();
	}
})


//重置滾動條的顯示位置
function reSetScrollBarPosition()
{
	scrollMoveObj			= scrollObjInfo[0];
	scrollDivContentObj		= scrollObjInfo[1];
	scrollBarObj			= scrollObjInfo[2];
	scrollBarIndexObj		= scrollObjInfo[3];
	var marginTop			= ( scrollMoveObj[0].scrollTop / scrollDivContentObj.height() ) * scrollBarObj.height();
	scrollBarIndexObj.css("margin-top",marginTop + "px");
}

//滑鼠滾動輪效果
function DivMouseWheel(event){
	scrollMoveObj	<span style="white-space:pre">	</span>= scrollObjInfo[0];
	event			= event || window.event;
	var step		= 50;//設定滾輪滾動一下的時候，需要滾動的內容滾動50個畫素
	var wheelValue	= null;//滑鼠滾輪滾動時滾輪滾動方向,1表示向下滾，0表示向上滾
	
	if(event.wheelDelta){
		wheelValue	= event.wheelDelta < 0 ? 1 : 0 ;
	}else{ //火狐
		wheelValue	= event.detail > 0 ? 1 : 0 ;
	}
	if(wheelValue > 0){
		scrollMoveObj[0].scrollTop	+= step; //向上滾動
	}else{
		scrollMoveObj[0].scrollTop	-= step; //向下滾動
	}
	reSetScrollBarPosition();
	//阻止瀏覽器其他自帶滾動條的滾輪效果，火狐為event.preventDefault();其他瀏覽器為return false;
	if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
		event.preventDefault();
	}else{
		return false;
	}
}




//隱藏頁面自帶的滾動條
function hideWindowsScrollBar(){
	document.documentElement.style.overflow='hidden';
	if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){//火狐
		document.body.addEventListener('DOMMouseScroll',function(){},false);
	}else{
		document.body.onmousewheel = function(){return false;};
	}
}

//顯示頁面自帶的滾動條
function showWindowsScrollBar(){
	document.documentElement.style.overflow='auto';
	if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){//火狐
		document.body.addEventListener('DOMMouseScroll',function(){},false);
	}else{
		document.body.onmousewheel = function(){return true;};
	}
}