var now_scene_num = 0;
var max_scene_num = 0;
var last_num = 0;
var focus_flg = true;

$(window).bind('load', function() {
	var $hInner = $('#hInner');
	var $gNav = $('#gNav');
	var $gNavLi = $gNav.find('> li');
	var $gNavAnchors = $gNav.find('> li > a');
	var $vLi = $('#visual li');
	var $vMessage = $("#vMessage");
	var $siteId = $('#siteId');

	var on_arr = [];
	var off_arr = [];
	
	$hInner.fadeTo(0,0);
	$('#vInner').fadeTo(1000,1);
	
	$gNavLi.each(function(i) {
		var $_src = $(this).find('img').attr('src');
		off_arr[i] = $_src;
		on_arr[i] = off_arr[i].substr(0, $_src.lastIndexOf('.')) + '_o' + $_src.substring($_src.lastIndexOf('.'));
	});
	
	
	$gNavAnchors.each(function(i) {
		$(this).html(
				'<span class="wap">'+
				'<span class="on"><img src="'+on_arr[i]+'"></span>' +
				'<span class="off"><img src="'+off_arr[i]+'"></span>' +
				'</span>'
				);
	})
	
	$gNavAnchors.find('.on').css({opacity: 0})
	$gNavAnchors.find('.off').css({opacity: 1});
	
	$gNavAnchors.hover(
		function(){
			$(this)
				.find('.on')
				.stop(true, false)
				.animate({opacity: 1},700,"easeOutSine");
		}, function(){
			$(this)
				.find('.on')
				.stop(true, false)
				.animate({opacity: 0},700, "easeOutSine");
		}
	);
	
	$gNavAnchors.click(
			function(){
				location.href = $(this).attr('href');
			});
	
	$("#header, #visual").css({'visibility':'hidden'});
	$vMessage.hide();
	$hInner.css("opacity","0");

	$vLi.each(function(){
		$(this).delay(0).fadeTo(0,0);
  	});
	
	max_scene_num = $vLi.length - 1;
	
	$("#header, #visual")
		.css({'visibility' : 'visible'})
		.fadeIn("slow");
	
	op_start();
	
	//op_start
	function op_start(){
		$gNavLi.css({
			'position' : 'absolute',
			'top' : '40px',
			'left' : 0,
			'opacity' : 0
		});
										
		$hInner.css("background-color","#ffffff");
		$hInner.delay(800).animate({opacity: 1},1450,"easeOutSine", function(){
									$hInner.animate({backgroundColor:'#cccccc'},800,"easeInCubic");
								});
		$siteId.css("opacity",1);
		$siteId.delay(100).animate(
							{opacity: 1},900,"easeOutSine",			
								function(){  
									for(var i =0;i < $gNavLi.length; i++){
										var _y = 71+i*74;
										$gNavLi
											.eq(i)
											.delay(i*300)
											.animate({opacity: 1},1200,"easeOutSine")						
										$gNavLi
											.eq(i)
											.animate({top: _y},{duration: 1200,queue: false},"easeOutSine")
									}
								}  
						)
		$vLi.eq(now_scene_num).fadeTo(1000,1,function(){timer_start();});
		$vMessage.delay(2000).fadeTo(1800,1);
		$(document).focus(function(){
							if(focus_flg == false){
								focus_flg = true;
								timer_start();
							}
						})
					.blur(function(){
							if(focus_flg == true){
								focus_flg = false;
							}
						})
	}
	//timer_start
	function timer_start(){
		if(focus_flg == true){
			$(this).oneTime(4000,function() {
				next();
			});
		}
	}
	//next
	function next(){
		timer_start();
		last_num = now_scene_num;
		if(now_scene_num != max_scene_num){
			now_scene_num++;
		}else{
			now_scene_num = 0;
		}
		img_change();
	};
	//img_change
	function img_change(){
		$vLi.eq(now_scene_num).delay(0).fadeTo(0,0);
		$vLi.eq(last_num).delay(0).fadeTo(1000,0);
		for(var i = 0; i < max_scene_num + 1; i++){
			if(i != last_num || i != now_scene_num){
				$vLi.eq(i).css("z-index", "0");
			}
		}
		$vLi.eq(now_scene_num).delay(10).fadeTo(1000,1);
		$vLi.eq(last_num).css("z-index", "1");
		$vLi.eq(now_scene_num).css("z-index", "2");
	}

});