var move = false; //移动标记
var _x; //原点移动的距离
var _width = $('.dragX').width(); //坐标轴总长度
var _leftWidth = _width * 0.76; //width:0%~100%
var _rightWidth = _width * 0.24; //width:100%~500%
var t = '';
$(function() {
	kedu();
})
function kedu() {
	//生成Y轴刻度
	$('.drag-ul ul').html('');
	var Yheight = $('.drag-ul ul').height();
	var Y1 = Yheight / 5;
	$('.drag-ul ul').append(
		'<li class="PercentBit pb25" style="bottom:' + Y1 * 0.25 + 'px">' +
		'<p>' + 25 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb50" style="bottom:' + Y1 * 0.5 + 'px">' +
		'<p>' + 50 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb75" style="bottom:' + Y1 * 0.75 + 'px">' +
		'<p>' + 75 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb100" style="bottom:' + Y1 * 1 + 'px">' +
		'<p>' + 100 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb125" style="bottom:' + Y1 * 1.25 + 'px">' +
		'<p>' + 125 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb150" style="bottom:' + Y1 * 1.5 + 'px">' +
		'<p>' + 150 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb200" style="bottom:' + Y1 * 2 + 'px">' +
		'<p>' + 200 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb250" style="bottom:' + Y1 * 2.5 + 'px">' +
		'<p>' + 250 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb300" style="bottom:' + Y1 * 3 + 'px">' +
		'<p>' + 300 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb400" style="bottom:' + Y1 * 4 + 'px">' +
		'<p>' + 400 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>' +
		'<li class="PercentBit pb500" style="bottom:' + Y1 * 5 + 'px">' +
		'<p>' + 500 + '分位值</p>' +
		'<span></span>' +
		'<p>800,000</p>' +
		'</li>'
	)
}
function drag(e) {
	if(move) {
		kedu();
		var x = e.pageX - _x;
		if(x <= 0) {
			x = 0
		}
		if(x >= _width) {
			x = _width
		}
		$(".drag-handle").css({
			"left": x
		});
		$('.numpx').html(x); //坐标点距离原点的位置(px)
		var numpb = 0;
		if(x <= _leftWidth) { //0%~100%
			numpb = x / _leftWidth * 100;
			$('.numpb').html(numpb.toFixed(2)); //坐标点距离原点位置(%)
		} else { //100%~500%
			x2 = x - _leftWidth;
			numpb = x2 / _rightWidth * 40 * 10 + 100;
			$('.numpb').html(numpb.toFixed(2)); //坐标点距离原点位置(%)
		}
		if(numpb <= 100) {
			$('.drag-ul ul').height('500%');
			$('.pb-bgs').css('bottom', numpb + '%');
		} else
		if(numpb > 100 && numpb <= 300) {
			$('.drag-ul ul').height(400 - numpb + '%');
			var Yzhu = $('.drag-ul ul').height() / 5 * numpb / 100;
			$('.pb-bgs').css('bottom', Yzhu + 'px');
			if(numpb > 120) {
				$('.pb25,.pb75,.pb125').hide()
			}
			if(numpb > 235) {
				$('.pb50,.pb150,.pb250').hide()
			}
		} else
		if(numpb > 300) {
			$('.drag-ul ul').height('100%');
			var Yzhu = $('.drag-ul ul').height() / 5 * numpb / 100;
			$('.pb-bgs').css('bottom', Yzhu + 'px');
			$('.pb25,.pb50,.pb75,.pb125,.pb150,.pb250').hide()
		}
	}
}
$(".drag-handle").mousedown(function(e) { //按下鼠标按键
	move = true;
	_x = e.pageX - parseInt($(".drag-handle").css("left"));
	clearInterval(t);
	$('.numtime').html('0');
});
$(document).mouseup(function(e) { //释放鼠标按键
	move = false;
	var x3 = x;
	var time = 0;
	_x = e.pageX - parseInt($(".drag-handle").css("left"));
	var x = e.pageX - _x;
	if(x3 != x) {
		t = setInterval(function() {
			$('.numtime').html(++time);
		}, 1000);
		/*t=setTimeout(function(){
		//3秒提交
		},1000);*/
	}
});
$(document).mousemove(function(e) { //鼠标指针在指定的元素中移动
	drag(e);
})