// 初期設定
var loopAnimarionInterval = 20;
var loopAnimarionMovePx = 1;


// リサイズ
function winResized(){
	var my_height = $(window).height() - 10 + "px";
	var my_width = $(window).width() - 490 - 10 + "px";
	
	$("#nav, #about, #aboutContents, #mainContents").css("height", my_height);
	$("#mainContents").css("width", my_width);
	
	var scroll_height = $(window).height() - 102 - 10 + "px";
	$("#scrollBar, #scrollBar .jScrollbar_draggable").css("height", scroll_height);
	
	var my_height2 = $(window).height() - 10 + "px";
	var my_width2 = $(window).width() - 490 - 10 + "px";
	$("#main").css("height", my_height2);
	$("#main").css("width", my_width2);
	
	// scroll
	$('#scrollBar').jScrollbarResize();
	
}

function getRandomNum(minNum, maxNum) {
   var randnum = minNum + Math.floor( Math.random() * maxNum + 1 );
	 return randnum;
}
// アニメーション
function aniScrollUp(_target){
	var myTarget = _target;
	var firstHeight = Math.floor(0 - myTarget.height() / 2 / getRandomNum(1, 10));
	//$('#about').append(firstHeight + '/');
	// 初期位置
	myTarget.css('top', firstHeight);
	var targetHeight = 0 - myTarget.height() / 2;
	// Inverval
	var myInterval = setInterval(loopAnimation, loopAnimarionInterval);
	// scroll
	function loopAnimation(){
		//var myTarget = _target;
		var myTop = Number(myTarget.css("top").replace("px", ""));
		var targetY = myTop - loopAnimarionMovePx + "px";
		if(myTop < targetHeight){
			targetY = 0 - 10 + "px";
		}
		myTarget.css('top', targetY);
	};
	
	// mouseover : pause
	myTarget.mouseover(function(){
		clearInterval(myInterval);
	});
	// mouseout : resume
	myTarget.mouseout(function(){
		myInterval = setInterval(loopAnimation, loopAnimarionInterval);
	});
}

// アニメーション
function aniScrollDown(_target){
	var myTarget = _target;
	var startHeight = 0 - myTarget.height() / 2;
	var firstHeight = Math.floor(0 - myTarget.height() / 2 / getRandomNum(1, 10));
	//$('#about').append(firstHeight + '/');
	// 初期位置
	myTarget.css('top', firstHeight);
	// Inverval
	var myInterval = setInterval(loopAnimation, loopAnimarionInterval);
	// scroll
	function loopAnimation(){
		//var myTarget = _target;
		var myTop = Number(myTarget.css("top").replace("px", ""));
		var targetY = myTop + loopAnimarionMovePx + "px";
		if(myTop >= 0){
			targetY = startHeight + 10 + "px";
		}
		myTarget.css('top', targetY);
	};
	
	// mouseover : pause
	myTarget.mouseover(function(){
		if(myInterval != 0){
			clearInterval(myInterval);
			myInterval = 0;
		}
	});
	// mouseout : resume
	myTarget.mouseout(function(){
		if(myInterval == 0){
			myInterval = setInterval(loopAnimation, loopAnimarionInterval);
		}
	});
}





// resize
$( window ).resize(function(){
	winResized();
});

