// JavaScript Document
	







//topnews

$(function(){
	// 設定每隔 N 秒切換下一張
	// 及淡出淡入的速度
	var timer, speed = 5000, 
		$myImages = $('.list li');
	
	// 先隱藏 $myImages
	$myImages.hide();
	
	// 在 .link 中加入一個 ul
	$('.link').append('<ul />');
	for(var i=0;i<$myImages.length;i++){
		// 依 $myImages 中的數量來產生相對數量的 li
		$('.link ul').append('<li>' + (i+1) + '</li>');
	}
	
	// 當 .link ul li 被點擊的時候
	$('.link ul li').click(function(){
		// 取得目前點擊的序號
		var $this = $(this), 
			idx = $this.index();
		
		// 取得待顯示的 $myImages 子元素
		var $link = $myImages.eq(idx);
		
		// 把 $link 中 img 的 alt 顯示在 .info 上
		$('.info').html($link.find('img').attr('alt'));
		
		// 顯示
		$link.show().siblings(':visible').hide();
		
		// 讓 li 加上 on 的樣式
		$this.addClass('on').siblings('.on').removeClass('on');
	});
	
	// 當滑鼠移入到 #play 時
	$('#topnews').hover(function(){
		// 停止計時器
		clearTimeout(timer)
	}, function(){
		// 移出時則啟動計時器
		timer = setTimeout(autoShow, speed);
	});
	
	// 控制輪播用
	function autoShow(){
		// 找出目前那一個有 .on
		var ind = $('.on').index();
		// 依序下一位
		ind = (ind + 1) % $myImages.length;
		
		// 點擊下一位
		$('.link ul li').eq(ind).click();
		timer = setTimeout(autoShow, speed);
	}
	
	// 先讓 .bg 及 .link ul 加上透明度
	$('.bg').css('opacity', 0.3);
	$('.link ul').css('opacity', 0.8);

	autoShow();
});


//images

	$(function(){
		// 先取得必要的元素並用 jQuery 包裝
		// 再來取得 $block 的高度及設定動畫時間
		var $block = $('.images'),
			$slides = $block.find('ul.imagesulli'),
			_width = $block.width(),
			$li = $slides.find('li'),
			$control = $block.find('#image-con'), 
			_animateSpeed = 600, 
			// 加入計時器, 輪播時間及控制開關
			timer, _showSpeed = 5000, _stop = false;
		
		// 設定 $slides 的寬(為了不讓 li 往下擠)
		$slides.css('width', ($li.length + 1) * _width);
		
		
		// 產生 li 選項
		var _str = '';
		for(var i=0, j=$li.length;i<j;i++){
			// 每一個 li 都有自己的 className = playerControl_號碼
			_str += '<li class="imagesul-control_' + (i+1) + '">' + (i+1) + '</li>';
		}

		// 產生 ul 並把 li 選項加到其中
		var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control), 
			$numberLi = $number.find('li');

		// 並幫 .numbers li 加上 click 事件
	
		
		$numberLi.mouseover(function(){
			var $this = $(this);
			$this.addClass('current').siblings('.current').removeClass('current');
			

			clearTimeout(timer);
			// 移動位置到相對應的號碼
			$slides.stop().animate({
				left: _width * $this.index() * -1
			}, _animateSpeed, function(){
				// 當廣告移動到正確位置後, 依判斷來啟動計時器
				if(!_stop) timer = setTimeout(move, _showSpeed);
			});
			
			return false;
		}).eq(0).mouseover();
		
		// 幫 .arrows li 加上 click 事件
		$control.find('ul.arrows li').mouseover(function(){
			var _index = $numberLi.filter('.current').index();
			$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).mouseover();

			return false;
		});
		
		// 當滑鼠移到 $control li 上時, 加上 .hover 效果
		// 反之則移除
		$control.find('li').hover(function(){
			$(this).addClass('current').siblings('.current');
		}, function(){
			$(this).removeClass('current');
		});

		// 如果滑鼠移入 $slides 時
		$slides.hover(function(){
			// 關閉開關及計時器
			_stop = true;
			clearTimeout(timer);
		}, function(){
			// 如果滑鼠移出 $block 時
			// 開啟開關及計時器
			_stop = false;
			timer = setTimeout(move, _showSpeed);
		});
		
		// 計時器使用
		
		function move(){
			var _index = $numberLi.removeClass('hover').index();
			$control.find('ul.arrows li.next').mouseover();
		}
		
		
	});	
	






