/*	window.onload = function() {
	var oActionBlock = document.getElementById('action-block');
	var oActionBar = document.getElementById('action-bar');
	var oScrollBar = document.getElementById('scroll-bar');
	var oShowAmount = document.getElementById('showAmount').getElementsByTagName('input')[0];
	var length = 550;

	clickSlide(oActionBlock, oActionBar, oScrollBar, 300, length, oShowAmount);
	drag(oActionBlock, oActionBar, 300, length, oShowAmount);
	addScale(60, 300, length, oScrollBar);
	inputBlur(oActionBlock, oActionBar, length, oShowAmount);
}		*/

function SlideBar(data){
	var _this = this;
	var oActionBlock = document.getElementById(data.actionBlock);
	var oActionBar = document.getElementById(data.actionBar);
	var oSlideBar = document.getElementById(data.slideBar);
	var oEntireBar = document.getElementById(data.entireBar)
	var barLength = data.barLength;
	var interval = data.interval;
	var maxNumber = data.maxNumber;
	var minNumber =	data.minNumber;
	var rangeNumber = data.rangeNumber;
	var onResource = data.onResource;
	var blockWidth = oActionBlock.offsetWidth;
	var oShowArea = null;
	var oDataArea = null;
	if(data.oShowArea){
		oShowArea = document.getElementById(data.oShowArea);	
	}
	if(data.oDataArea)
	{
		oDataArea = document.getElementById(data.oDataArea)
	}

	if(oDataArea){
		_this.addScale(oSlideBar, interval, rangeNumber, barLength);
		_this.inputBlur(oActionBlock, oActionBar, minNumber, rangeNumber, barLength, oDataArea, blockWidth);
		_this.clickSlide(oActionBlock, oActionBar, oEntireBar, minNumber, rangeNumber, barLength, oShowArea, oDataArea, onResource);
		_this.drag(oActionBlock, oActionBar, minNumber, rangeNumber, barLength, oShowArea, oDataArea, onResource);
		/* 设置初始位置 */
		var tmp = parseInt(oDataArea.value) - minNumber;
		tmp = tmp > 0 ?tmp:-tmp;
		var point_X = tmp * barLength / rangeNumber;
		oActionBlock.style.left = point_X - (oActionBlock.offsetWidth / 2) + 'px' ;
		oActionBar.style.width = point_X + 'px';
	}
//	else{
//		_this.addScale(oSlideBar, interval, rangeNumber, barLength);
//		/* _this.clickSlide(oActionBlock, oActionBar, oSlideBar, maxNumber, barLength); */
//		_this.drag(oActionBlock, oActionBar, minNumber, rangeNumber, barLength, oDataArea, onResource);
//	}
	
}