// loaded
$(function() {
	
	$('#scrollBar').jScrollbar();
	$('#navScrollBar').jScrollbar();
	
	// XMLを読み込み
	$.ajax({
		url: 'xml/setting.xml',
		dateType: 'xml',
		success: function(data){
			//alert('success');
			$('#mainContents').append('<ul></ul>');
			var myList = $('#mainContents ul');
			
			$('card', data)
				.each(function() {
					var listTags = '';
					listTags += '<li>';
					listTags += '<div class="card">';
					listTags += '<div class="front"><p class="num">' + $('no', this).text() + '</p><img src="' + $('frontImage', this).text() + '" width="162" height="196" alt="' + $('frontImageAlt', this).text() + '"></div>';
					listTags += '<div class="back"><img src="' + $('backImage', this).text() + '" width="162" height="196" alt="' + $('backImageAlt', this).text() + '"></div>';
					listTags += '</div>';
					listTags += '<div>';
					listTags += '<p class="text">' + $('name', this).text() + '<br>' + $('company', this).text() + '</p>';
					listTags += '<p class="url">' + $('url', this).text() + '</p>';
					listTags += '</div>';
					listTags += '</li>';
					
					myList.append(listTags);
				})
				.each(function() {
					var listTags = '';
					listTags += '<li>';
					listTags += '<div class="card">';
					listTags += '<div class="front"><p class="num">' + $('no', this).text() + '</p><img src="' + $('frontImage', this).text() + '" width="162" height="196" alt="' + $('frontImageAlt', this).text() + '"></div>';
					listTags += '<div class="back"><img src="' + $('backImage', this).text() + '" width="162" height="196" alt="' + $('backImageAlt', this).text() + '"></div>';
					listTags += '</div>';
					listTags += '<div>';
					listTags += '<p class="text">' + $('name', this).text() + '<br>' + $('company', this).text() + '</p>';
					listTags += '<p class="url">' + $('url', this).text() + '</p>';
					listTags += '</div>';
					listTags += '</li>';
					
					myList.append(listTags);
				});
				myList
					.addClass('l1')
					.clone(false).appendTo('#mainContents').removeClass('l1').addClass('l2')
					.clone(false).appendTo('#mainContents').removeClass('l2').addClass('l3')
					.clone(false).appendTo('#mainContents').removeClass('l3').addClass('l4')
					.clone(false).appendTo('#mainContents').removeClass('l4').addClass('l5')
					.clone(false).appendTo('#mainContents').removeClass('l5').addClass('l6')
			
			// comp
			xmlLoaded();
		}
	});
});
// HTML作成完了
function xmlLoaded(){
	
	winResized();
	/*
	*/
	// 奇数：上に移動
	aniScrollUp($('#main #mainContents ul.l1'));
	aniScrollUp($('#main #mainContents ul.l3'));
	aniScrollUp($('#main #mainContents ul.l5'));
	
	// 偶数：下に移動
	aniScrollDown($('#main #mainContents ul.l2'));
	aniScrollDown($('#main #mainContents ul.l4'));
	aniScrollDown($('#main #mainContents ul.l6'));
	
	var myCard = $('#main #mainContents div.card');
	
	// 3D回転を設定
	myCard.hover(
			function () {
					$(this).find('div').stop().rotate3Di('flip', 400, {direction: 'clockwise', sideChange: mySideChange});
			},
			function () {
					$(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
			}
	);
	
	// ワッペンのアニメーション
	$('#main div.mainBtn1 a, #main div.mainBtn2 a')
		.mouseover( wappenRollover )
		.mouseout(  wappenRollout );
	
	// フォーカス設定
	/*
  $(window).bind("focus",function(){
			// フォーカスした
			// アニメーション開始
			$('#main #mainContents ul').mouseout();
  }).bind("blur",function(){
		  //フォーカスが外れた
			// アニメーション停止
			$('#main #mainContents ul').mouseover();
  });
	*/
	
};


// 3D回転
function mySideChange(front) {
		if (front) {
				$(this).parent().find('div.front').show();
				$(this).parent().find('div.back').hide();
		} else {
				$(this).parent().find('div.front').hide();
				$(this).parent().find('div.back').show();
		}
}

// ワッペンのアニメーション
function wappenRollover() {
		$(this).parent().find('.fukidashi').removeClass('fukidashi').addClass('fukidashiOver');
		$(this).parent().find('.hand').removeClass('hand').addClass('handOver');
};
function wappenRollout() {
		$(this).parent().find('.fukidashiOver').removeClass('fukidashiOver').addClass('fukidashi');
		$(this).parent().find('.handOver').removeClass('handOver').addClass('hand');
};