// JavaScript Document
var FADESEC = 1500;
var ENDSEC = 1000;
var SCROLLSEC = 6600;
var DROPSEC = 1000;

var SEC_IN = [1, 20, 40, 100, 150, 170, 200, 220, 250, 280, 300, 330, 400, 420, 430, 440, 450, 490];
var SEC_OUT = [40, 60, 70, 170, 210, 270, 320, 380, 470, 520];

var TEXT_POS = ["C,C", "50,150", "50,220", "50, 250", "50,280", "50,310", "C,C"];
var PHOTO_POS = ["C,C", "C,C", "L,T", "R,B", "R,T", "L,B", "L,T", "R,B", "R,T", "L,B", "L,T", "R,B", "M,B", "C,B"];
var LOGO_POS = ["C,M", "C,C"];

var counter = 0;
var basePos;

$(document).ready(function(){
	addContent();
	//resetAll();
});

$(window).load(function () {
	resetAll();
	$.timer(100, function(timer){
		if (!timer.done) {
			timer.done = true;
			$(window).unload(function () { timer.stop(); });
		}
		setAnimation();
	});
	$(window).unload(function(){ resetAll();});
});



function resetAll(){
	$(".text").css({ "position": "absolute", "visibility": "hidden", "z-index": 100 });
	$(".photo").css({ "position": "absolute", "visibility": "hidden", "z-index": 50 });
	$(".logo").css({ "position": "absolute", "visibility": "hidden" });
	
	$(".text").animate(
		{ opacity: 0 },
		{ duration: 0 }
	);
	$(".photo").animate(
		{ opacity: 0 },
		{ duration: 0 }
	);
	
	counter = 0;
}

function addContent(){
	$("#flash_main").html('<p id="skip_button"><a href="./eng"><img src="./common/images/skip.png" width="62" height="45" alt="skip" /></a></p>');
	
	var text01 = $('<p id="text01" class="text">').append('Close to the City,Far from the Crowds');
	var text02 = $('<p id="text02" class="text">').append('Kobe has long had a special charm for foreigners due to its<br /> wonderful location and special people');
	var text03 = $('<p id="text03" class="text">').append('Kobe - a beautiful port town overlooking the peaceful Inland Sea is nestled against the verdant Rokko Mountain range.');
	var text04 = $('<p id="text04" class="text">').append('A forward-looking and sophisticated international city, Kobe has always captured the imagination of people from other countries.');
	var text05 = $('<p id="text05" class="text">').append('Those who cherish Kobe have lovingly handed down its culture and its elegance for the sake of future generations.');
	var text06 = $('<p id="text06" class="text">').append('When you stroll through the town, you can sense this deep appreciation for the past and its special culture wherever you go.');
	var text07 = $('<p id="text07" class="text">').append('Looking for Better Lifestyle?');
	
	var photo01 = $('<p id="photo01" class="photo">').append('<img src="./common/images/img_001.jpg" width="960" height="200" alt="" />');
	var photo02 = $('<p id="photo02" class="photo">').append('<img src="./common/images/img_002.jpg" width="960" height="200" alt="" />');
	
	var photo03_c1 = $('<p id="photo03_01" class="photo">').append('<img src="./common/images/img_003.jpg" width="600" height="245" alt="" />');
	var photo03_c2 = $('<p id="photo03_02" class="photo">').append('<img src="./common/images/img_004.jpg" width="370" height="120" alt="" />');
	var photo03 = $('<div id="photo03">').append(photo03_c1).append(photo03_c2);
	
	var photo04_c1 = $('<p id="photo04_01" class="photo">').append('<img src="./common/images/img_005.jpg" width="259" height="191" alt="" />');
	var photo04_c2 = $('<p id="photo04_02" class="photo">').append('<img src="./common/images/img_006.jpg" width="313" height="127" alt="" />');
	var photo04 = $('<div id="photo04">').append(photo04_c1).append(photo04_c2);
	

	var photo05_c1 = $('<p id="photo05_01" class="photo">').append('<img src="./common/images/img_007.jpg" width="276" height="143" alt="" />');
	var photo05_c2 = $('<p id="photo05_02" class="photo">').append('<img src="./common/images/img_008.jpg" width="793" height="115" alt="" />');	
	var photo05 = $('<div id="photo05">').append(photo05_c1).append(photo05_c2);
	
	var photo06_c1 = $('<p id="photo06_01" class="photo">').append('<img src="./common/images/img_009.jpg" width="384" height="206" alt="" />');
	var photo06_c2 = $('<p id="photo06_02" class="photo">').append('<img src="./common/images/img_010.jpg" width="286" height="159" alt="" />');	
	var photo06 = $('<div id="photo06">').append(photo06_c1).append(photo06_c2);
	
	var photo07_c1 = $('<p id="photo07_01" class="photo">').append('<img src="./common/images/img_011.jpg" width="262" height="97" alt="" />');
	var photo07_c2 = $('<p id="photo07_02" class="photo">').append('<img src="./common/images/img_012.jpg" width="465" height="146" alt="" />');	
	var photo07 = $('<div id="photo07">').append(photo07_c1).append(photo07_c2);
	
	var photo08 = $('<div id="photo08" class="photo">').append('<img src="./common/images/img_013.jpg" width="960" height="175" alt="" />');
	var mask = $('<p id="mask">').append('<img src="./common/images/mask.png" width="1210" height="174" alt="" />');
	
	var logo01 = $('<p id="logo01" class="logo">').append('<img src="./common/images/logo_text.gif" width="231" height="38" alt="" />');
	var logo02 = $('<p id="logo02" class="logo">').append('<img src="./common/images/logo_mount.gif" width="159" height="41" alt="" />');
	var logo03 = $('<p id="logo03" class="logo">').append('<img src="./common/images/logo_house_01.gif" width="32" height="43" alt="" />');
	var logo04 = $('<p id="logo04" class="logo">').append('<img src="./common/images/logo_house_02.gif" width="27" height="39" alt="" />');
	var logo05 = $('<p id="logo05" class="logo">').append('<img src="./common/images/logo_house_03.gif" width="27" height="40" alt="" />');
	
	$("#flash_main").append(text01);
	$("#flash_main").append(text02);
	$("#flash_main").append(text03);
	$("#flash_main").append(text04);
	$("#flash_main").append(text05);
	$("#flash_main").append(text06);
	$("#flash_main").append(text07);
	$("#flash_main").append(photo01);
	$("#flash_main").append(photo02);
	$("#flash_main").append(photo03);
	$("#flash_main").append(photo04);
	$("#flash_main").append(photo05);
	$("#flash_main").append(photo06);
	$("#flash_main").append(photo07);
	$("#flash_main").append(photo08);
	$("#flash_main").append(mask);
	$("#flash_main").append(logo01);
	$("#flash_main").append(logo02);
	$("#flash_main").append(logo03);
	$("#flash_main").append(logo04);
	$("#flash_main").append(logo05);
		
	if(navigator.appName == "Microsoft Internet Explorer"){
		document.getElementById("mask").childNodes[0].src = "./common/images/mask.gif";
		document.getElementById("skip_button").childNodes[0].childNodes[0].src = "./common/images/skip.gif";
	}
}


