var now_scene_num = 0;
var max_scene_num = 0;
var last_num = 0;
var index = 0;
var on_arr = [];
var off_arr = [];
var banner_on_arr = [];
var banner_off_arr = [];
var detail_check_arr = [];
$(function(){
	detail_check_arr = [0,0,1,1,2];
	max_scene_num = $("#top_slide_navi_area li").size();
	$('#top_slide_area').hover(
		function () {
			stop_time();
		},
		function () {
			timer_start();
		}
	);
	$('#top_slide_navi_area li').click(function () {
		index = $("#top_slide_navi_area li").index(this);
		now_scene_num = index;
		img_change();
	});
	$('#top_slide_navi_area li').each(function(i) {
		var $_src = $(this).find('img').attr('src');
		off_arr[i] = $_src;
		on_arr[i] = off_arr[i].substr(0, $_src.lastIndexOf('.')) + '_on' + $_src.substring($_src.lastIndexOf('.'));
		$(this).html(
				'<div class="wap">'+
				'<div class="on"><img src="'+on_arr[i]+'"></div>' +
				'<div class="off"><img src="'+off_arr[i]+'"></div>' +
				'</div>'
		);
		$(this).find('.on').css({opacity: 1});
	});
	$('#top_banner_area li').each(function(i) {
		var _link = $(this).find('a').attr('href');
		var $_src = $(this).find('img').attr('src');
		banner_off_arr[i] = $_src;
		banner_on_arr[i] = banner_off_arr[i].substr(0, $_src.lastIndexOf('.')) + '_on' + $_src.substring($_src.lastIndexOf('.'));
		$(this).html(
				'<a href="'+_link+'">'+'<div class="wap">'+
				'<div class="on"><img src="'+banner_on_arr[i]+'"></div>' +
				'<div class="off"><img src="'+banner_off_arr[i]+'"></div>' +
				'</div>'+'</a>'
		);
		$(this).click(function(){location.href = _link;});
		$(this).find('.on').css({opacity: 0});
	});
	$('#top_banner_area li').hover(
		function(){
			$(this)
				.find('.on')
				.stop(true, false)
				.animate({opacity: 1},300,"easeOutSine");
		}, function(){
			$(this)
				.find('.on')
				.stop(true, false)
				.animate({opacity: 0},300, "easeOutSine");
		}
	);
	$('#top_slide_area').append("<div id = detail_btn_area>");
	$('#top_slide_img_area a').each(function(i) {
		$('#detail_btn_area').append(
			'<div class="detail_btn"><div class="wap">'+
				'<div class="on"><img src="images/trans.gif" width="104" height="37" /></div>' +
				'<div class="off"><img src="images/trans.gif" width="104" height="27" /></div>' +
				'</div></div>'
		);
		var _index = $('#top_slide_img_area a').index(this);
		switch(_index){
				case 0:
					$('.detail_btn').eq(_index).css("left","280px");		
				break;
			
				case 1:
					$('.detail_btn').eq(_index).css("left","669px");	
				break;
				
				case 2:
					$('.detail_btn').eq(_index).css("left","280px");	
				break;
				
				case 3:
					$('.detail_btn').eq(_index).css("left","669px");	
				break;
				
				case 4:
					$('.detail_btn').eq(_index).css("left","669px");	
				break;
			}
		$('.detail_btn').eq(_index).click(function(){
			location.href = $('#top_slide_img_area a').eq(_index).attr('href');
		});
		$('.detail_btn').eq(_index).hover(
		
			function(){
				detail_btn_up(_index);
			},
			function(){
				detail_btn_down(_index);
			}
		);
		$(this).children().hover(
			function () {
				detail_btn_up(_index);
			},
			function () {
				detail_btn_down(_index);
			})
		});
		$('.detail_btn').css("top","197px")
	$('.detail_btn .on').css("background-image","url("+"./images/detail_btn_on.png"+")")
						.css({opacity: 0})
						.css({top: -3});	
	$('.detail_btn .off').css("background-image","url("+"./images/detail_btn.png"+")")
						.css({opacity: 1})
						.css({top: 0});
	$(".detail_btn .off").fixPng();
	$(".detail_btn .on").fixPng();
});
$(window).load(function(){
	timer_start();
	img_change();
});
function img_change(){
	$('#top_slide_img_area li').css("z-index",30);
	$('#top_slide_img_area li').eq(now_scene_num).css("z-index",31);
	$('#top_slide_navi_area li')
				.find('.on')
				.stop(true, false)
				.animate({opacity: 0},300,"easeOutSine");
	$('#top_slide_navi_area li').eq(now_scene_num)
				.find('.on')
				.stop(true, false)
				.animate({opacity: 1},300,"easeOutSine");
	$('#top_slide_img_area li').stop(true, false).fadeTo(600,0);
	$('#top_slide_img_area li').eq(now_scene_num).stop(true, false).fadeTo(600,1);
	$('.detail_btn').css("z-index",32);
	for(var i=0;i<detail_check_arr.length;i++){
		if(detail_check_arr[i]==now_scene_num){
			$('.detail_btn .on').eq(i).stop(true, false).fadeTo(600,0);
			$('.detail_btn .off').eq(i).stop(true, false).fadeTo(600,1);
			$('.detail_btn').eq(i).css("z-index",33);
		}else{
			$('.detail_btn .on').eq(i).stop(true, false).fadeTo(600,0,function(){$(this).hide();});
			$('.detail_btn .off').eq(i).stop(true, false).fadeTo(600,0,function(){$(this).hide();});
			$('.detail_btn').eq(i).css("z-index",0);
		}
	}
}
function detail_btn_up(_index){
	if(now_scene_num == detail_check_arr[_index]){
	$('.detail_btn').eq(_index)
		.find('.off')
		.stop(true, false)
		.animate(
			{
				top:-1
			},
			{
				duration:140,
				easing:"easeOutSine",
				queue: false
			}
		)
		.animate(
			{
				opacity:0
			},
			{
				duration:600,
				easing:"easeOutSine",
				queue: false
			}
	);
	$('.detail_btn').eq(_index)
		.find('.on')
		.stop(true, false)
		.animate(
			{
				top:-10
			},
			{
				duration:250,
				easing:"easeOutSine",
				queue: false
			}
		)
		.animate(
			{
				opacity:1
			},
			{
				duration:260,
				easing:"easeOutSine",
				queue:false
			}
		);
	}
}
function detail_btn_down(_index){
	$('.detail_btn').eq(_index)
		.find('.off')
		.delay(800)
		.stop(true, false)
		.animate(
			{
				top:0
			},
			{
				duration:260,
				easing:"easeOutSine",
				queue: false
			}
		)
		.animate(
			{
				opacity:1
			},
			{
				duration:200,
				easing:"easeOutSine",
				queue: false
			}
		);
	$('.detail_btn').eq(_index)
		.find('.on')
		.delay(800)
		.stop(true, false)
		.animate(
			{
				top:-3
			},
			{
				duration:220,
				easing:"easeOutSine",
				queue: false
			}
		)
		.animate(
			{
				opacity:0
				//opacity:1
			},
			{
				duration:240,
				easing:"easeOutSine",
				queue:false
			}
		);
}
function timer_start(){
	$(this).oneTime(4000,function() {
		next();
	});
}
function stop_time(){
	$(this).stopTime();
}
function next(){
	timer_start();
	last_num = now_scene_num;
	if(now_scene_num != max_scene_num-1){
		now_scene_num++;
	}else{
		now_scene_num = 0;
	}
	img_change();
};