/* <script src="js/jquery-1.8.3.min.js"></script> */
/* <script src="js/jquery.mousewheel.min.js"></script> */
/* css
//滚动区
.warp{ position:relative; overflow:hidden;}
.warp ul{ position:relative; top:0; ledt:0; transition:top linear .2s, left linear .2s;}
//滚动条
.dragwarp{ width:4px; height:100%; position:absolute; right:10px; top:0; z-index:1; display:none;}
.dragcolor{ width:2px; height:100%; margin:0 auto; background-color:#c2b38c;}
.dragbar{ width:4px; height:75px; background-color:#dfc98f; position:absolute; left:0; top:0; cursor:pointer; transition:top linear .1s, left linear .1s;}
*/
/* 调用
//常规调用
$('.warp').dragbar({
	step : 50,			//滚轮步长，小于等于0时关闭滚动事件
	direction : 'v',	//滚动方向，v/h，默认v-垂直
	trwarp : null,		//设置滚动区,默认为第一子元素
	showbar : false,	//是否持续显示滚动条
	clockbar : false,	//是否锁定滑块的高度，还是等比显示内容区的比例
	bgcolor : false		//拖拽槽是否变色
});
//ajax动态调用
$(document).on('mouseenter touchstart','.warp',function(){
	if(!$(this).hasclass('drag')){
		$(this).addclass('drag');
		$('.warp').dragbar({
			step : 50,			//滚轮步长，小于等于0时关闭滚动事件
			direction : 'v',	//滚动方向，v/h，默认v-垂直
			trwarp : null,		//设置滚动区,默认为第一子元素
			showbar : false,	//是否持续显示滚动条
			clockbar : false,	//是否锁定滑块的高度，还是等比显示内容区的比例
			bgcolor : false		//拖拽槽是否变色
		});
	};
});
*/