//floor news

$(function(){
		// 先取得必要的元素並用 jQuery 包裝
		// 再來取得 $floorblock 的高度及設定動畫時間
		var $floorblock = $('#abgne-block-20110317'),
			$floorslides = $floorblock.find('ul.abgne-list'),
			_floorwidth = $floorblock.width(),
			$floorli = $floorslides.find('li'),
			$floorcontrol = $floorblock.find('.abgne-control'), 
			_animateSpeed = 1000, 
			// 加入計時器, 輪播時間及控制開關
			timer, _showSpeed = 3000, _stop = false;
		
		// 設定 $floorslides 的寬(為了不讓 li 往下擠)
		$floorslides.css('width', ($floorli.length + 1) * _floorwidth);
		// 產生 li 選項
		var _str = '';
		for(var i=0, j=$floorli.length;i<j;i++){
			// 每一個 li 都有自己的 className = playerControl_號碼
			_str += '<li class="abgne-player-control_' + (i+1) + '">' + (i+1) + '</li>';
		}

		// 產生 ul 並把 li 選項加到其中
		var $floornumber = $('<ul class="floornumbers"></ul>').html(_str).appendTo($floorcontrol), 
			$floornumberLi = $floornumber.find('li');

		// 並幫 .numbers li 加上 click 事件
		$floornumberLi.click(function(){
			var $this = $(this);
			$this.addClass('onon').siblings('.onon').removeClass('onon');

			clearTimeout(timer);
			// 移動位置到相對應的號碼
			$floorslides.stop().animate({
				left: _floorwidth * $this.index() * -1
			}, _animateSpeed, function(){
				// 當廣告移動到正確位置後, 依判斷來啟動計時器
				if(!_stop) timer = setTimeout(move, _showSpeed);
			});
			
			return false;
		}).eq(0).click();
		
		// 幫 .arrows li 加上 click 事件
		$floorcontrol.find('ul.floorarrows li').click(function(){
			var _index = $floornumberLi.filter('.onon').index();
			$floornumberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$floornumberLi.length)%$floornumberLi.length).click();

			return false;
		});
		
		// 當滑鼠移到 $floorcontrol li 上時, 加上 .hover 效果
		// 反之則移除
		$floorcontrol.find('li').hover(function(){
			$(this).addClass('offoff');
		}, function(){
			$(this).removeClass('offoff');
		});

		// 如果滑鼠移入 $floorslides 時
		$floorslides.hover(function(){
			// 關閉開關及計時器
			_stop = true;
			clearTimeout(timer);
		}, function(){
			// 如果滑鼠移出 $floorblock 時
			// 開啟開關及計時器
			_stop = false;
			timer = setTimeout(move, _showSpeed);
		});
			// 計時器使用
		function move(){
			$control.find('ul.arrows li.next').click();
		}
	});


// TOP UL LI

	$(function(){
	$('ul#dropdown li ul').hide();
	$("#dropdown>li").hover(function(){
		var _this = $(this);
		var _menu = _this.find("ul");
		var _y = _this.height();

		_menu.css({
			left: 0,
			top: _y
		}).stop(false, true).slideDown(400);
	}, function(){
		$(this).find("ul").stop(false, true).slideUp(200);
	}).click(function(evt){
		return $(evt.target).parents("ul").attr("className")!="dropdown";
	});
});