SlideBar.prototype = {
	//初始化(添加刻度线)
	addScale : function(slideBar, interval, total, barLength){
		// interval代表刻度之间间隔多少, total代表最大刻度
		// slideBar表示在哪个容器添加刻度

		var num = total / interval; //num为应该有多少个刻度

		for (var i = 0; i < num + 1; i++) {
			var oScale = document.createElement('div');
			oScale.style.width = '2px';
			oScale.style.height = '14px';
			oScale.style.position = 'absolute';
			oScale.style.background = '#AFAFAF';
			oScale.style.zIndex = '-10';
			oScale.style.left = (i * interval * barLength) / total + 'px';
			slideBar.appendChild(oScale);

			/* var oText = document.createElement('div');
			oText.style.position = 'absolute';
			oText.style.top = '16px';
			oText.style.height = '16px';
			oText.innerHTML = i * interval;
			slideBar.appendChild(oText);
			oText.style.left = ((i * interval * barLength) / total) - (oText.offsetWidth / 2) + 'px'; */
		}
	},

	// 监听输入框
	inputBlur : function(actionBlock, actionBar, minNumber, rangeNumber, barLength, input, blockWidth){
		//actionBlock指滑块,actionBar指显示条,input指显示的输入框
		var _this = this;
		input.onchange = function(){
			var inputVal = this.value;
			_this.autoSlide(actionBlock, actionBar, minNumber, rangeNumber, barLength, inputVal, blockWidth);
		}
	},

	/* 在输入框输入值后自动滑动	*/
	autoSlide : function(actionBlock, actionBar, min, total, barLength, inputVal, blockWidth){
		//inputVal表示输入框中输入的值
		var _this = this;
		var target = ((inputVal - min) * barLength / total);
		_this.checkAndMove(actionBlock, actionBar, target, blockWidth);
	},

	/*	检查target(确认移动方向)并滑动	*/
	checkAndMove : function(actionBlock, actionBar, target, blockWidth){
		actionBarPace = target;
		actionBlock.style.left = actionBarPace - (blockWidth / 2) + 'px'; //
		actionBar.style.width = actionBarPace + 'px';
},

	/*	鼠标点击刻度滑动块自动滑动	*/
	clickSlide : function(actionBlock, actionBar, entireBar, min, total, barLength, showArea, dataArea, resource){
		var _this = this;
		actionBar.onclick = entireBar.onclick = function(ev){
		var ev = ev || event;
		var left = ev.offsetX;

		if (left <= barLength && left >= 0) {
			actionBlock.style.left = left - (actionBlock.offsetWidth / 2) + 'px';
			actionBar.style.width = left + 'px';
			if(showArea){
				/* 显示值（四舍六入后）*/
				showArea.value = Math.round(left / barLength * total) + min;
				showArea.innerHTML = showArea.value + "";
			}
			if(dataArea){
				/* 输出值（四舍六入后）*/
				dataArea.value = Math.round(left / barLength * total) + min;
				
				if(resource == "image.html")
				{
					OnSave();
				}else if(resource == "preview.html" && dataArea.id != "speed")
				{
					SetImage();
				}else
				{
					return false;
				}
			}
		}
		return false;
		}
	}, 

	/*	鼠标按着拖动滑动条	*/
	drag : function(actionBlock, actionBar, min, total, barLength, showArea, dataArea, onResource){
		/*	参数分别是点击滑动的那个块,滑动的距离,滑动条的最大数值,显示数值的地方(输入框)	*/
		actionBlock.onmousedown = function(ev) {
			var ev = ev || event;
			var thisBlock = this;
			var disX = ev.clientX;
			var currentLeft = thisBlock.offsetLeft;

			document.onmousemove = function(ev) {
				var ev = ev || event;
				var left = ev.clientX - disX;

				if (currentLeft + left <= (barLength - thisBlock.offsetWidth / 2 ) && currentLeft + left >= 0 - thisBlock.offsetWidth / 2) {
					thisBlock.style.left = currentLeft + left + 'px';
					actionBar.style.width = currentLeft + left + (actionBlock.offsetWidth / 2) + 'px';
					if(showArea){
						/* 显示值（四舍六入后）*/
						showArea.value = Math.round(actionBar.offsetWidth / barLength * total) + min;
						showArea.innerHTML = showArea.value + "";
					}
					if(dataArea){
						/* 输出值（四舍六入后）*/
						dataArea.value = Math.round(actionBar.offsetWidth / barLength * total) + min;
					}
				}
				return false;
			}

			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				/* 触发数据改变事件 */
				if(dataArea){
					if(onResource == "image.html")
					{
						OnSave();
					}else if(onResource == "preview.html" && dataArea.id != "speed")
					{
						SetImage();
					}else
					{
						return false;
					}
				}
			}

			return false;
		}
	},

	getStyle : function(obj, attr){
		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
	}
}

/* 初始化滑动条 */
function InitSlider(documentSliders)
{
	var domScrollbar;
	var finalStyle;
	var maxNumber;
	for (var i = 0; i<documentSliders.length; i++)
	{
			domScrollbar = document.getElementById(documentSliders[i].name + "-scroll-bar");
			maxNumber = documentSliders[i].maxNumber;
			if (!domScrollbar)
			{
				continue;
			}
			finalStyle = domScrollbar.currentStyle ? domScrollbar.currentStyle : document.defaultView.getComputedStyle(domScrollbar, null);
			var barLength = parseInt(finalStyle.width) - 67;
			if(documentSliders[i].resource == "display.html")
			{
				barLength = 200;
			}else if (documentSliders[i].resource == "preview.html")
			{
				barLength = domScrollbar.clientWidth;
			}
		new SlideBar({
			actionBlock : documentSliders[i].name + '-action-block',
			actionBar : documentSliders[i].name + '-action-bar',
			entireBar : documentSliders[i].name + '-entire-bar',
			slideBar : documentSliders[i].name + '-scroll-bar',
			barLength : barLength,
			interval : 10,
			maxNumber : maxNumber,
			minNumber :	documentSliders[i].minNumber,
			rangeNumber : maxNumber - documentSliders[i].minNumber,
			oShowArea : documentSliders[i].name + '-output',
			oDataArea : documentSliders[i].name,
			onResource: documentSliders[i].resource});
	}
}