// JavaScript Document
	$(function(){
		// 先取得 .pic 及原始的 ul 項目
		// 接著產生三組 div 並各自包一個 ul 項目
		// 再來取得一些額外的參數、小圖及大圖的名稱
		var $pic = $('.pic'),
			$source = $pic.children('ul').remove(),
			$leftUl = $('<div class="pic_left"><ul></ul></div>').children(),
			$rightUl = $('<div class="pic_right"><ul></ul></div>').children(),
			$mainUl = $('<div class="pic_main"><ul></ul></div>').children(),
			$sourceLi = $source.children(),
			_liStr = $source.html(),
			_itemLen = $sourceLi.length,
			_middle = Math.ceil(_itemLen / 2),
			_small = /small/ig,
			_big = 'big',
			_smallWidth = 150, _bigWidth = 360;
		
		// 幫左邊 ul 清單加入 li 項目
		$leftUl.append(getLiItem(_middle - 2 - 1, _itemLen) + _liStr);
		// 幫右邊 ul 清單加入 li 項目
		$rightUl.append(getLiItem(_middle, _itemLen) + _liStr + getLiItem(0, _itemLen - _middle));
		// 幫中間 ul 清單加入 li 項目
		$mainUl.append((getLiItem(_middle - 1, _itemLen) + _liStr).replace(_small, _big));
		// 把 ul 清單部份都加到 .pic 中
		$pic.append($leftUl.parent(), $rightUl.parent(), $mainUl.parent());
		// 加入遮罩 .mask
		$pic.append(
					'<div class="mask"></div>'
					);
		// 加入控制用的遮罩 ul
		$pic.append(
					$leftUl.parent().clone().addClass('fake'), 
					$rightUl.parent().clone().addClass('fake'), 
					$mainUl.parent().clone().addClass('fake')
					);
		// 隱藏控制用的遮罩 ul 中的圖片
		$pic.find(
				  '.fake img'
				  ).css(
				  'opacity', 0
				  );
		// 幫左右兩邊的 ul li a 加上 0.5 的透明度
		$rightUl.add($leftUl).find('li a').fadeTo(200, 0.5);

		// 幫控制用的右邊遮罩 ul li a 加上 click 事件
		// 當點擊到時往左移動項目
		$('.pic_right.fake').find('li a').click(function(){
			move(($(this).parent().index() + 1) % $rightUl.children().length);
			return false;
		});
		
		// 幫控制用的左邊遮罩 ul li a 加上 click 事件
		// 當點擊到時往右移動項目
		$('.pic_left.fake').find('li a').click(function(){
			var _index = $(this).parent().index();
			if(_index < 2){
				$leftUl.add($rightUl).add($('.pic_right.fake ul, .pic_left.fake ul')).css('left', _itemLen * _smallWidth * -1);
				$mainUl.add($('.pic_main.fake ul')).css('left', _itemLen * _bigWidth * -1);
				_index += _itemLen;
			}
			move((_index - 2) % $leftUl.children().length);
			return false;
		});
		
		// 幫控制用的左右兩邊遮罩的 ul li a 加上 hover 事件
		// 當滑鼠移到項目時就變成不透明；移出則再變成 0.5 的透明度
		$('.pic_right.fake, .pic_left.fake').find('li a').hover(function(){
			var $this = $(this);
			($this.parents('div').attr('className').indexOf('pic_right')>-1 ? $rightUl : $leftUl).children('li').eq($this.parent().index()).children().fadeTo(200, 1);
		}, function(){
			var $this = $(this);
			($this.parents('div').attr('className').indexOf('pic_right')>-1 ? $rightUl : $leftUl).children('li').eq($this.parent().index()).children().fadeTo(200, 0.5);
		});
		
		// 控制移動的函式
		function move(i){
			// 移動左右清單
			// 移動時變成不透明
			$leftUl.add($rightUl).add($('.pic_right.fake ul, .pic_left.fake  ul')).stop(false, true).animate({
				left: i * _smallWidth * -1
			}, changeLeft).find('li a').css('opacity', 1);;
			
			// 移動中間清單
			$mainUl.add($('.pic_main.fake ul')).stop(false, true).animate({
				left: i * _bigWidth * -1
			}, changeLeft);
		}
		
		// 當完成移動後的處理函式
		function changeLeft(){
			var $this = $(this),
				dis = $this.parent().attr('className').indexOf('pic_main')>-1 ? _bigWidth : _smallWidth,
				i = (parseInt($this.css('left'), 10) || 0) / dis * -1;
			
			// 處理左右清單的位移
			if(i >= _itemLen){
				$(this).css('left', dis * (i - _itemLen) * -1);
			}
			
			// 把左右清單的 li a 變成 0.5 的透明度
			if(dis==_smallWidth){
				$(this).find('li a').css('opacity', 0.5);
			}
		}
		
		// 組成 li 項目的函式
		function getLiItem(startIndex, endIndex){
			var rtvl = '';
			for(var i=startIndex;i<endIndex;i++){
				rtvl += '<li>' + $sourceLi.eq(i).html() + '</li>';
			}
			return rtvl;
		}

		$pic.find('a').focus(function(){this.blur();});
	});