重構增強版通用滾動widget，鼠標移入可暫停滾動

/**
 * 滾動HTML集合對象
 * @param {Element} container 容器節點
 * @param {Number} unitLength 滾動寬度，等於容器內子對象的寬度，子對象寬度必須一致
 * @param {Number} speed 每10毫秒移動的像素值
 * @param {String} direction 滾動方向(up, down, left, right)
 * @param {Number} containerRange 容器可視範圍 width - paddingLeft - paddingRight 或者 height - paddingTop - paddingBottom
 */
Scroll = function(container, unitLength, speed, direction, containerRange){	
	var thisObj = this;
	this.getContainer = function(){
		return container;
	}

	var COUNT = 0;
	for(var i=0,l=container.childNodes.length;i<l;i++)	{
		if(container.childNodes[i].nodeType==1)COUNT++;
	}
	var CONTAINER_INIT_LENGTH = unitLength * COUNT;
	var CONTAINER_LENGTH = (CONTAINER_INIT_LENGTH * 2);

	var base = {
		target: container.style,
		readyPos: 0,
		scrollTarget: '',
		lengthTarget: '',
		setPos: function(value){
			this.target[this.scrollTarget] = value + 'px';
		},
		getPos: function(){
			return parseInt(this.target[this.scrollTarget]);
		},
		getMovedLength: function(){
			return Math.abs(this.getPos() - this.readyPos);
		},
		init: function(){
			this.target[this.lengthTarget] = CONTAINER_LENGTH + 'px';
		},
		resetPos: function(){
			this.setPos(this.readyPos);
		}
	}

	this.directioner = {
		left : {
			readyPos: 0,
			scrollTarget: "marginLeft",
			lengthTarget: "width",
			move: function(length){
				this.setPos(this.getPos() - length);
			}
		},
		right : {
			readyPos: -(CONTAINER_LENGTH - containerRange),
			scrollTarget: "marginLeft",
			lengthTarget: "width",
			move: function(length){
				this.setPos(this.getPos() + length);
			}
		},
		up : {
			readyPos: 0,
			scrollTarget: "marginTop",
			lengthTarget: "height",
			move: function(length){
				this.setPos(this.getPos() - length);
			}
		},
		down : {
			readyPos: -(CONTAINER_LENGTH - containerRange),
			scrollTarget: "marginTop",
			lengthTarget: "height",
			move: function(length){
				this.setPos(this.getPos() + length);
			}
		}
	}	

	var obj = this.directioner;
	for(var p in base){
		for(var adir in obj){
			if(!obj[adir].hasOwnProperty(p))
				obj[adir][p] = base[p];
		}
	}

	var moveUnitLength = function(callback){
		var adir = thisObj.directioner[direction];
		if(adir.getMovedLength() == CONTAINER_INIT_LENGTH)adir.resetPos();
		thisObj.move(speed, unitLength, direction, function(){
			callback();
		})
	}

	/**
	* 以對象子項長度爲單位，在指定方向上移動對象
	* @param {String} direction 移動方向
	* @param {Number} perMoveCount 每次移動對象的子項個數
	* @param {Function} callback 回調
           * 可優化成每次移動小於perMoveCount的 總子節點數的最大公約數
	*/
	this.moveOnce = function(direction, perMoveCount, callback){
		if(isNaN(parseInt(perMoveCount)))perMoveCount = 1;
		moveUnitLength(function(){
			perMoveCount--;
			if(perMoveCount){
				moveUnitLength(arguments.callee);
			}else{
				callback();
			}
		})
	}

	/**
	* 循環滾動
	* @param {Boolean} touchAble 鼠標移入時暫停滾動，移出時恢復滾動
	*/
	this.scroll = function(touchAble){
		var callback = function(){
			thisObj.reset(direction);
			timer = thisObj.move(speed, CONTAINER_INIT_LENGTH, direction, callback);
		}
		var timer = this.move(speed, CONTAINER_INIT_LENGTH, direction, callback);
		if(touchAble){
			container.onmouseover = function(){
				if(timer.length){
					window.clearInterval(timer.pop());
				}else{
					timer.push(0);
				}
			}
			container.onmouseout = function(){
				timer = thisObj.move(speed, CONTAINER_INIT_LENGTH - thisObj.directioner[direction].getMovedLength(), direction, callback);					
			}
		}
	}

	/**
	* 初始化容器
	*/
	this.init = function(){
		var childNodes = container.innerHTML;
		container.style.display = "block";
		container.innerHTML = childNodes + childNodes;
		this.directioner[direction].init();
		this.reset(direction);
	}	
}

/**
 * 重置容器到初始位置
 * @param {String} 方向 
 */
Scroll.prototype.reset = function(direction){
		this.directioner[direction].resetPos();
}

/**
 * 在指定方向上以設定速度移動對象設定距離
 * @param {Number} speed 每10毫秒移動像素
 * @param {Number} distance 移動距離
 * @param {String} direction 移動方向 
 * @param {Function} onMoved 移動後調用
 * @return {Number} timer 連續移動的句柄
 */
Scroll.prototype.move= function(speed, distance, direction, onMoved){
	if(timer && timer.length){
		return;
	}
	var moveObj = this.getContainer();
    var i = Math.abs(distance);
	var scroll_px = speed;
	var adir = this.directioner[direction];
    var handler = function(){
		adir.move(scroll_px);
        i -= scroll_px;
		if(i > 0 && i < scroll_px){
			scroll_px = i;
		}
        if (i == 0) {
			if(timer.length){
				window.clearInterval(timer.pop());
				if(typeof(onMoved) == "function")onMoved();
			}
        }
    }
    var timer = [window.setInterval(handler, 10)];
	return timer;
}

/*
-------------------------------單擊按鈕向右滾動示例-------------------------------------
<input id="btnScrollRight" name="" type="button" class="btn_goto"/>
<div style="width:636px;overflow:hidden;">
	<div id="scroll_prizes">
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='1' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='2' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='3' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='4' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='5' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='6' width="150" height="150" border="0" alt="" /></a></div>
	</div>
</div>
<script>
	var mq1 = new Scroll(document.getElementById("scroll_prizes"), 159, 10, "right", 636);	
	mq1.init();
	//mq1.scroll();	
	var mq1_is_moving = false;
	document.getElementById("btnScrollRight").onclick = function(){
		//this.moveOnce = function(direction, perMoveCount, callback){
		if(mq1_is_moving)return;
		mq1_is_moving = true;
		mq1.moveOnce("right", 4, function(){
			mq1_is_moving = false;
		});
	}
</script>

-------------------------------循環向上滾動示例-------------------------------------
<div class="co_list" style="height:566px;overflow:hidden;padding:20px 30px">
	<div style="height:536px;overflow:hidden;">
		<div id="marquee2">
			<a href=""><img src="../imgaes/index/co_adv11.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv12.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv13.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv14.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv15.png" width="150" height="55" border="0" alt=""/></a>
		</div>
	</div>
</div>
<script>	
	mq2 = new Scroll(document.getElementById("marquee2"), 69, 2, "up", 536);	
	mq2.init();
	mq2.scroll();
</script>

-------------------------------循環向右滾動示例-------------------------------------
<div style="width:615px;overflow:hidden;height:110px;">
	<div id="marquee1">
		<div class="list">
			<img src="../imgaes/index/co_adv11.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv12.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv13.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv14.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv15.png" width="201" height="101" border="0" alt="" />
		</div>		
	</div>
</div>
<script>	
	var mq1 = new Scroll(document.getElementById("marquee1"), 211, 2, "right", 615);	
	mq1.init();
	mq1.scroll();
</script>	
*/