// JavaScript Document
$(function(){
		// 先取得 .products ul 及 li 的高度
		// 並設定訊息移動, 淡入及輪播時間
		var $news = $('.products ul'), 
			scrollHeight = $news.find('li').outerHeight(true), 
			scrollSpeed = 400, fadeInSpeed = 400, 
			timer, speed = 3000;
		
		// 用來控制輪播用
		function newsScroll(){
			// 先把 .products ul 往下移
			$news.animate({
				top: scrollHeight + 'px'
			}, scrollSpeed, function(){
				// 當 .products ul 移動到定點後
				// 先找出最後一個 li
				var $last = $news.find('li:last');
				// 複製一份並先隱藏起來
				// 接著把它加到 .products ul 中的第一個項目
				// 最後用淡入的方式顯示, 當顯示完後繼續輪播
				$last.clone().hide().prependTo($news).fadeIn(fadeInSpeed, function(){
					timer = setTimeout(newsScroll, speed);
				});
				// 馬上把 .products ul 移到 top 等於 0 的位置
				$news.css('top', 0);
				// 把 $last 移除掉
				$last.remove();
			});
		}
		
		// 啟動輪播計時器
		timer = setTimeout(newsScroll, speed);
	});