/*模拟滚动条，支持滚轮、鼠标拖动、触摸滑动，双向调用，显示数值，设定滚动步长,不支持同一区域双向调用*/
;(function($){
	$.fn.dragbar=function(opt){
		var def={
			step		: 50,			//滚轮步长，小于等于0时关闭滚动事件
			direction	: 'v',	//滚动方向，v/h，默认v-垂直
			trwarp		: null,		//设置滚动区,默认为第一子元素
			showbar		: false,	//是否持续显示滚动条
			clockbar	: false,	//是否锁定滑块的高度，还是等比显示内容区的比例
			bgcolor		: false,	//拖拽槽是否变色
			limit		: true		//顶点释放滚轮锁定
		};
	
		var opt=$.extend(def,opt);
		this.each(function(){
			var _this=$(this);
			var ranclass=parseint(math.random()*100000);
			_this.addclass('drag'+ranclass);
			_this=$('.drag'+ranclass);
			var step=opt.step;
			var trwarp=opt.trwarp;
			var direction=opt.direction;
			if(trwarp==null){
				trwarp=_this.children(':first');
			};
			var dragwarp=_this.children('.dragwarp');
			var creatdrag='<div class="dragwarp"><div class="dragcolor"></div><div class="dragbar"></div></div>';
			if(dragwarp.length<1){
				_this.append(creatdrag);
				dragwarp=_this.children('.dragwarp');
				dragwarp.fadein(200);
			};
			var dragbar=dragwarp.children('.dragbar');
			var dragcolor=dragwarp.children('.dragcolor');
			var swarpper,draglength,swarplength;
			
			function resetval(){
				if(direction=='v'){
					swarpper=_this.height()/trwarp.outerheight(true);
					if(!opt.clockbar){
						dragbar.css('height',swarpper*dragwarp.height()+'px');
					};
					draglength=dragwarp.height()-dragbar.outerheight(true);
					swarplength=trwarp.outerheight(true)-_this.height();
				}else if(direction=='h'){
					swarpper=_this.width()/trwarp.outerwidth(true);
					if(!opt.clockbar){
						dragbar.css('width',swarpper*dragwarp.width()+'px');
					};
					draglength=dragwarp.width()-dragbar.outerwidth(true);
					swarplength=trwarp.outerwidth(true)-_this.width();
				};
				
				if(!_this.is(":hidden") && swarpper>=1){
					dragwarp.css('display','none');
					return false;
				}else{
					return true;
				};
			};

			resetval();
			_this.on('mouseenter mousemove mouseout touchstart touchend',function(){
				resetval();
			});

			if(!opt.showbar){
				_this.on('mouseenter touchstart',function(){
					dragwarp.stop(true,true).fadein(200);
				});
				
				_this.on('mouseleave touchend',function(){
					dragwarp.fadeout(2000);
				});				
			};
			
			var mw=0,md=0,percentage=0;
			dragbar.on('mousedown',function(e){
				if(!resetval()){return};
				e.preventdefault();
				var positionbar = $(this).offset();
				var positionwarp = dragwarp.offset();
				var distence;
				if(direction=='v'){
					distence = e.pagey - positionbar.top + positionwarp.top;
				}else if(direction=='h'){
					distence = e.pagex - positionbar.left + positionwarp.left;
				};
				
				$(document).mousemove(function(e){
					if(direction=='v'){
						md = e.pagey - distence;
					}else if(direction=='h'){
						md = e.pagex - distence;
					};
					if(md<0){
						md=0;
					}else if(md>draglength){
						md = draglength;
					};
					percentage = md/draglength;
					if(direction=='v'){
						dragbar.css('top',md+'px');
						trwarp.css({'top':-swarplength*percentage+'px'});
					}else if(direction=='h'){
						dragbar.css('left',md+'px');
						trwarp.css({'left':-swarplength*percentage+'px'});
					};
					_this.css({'-moz-user-select':'none','-webkit-user-select':'none'}).on('selectstart',function(){return false});
				});
		
				$(document).mouseup(function(){
					$(document).off('mousemove');
					_this.css({'-moz-user-select':'text','-webkit-user-select':'text'}).off('selectstart');
				});
			});

			trwarp.on('mousewheel',function(e,d){
				if(!resetval()){return};
				if(step<=0){
					return false;
				};
				mw=md/step;
				if(d==-1){
					mw++;
					if(mw>=draglength/step){
						mw=draglength/step;
					};
				}else{
					mw--;
					if(mw<=0){
						mw=0;
					};
				};
				
				percentage = mw/draglength*step;
				if(direction=='v'){
					trwarp.css('top',-swarplength*percentage+'px');
					dragbar.css('top',mw*step+'px');
					if(opt.bgcolor){
						dragcolor.css('height',mw*step+'px');
					};
				}else if(direction=='h'){
					trwarp.css('left',-swarplength*percentage+'px');
					dragbar.css('left',mw*step+'px');
					if(opt.bgcolor){
						dragcolor.css('width',mw*step+'px');
					};
				};
				md=mw*step;
				if(opt.limit){
					if(mw>0 && mw<draglength/step){
						return false;
					};
				}else{
					return false;
				};
			});
			
			var touch,ts,tm,wp,dp;
			function handletouchevent(event) {
				if(!resetval()){return};
				switch (event.type) {
					case 'touchstart':
						//event.preventdefault();
						trwarp.css('transition','none');
						dragbar.css('transition','none');
						touch = event.originalevent.targettouches[0];
						if(direction=='v'){
							ts=tm=touch.screeny;
							wp=parseint(trwarp.css('top'));
							dp=parseint(dragbar.css('top'));
						}else if(direction=='h'){
							ts=tm=touch.screenx;
							wp=parseint(trwarp.css('left'));
							dp=parseint(dragbar.css('left'));
						};
					break;
					case 'touchmove':
						event.preventdefault();
						touch = event.originalevent.targettouches[0];
						if(direction=='v'){
							tm=touch.screeny;
						}else if(direction=='h'){
							tm=touch.screenx;
						};
						if(math.abs(tm-ts)>0){
							if(direction=='v'){
								trwarp.css('top',ts-tm+wp+'px');
								dragbar.css('top',(tm-ts)*swarpper+dp+'px');
								if(opt.bgcolor){
									dragcolor.css('height',(tm-ts)*swarpper+dp+'px');
								};
							}else if(direction=='h'){
								trwarp.css('left',ts-tm+wp+'px');
								dragbar.css('left',(tm-ts)*swarpper+dp+'px');
								if(opt.bgcolor){
									dragcolor.css('width',(tm-ts)*swarpper+dp+'px');
								};
							};
						};
						break;
					case 'touchend':
						//event.preventdefault();
						trwarp.css('transition','top linear .2s,left linear .2s');
						dragbar.css('transition','top linear .1s,left linear .1s');
						if(direction=='v'){
							if(parseint(dragbar.css('top'))<0){	
								trwarp.css('top',0);
								dragbar.css('top',0);
								if(opt.bgcolor){
									dragcolor.css('height',0);
								};
							};
							if(parseint(dragbar.css('top'))>draglength){
								trwarp.css('top',-swarplength+'px');
								dragbar.css('top',draglength+'px');
								if(opt.bgcolor){
									dragcolor.css('height',draglength+'px');
								};
							};
						}else if(direction=='h'){
							if(parseint(dragbar.css('left'))<0){	
								trwarp.css('left',0);
								dragbar.css('left',0);
								if(opt.bgcolor){
									dragcolor.css('width',0);
								};
							};
							if(parseint(dragbar.css('left'))>draglength){
								trwarp.css('left',-swarplength+'px');
								dragbar.css('left',draglength+'px');
								if(opt.bgcolor){
									dragcolor.css('width',draglength+'px');
								};
							};
						};
						break;
				};
			};
			$(document).on('touchstart touchmove touchend','.drag'+ranclass,handletouchevent);
			
		});
		return this;
	};
})(jquery);