function setAnimation(){
	counter ++;
	
	// fadeIn
	switch(counter){
		case SEC_IN[0]: // 1
			setTarget("#text01", TEXT_POS[0]);
			break;
			
		case SEC_IN[1]: // 20
			setTarget("#photo01", PHOTO_POS[0]);
			break;
			
		case SEC_IN[2]: // 40
			setTarget("#photo02", PHOTO_POS[1]);
			break;
			
		case SEC_IN[3]: // 100
			setTarget("#text02", TEXT_POS[1]);
			setTarget("#photo03_01", PHOTO_POS[2]);
			setTarget("#photo03_02", PHOTO_POS[3]);
			break;
			
		case SEC_IN[4]: // 150
			setTarget("#text03", TEXT_POS[2]);
			break;
			
		case SEC_IN[5]: // 170
			setTarget("#photo04_01", PHOTO_POS[4]);
			setTarget("#photo04_02", PHOTO_POS[5]);
			break;
			
		case SEC_IN[6]: // 200
			setTarget("#text04", TEXT_POS[3]);
			break;
			
		case SEC_IN[7]: // 220
			setTarget("#photo05_01", PHOTO_POS[6]);
			setTarget("#photo05_02", PHOTO_POS[7]);
			break;
			
		case SEC_IN[8]: // 250
			setTarget("#text05", TEXT_POS[4]);
			break;
			
		case SEC_IN[9]: // 280
			setTarget("#photo06_01", PHOTO_POS[8]);
			setTarget("#photo06_02", PHOTO_POS[9]);
			break;
			
		case SEC_IN[10]: // 300
			setTarget("#text06", TEXT_POS[5]);
			break;
			
		case SEC_IN[11]: // 320
			setTarget("#photo07_01", PHOTO_POS[10]);
			setTarget("#photo07_02", PHOTO_POS[11]);
			break;
			
		case SEC_IN[12]: // 400
			setMask("#mask", PHOTO_POS[12]);
			setTarget("#photo08", PHOTO_POS[13]);
			setLogo("#logo01");
			break;
			
		case SEC_IN[13]: // 420
			setLogo("#logo02");
			break;
			
		case SEC_IN[14]:
			setLogo("#logo03");
			break;
			
		case SEC_IN[15]:
			setLogo("#logo04");
			break;
			
		case SEC_IN[16]:
			setLogo("#logo05");
			break;
			
		case SEC_IN[17]:
			setTarget("#text07", TEXT_POS[6]);
			break;
	}
	
	
	// fadeOutvar SEC_OUT = [40, 60, 70, 170, 210, 270, 310, 380, 470, 520];
	switch(counter){
		case SEC_OUT[0]: // 40
			fadeOut("#text01");
			break;
			
		case SEC_OUT[1]: // 60
			fadeOut("#photo02");
			break;
			
		case SEC_OUT[2]: // 70
			fadeOut("#photo01");
			break;
			
		case SEC_OUT[3]: // 170
			fadeOut("#photo03_01");
			fadeOut("#photo03_02");
			break;
			
		case SEC_OUT[4]: // 210
			fadeOut("#photo04_01");
			fadeOut("#photo04_02");
			break;
			
		case SEC_OUT[5]: // 270
			fadeOut("#photo05_01");
			fadeOut("#photo05_02");
			break;
			
		case SEC_OUT[6]: // 310
			fadeOut("#photo06_01");
			fadeOut("#photo06_02");
			break;
			
		case SEC_OUT[7]: // 380
			fadeOut(".text");
			fadeOut("#photo07_01");
			fadeOut("#photo07_02");
			break;
			
		case SEC_OUT[8]: // 470
			fadeOut(".logo");
			fadeOut("#photo_08");
			break;
			
		case SEC_OUT[9]:
			location.href = "./eng/";
			break;
	}
}


