//文字跑馬燈
	$(function(){
		// 先取得 div#jquery_marquee ul
		// 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
		// 再來取得 div#jquery_marquee 的高來決定每次跑馬燈移動的距離
		// 設定跑馬燈移動的速度及輪播的速度
		var $marqueeUl = $('div#jquery_marquee ul'),
			$marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
			_height = $('div#jquery_marquee').height() * -1,
			scrollSpeed = 500,
			timer,
			speed = 3000 + scrollSpeed,
			direction = 0,	// 0 表示往上, 1 表示往下
			_lock = false;

		// 先把 $marqueeli 移動到第二組
		$marqueeUl.css('top', $marqueeli.length / 2 * _height);
		
		// 幫左邊 $marqueeli 加上 hover 事件
		// 當滑鼠移入時停止計時器；反之則啟動
		$marqueeli.hover(function(){
			clearTimeout(timer);
		}, function(){
			timer = setTimeout(showad, speed);
		});
		
	
		// 控制跑馬燈上下移動的處理函式
		function showad(){
			_lock = !_lock;
			var _now = $marqueeUl.position().top / _height;
			_now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;
			
			// $marqueeUl 移動
			$marqueeUl.animate({
				top: _now * _height
			}, scrollSpeed, function(){
				// 如果已經移動到第二組時...則馬上把 top 設回到第一組的最後一筆
				// 藉此產生不間斷的輪播
				if(_now == $marqueeli.length - 1){
					$marqueeUl.css('top', $marqueeli.length / 2 * _height - _height);
				}else if(_now == 0){
					$marqueeUl.css('top', $marqueeli.length / 2 * _height);
				}
				_lock = !_lock;
			});
			
			// 再啟動計時器
			timer = setTimeout(showad, speed);
		}
		
		// 啟動計時器
		timer = setTimeout(showad, speed);

		$('span').focus(function(){
			this.blur();
		});
	});

//圖片跑馬燈

	$(function(){
		// 先取得必要的元素並用 jQuery 包裝
		// 再來取得 $slides 的高度及設定動畫時間
		var $block = $('#pciRunBlock'),
			$slides = $('#player ul.list', $block),
			_height = $slides.find('li').height(),
			$li = $('li', $slides),
			_animateSpeed = 400, 
			timer, _speed = 4000;
		
		// 先移到最後一張
		$slides.css({
			top: _height * ($li.length - 1) * -1
		});
		
		// 產生 li 選項
		var _str = '';
		for(var i=0, j=$li.length;i<j;i++){
			// 每一個 li 都有自己的 className = playerControl_號碼
			_str += '<li class="playerControl_' + (i+1) + '">' + (i+1) + '</li>';
		}

		// 產生 ul 並把 li 選項加到其中
		// 並幫 li 加上 mouseover 事件
		var $controlLi = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).find('li');
		$controlLi.mouseover(function(){
			clearTimeout(timer);

			var $this = $(this);
			$this.addClass('current').siblings('.current').removeClass('current');
			// 移動位置到相對應的號碼
			$slides.stop().animate({
				top: _height * ($li.length - $this.index() - 1) * -1
			}, _animateSpeed, function(){
				if(!_isOver) timer = setTimeout(moveNext, _speed);
			});

			return false;
		}).eq(0).mouseover();
		
		// 當滑鼠移到 $block 時則停止輪播
		// 移出時則繼續輪播
		var _isOver = false;
		$block.mouseenter(function(){
			clearTimeout(timer);
			_isOver = true;
		}).mouseleave(function(){
			_isOver = false;
			timer = setTimeout(moveNext, _speed);
		});

		// 用來控制移動的函式
		function moveNext(){
			var _now = $controlLi.filter('.current').index();
			$controlLi.eq((_now+1) % $controlLi.length).mouseover();
		}
	});