$(function(){
		$('.showBox').each(function(){
			// 先取得必要的元素並用 jQuery 包裝
			// 再來取的 .showBox 的寬及設定移動速度
			var $showBox = $(this),
				$itemList = $showBox.find('ul.itemList'),
				$items = $itemList.find('li'),
				$adContent = $items.find('.adContent'),
				_margin = (parseInt($adContent.css('margin-left')) || 0) + (parseInt($adContent.css('margin-right')) || 0),
				width = $showBox.width() + _margin,
				speed = 400,
				$title = $showBox.find('h2.title');

			$title.html($items.eq(0).attr('title'));

			// 針對 IE 6-7 瀏覽器
			// 減回 $adContent 的 margin-left 及 margin_right
			if($.browser.msie && !($.browser.msie && /msie 8\.0/i.test(window.navigator.userAgent.toLowerCase()))){
				width -= _margin;
			}
				
			// 產生小圓點
			var rollStr = '';
			$items.each(function(i, ele){
				rollStr += '<a href="#">'+i+'</a>\r\n';
			});

			// 加入小圓點並加上 click 事件
			$showBox.find('.roll').html(rollStr).find('a').click(function(){
				move($(this).index());
			}).eq(0).addClass('on');
				
			// 當點擊左右鈕時
			$showBox.find('.prev, .next').click(function(){
				// 找出目前是顯示那一組
				var no = $showBox.find('.roll a.on').index();
				// 判斷接下來要移往那一組
				no = ($(this).attr('className').indexOf('prev')>-1 ? (no - 1 + $items.length) : (no + 1))  % $items.length;
				// 進行移動
				move(no);

				return false;
			});
				
			// 控制移動的函式
			function move(no){
				$itemList.stop().animate({
					left: width * no * -1
				}, speed);
				$showBox.find('.roll a').eq(no).addClass('on').siblings().removeClass('on');
				$title.html($items.eq(no).attr('title'));
			}
		});
		
		$('a').focus(function(){
			this.blur();
		});
	});