function setTarget(target, pos){
	setPos(target, pos);
	fadeIn(target);
}

function setMask(target, pos){
	setTarget(target, pos);
	$(target).animate(
		{ width: "1210px" },
		{ queue: false, duration: SCROLLSEC }
	);
}


jQuery.extend(jQuery.easing,{
	boundEasing: function(x, time, basePos, change, length) {
		if ((time /= length) < (1 / 2.75)) {
			return ((8 * time * time ) * change + basePos);
		} else if (time < (2/2.75)) {
			time -= 1.5 / 2.75;
			return (7.5 * time * time * change + .75  + basePos);
		} else if (time < (2.5 / 2.75)) {
			time -= 2.25 / 2.75;
			return (7.5 * time * time * change + .93 + basePos);
		} else {
			time -= 2.7 / 2.75;
			return (7.5 * time * time * change + .98 + basePos);
		}
	}
});


function setLogo(target){
	switch(target){
			case "#logo01":
				setPos(target, LOGO_POS[0]);
				$(target).animate(
					{ top: ($(".index_js").height() - $(target).height())/2 },
					{ duration: DROPSEC, easing: "boundEasing" }
				);
				break;
				
			case "#logo02":
				basePos = [ parseInt($("#logo01").css("left").match(/[^a-z]*/)), parseInt($("#logo01").css("top").match(/[^a-z]*/)) ];
				
				setPos(target, LOGO_POS[1]);
				$(target).animate(
					{ top: basePos[1] - $(target).height() },
					{ duration: "normal" }
				);
				break;
				
			case "#logo03":
				setPos(target, (basePos[0]+64) + ",M");
				$(target).animate(
					{ top: basePos[1] - $(target).height() - 15 },
					{}
				);
				break;
				
			case "#logo04":
				setPos(target, (basePos[0]+98) + ",M");
				$(target).animate(
					{ top: basePos[1] - $(target).height() - 25 },
					{}
				);
				break;
				break;
				
			case "#logo05":
				setPos(target, (basePos[0]+125) + ",M");
				$(target).animate(
					{ top: basePos[1] - $(target).height() - 16 },
					{}
				);
				break;
				break;
	}
}

function setPos(target, pos){
	var pArray = pos.split(",");
	
	switch(pArray[0]){
		case "C":
				$(target).css({ "left": ($(".index_js").width() - $(target).width())/2 });
				break;
		
		case "L":
				$(target).css({ "left": 0 });
				break;
		
		case "R":
				$(target).css({ "left": $(".index_js").width() - $(target).width() });
				break;
				
		case "M":
				$(target).css({ "left":	-$(target).width() });
				break;
		
		default:
				$(target).css({ "left": parseInt(pArray[0]) });
				break;
		
	}
	
	
	switch(pArray[1]){
		case "C":
				$(target).css({ "top":  ($(".index_js").height() - $(target).height())/2 });
				break;
		
		case "T":
				$(target).css({ "top":  0 });
				break;
		
		case "B":
				$(target).css({ "top":  $(".index_js").height() - $(target).height() });
				break;
		
		case "M":
				$(target).css({ "top":  - $(target).height() });
				break;
		
		default:
				$(target).css({ "top":  parseInt(pArray[1]) });
				break;
	}
	$(target).css({ "visibility": "visible" });
}

function fadeIn(target){
	$(target).animate(
		{ opacity: 1 },
		{ queue: true, duration: FADESEC }
	);
}

function fadeOut(target){
	$(target).animate(
		{ opacity: 0 },
		{ queue: true, duration: FADESEC }
	);
}