var pmv = document.getElementById('PAGE_MAINVISUAL_WRAPPER');
	pmv.style.display = 'none';
	pmv.removeChild(pmv.getElementsByTagName('h1')[0]);

var loading = document.createElement('img');
	loading.src = "images/cmn_icon_loading.gif";
	loading.className = "loading";
	document.getElementById('PAGE_MAINVISUAL').appendChild(loading);

$(function(){
	$('#PAGE_MAINVISUAL_TOP').fixPng();

	var mvIndex = 0;
	var timer;
	var imgs = {
		'images/index_bg_mv_part1.jpg':{ part:1, type:'mv' },
		'images/index_bg_mv_part2.jpg':{ part:2, type:'mv' },
		'images/index_bg_mv_part3.jpg':{ part:3, type:'mv' },
		'images/index_bg_mv_part4.jpg':{ part:4, type:'mv' },
		'images/index_cat_mv_part1_01.png':{ part:1, type:'cat1', posX:535, posY:36  },
		'images/index_cat_mv_part1_02.png':{ part:1, type:'cat2', posX:508, posY:186 },
		'images/index_cat_mv_part2_01.png':{ part:2, type:'cat1', posX:202, posY:80  },
		'images/index_cat_mv_part2_02.png':{ part:2, type:'cat2', posX:250, posY:227 },
		'images/index_cat_mv_part3_01.png':{ part:3, type:'cat1', posX:8,   posY:41  },
		'images/index_cat_mv_part3_02.png':{ part:3, type:'cat2', posX:68,  posY:145 }
	};
	var $mvPart = {
		1:$('<h1 class="mainVisual"></h1>'),
		2:$('<h1 class="mainVisual"></h1>'),
		3:$('<h1 class="mainVisual"></h1>'),
		4:$('<h1 class="mainVisual"></h1>')
	};
	$(pmv).append($mvPart[1],$mvPart[2],$mvPart[3],$mvPart[4]);

	var mvBtnOff = "images/index_btn_mv.png";
	var mvBtnOn  = "images/index_btn_mv_here.png";
	var $mvBtn = {
		1:$('<img />').attr({src:mvBtnOff}),
		2:$('<img />').attr({src:mvBtnOff}),
		3:$('<img />').attr({src:mvBtnOff}),
		4:$('<img />').attr({src:mvBtnOff})
	};

	$swt = $('<div class="switch"></div>');
	$swt.append($mvBtn[1],$mvBtn[2],$mvBtn[3],$mvBtn[4]);
	for(var key in imgs){
		switch(imgs[key].type){
			case 'mv':
				$.imgpreload(key,function(){
					var key = $(this).attr('src');
					$(this).addClass(imgs[key].type).css({opacity:0});
					$mvPart[imgs[key].part].append(this);
					$mvPart[imgs[key].part][imgs[key].type] = $(this);
					imgs[key].loaded = $(this).data('loaded');
				});
				break;
			case 'cat1':
			case 'cat2':
				$.imgpreload(key,function(){
					var key = $(this).attr('src');
					$(this).addClass(imgs[key].type).css({opacity:0, left:imgs[key].posX, top:imgs[key].posY});
					$mvPart[imgs[key].part].append(this);
					$(this).fixPng();
					$mvPart[imgs[key].part][imgs[key].type] = $(this);
					imgs[key].loaded = $(this).data('loaded');
				});
				break;
		}
	}
	loaded_start = function(){
		var cnt = 0;
		var flag = 0;
		for(var key in imgs){ cnt++; }
		for(var key in imgs){
			if(imgs[key].loaded) flag++;
		}
		if(cnt == flag){
			clearTimeout(sTimer);
			$(pmv).append($swt).css({display:'block'});
			$('#PAGE_MAINVISUAL img.loading').remove();
			$mvPart[1].mv.fadeIn();
			start_part1();
		}
	}
	sTimer = setInterval(loaded_start, 500);

	//MainVisual Animation
	start_part1 = function(){
		clearTimeout(timer);
		$mvBtn[1].siblings().attr('src',mvBtnOff).end().attr('src',mvBtnOn);
		$mvPart[4].mv.stop().animate({opacity:0},200);
		$mvPart[1].css({zIndex:++mvIndex});
		$mvPart[1].mv
			.css({marginLeft:-50, opacity:0})
			.stop(true)
			.animate({ marginLeft:-150, opacity:1}, 1500,"easeOutCubic")
			.delay(1000)
			.animate({ marginLeft:-200, opacity:0}, 1500,"easeInCubic");
		$mvPart[1].cat1
			.css({left:imgs[$mvPart[1].cat1.attr('src')].posX-50, opacity:0})
			.stop(true)
			.delay(300)
			.animate({left:imgs[$mvPart[1].cat1.attr('src')].posX, opacity:1}, 1200,"easeOutCubic")
			.delay(1000)
			.animate({ opacity:0}, 1500,"easeInCubic");
		$mvPart[1].cat2
			.css({left:imgs[$mvPart[1].cat2.attr('src')].posX-50, opacity:0})
			.stop(true)
			.delay(500)
			.animate({left:imgs[$mvPart[1].cat2.attr('src')].posX, opacity:1}, 1000,"easeOutCubic")
			.delay(1000)
			.animate({ opacity:0}, 1500,"easeInCubic");
		timer = setTimeout(start_part2,3700);
	};
	start_part2 = function(){
		clearTimeout(timer);
		$mvBtn[2].siblings().attr('src',mvBtnOff).end().attr('src',mvBtnOn);
		$mvPart[4].mv.stop().animate({opacity:0},200);
		$mvPart[2].css({zIndex:++mvIndex});
		$mvPart[2].mv
			.css({marginTop:-100, opacity:0})
			.stop(true)
			.animate({ marginTop:-50, opacity:1}, 1500,"easeOutCubic")
			.delay(1000)
			.animate({ marginTop:0, opacity:0}, 1500,"easeInCubic");
		$mvPart[2].cat1
			.css({left:imgs[$mvPart[2].cat1.attr('src')].posX+50, top:imgs[$mvPart[2].cat1.attr('src')].posY, opacity:0})
			.stop(true)
			.delay(300)
			.animate({left:imgs[$mvPart[2].cat1.attr('src')].posX, opacity:1}, 1200,"easeOutCubic")
			.delay(1000)
			.animate({ opacity:0}, 1500,"easeInCubic");
		$mvPart[2].cat2
			.css({left:imgs[$mvPart[2].cat2.attr('src')].posX+50, top:imgs[$mvPart[2].cat2.attr('src')].posY, opacity:0})
			.stop(true)
			.delay(500)
			.animate({left:imgs[$mvPart[2].cat2.attr('src')].posX, opacity:1}, 1000,"easeOutCubic")
			.delay(1000)
			.animate({ opacity:0}, 1500,"easeInCubic");
		timer = setTimeout(start_part3,3700);
	};
	start_part3 = function(){
		clearTimeout(timer);
		$mvBtn[3].siblings().attr('src',mvBtnOff).end().attr('src',mvBtnOn);
		$mvPart[4].mv.stop().animate({opacity:0},200);
		$mvPart[3].css({zIndex:++mvIndex});
		$mvPart[3].mv
			.css({marginLeft:-250, opacity:0})
			.stop(true)
			.animate({ marginLeft:-150, opacity:1}, 1500,"easeOutCubic")
			.delay(1000)
			.animate({ marginLeft:-100, opacity:0}, 1500,"easeInCubic");
		$mvPart[3].cat1
			.css({left:imgs[$mvPart[3].cat1.attr('src')].posX+50, opacity:0})
			.stop(true)
			.delay(300)
			.animate({left:imgs[$mvPart[3].cat1.attr('src')].posX, opacity:1}, 1200,"easeOutCubic")
			.delay(1000)
			.animate({ opacity:0}, 1500,"easeInCubic");
		$mvPart[3].cat2
			.css({left:imgs[$mvPart[3].cat2.attr('src')].posX+50, opacity:0})
			.stop(true)
			.delay(500)
			.animate({left:imgs[$mvPart[3].cat2.attr('src')].posX, opacity:1}, 1000,"easeOutCubic")
			.delay(1000)
			.animate({ opacity:0}, 1500,"easeInCubic");
		timer = setTimeout(start_part4,3200);
	};
	start_part4 = function(){
		clearTimeout(timer);
		$mvBtn[4].siblings().attr('src',mvBtnOff).end().attr('src',mvBtnOn);
		$mvPart[4].css({zIndex:++mvIndex});
		$mvPart[4].mv
			.css({opacity:0})
			.stop(true)
			.animate({opacity:1}, 1500,"easeInCubic");
	};
	$mvBtn[1].click(start_part1);
	$mvBtn[2].click(start_part2);
	$mvBtn[3].click(start_part3);
	$mvBtn[4].click(start_part4);
});