// UTF-8

jQuery.easing.def = "easeOutQuart";

//XMLへのパス
var xmlPath = "spc/xml/top.xml";
//画像のフォルダ
var imagePath = "spc/images/mainvisual/";
//ロゴカラーに対応した色指定
var bgcolor = new Array('#e71b8f','#ffef00','#00a2e7');

//現在のイメージ番号
var currentImage = 0;
//エレメント用オブジェクト
var elements = new Object();
//画像のプロパティを記録する配列
var images = new Array();
//先読み画像用配列
var preloadimages = new Array();

/*======================================================

ドキュメント読み込み後の処理

======================================================*/
$(document).ready(function(){

	//ビジュアル用の要素を追加
	$('#header h1').before('<div id="visualContainer"></div>');
	elements['container'] = $('#visualContainer');

	//ローディングイメージ読み込み
	var loadingImage = new Image();
	loadingImage.src = "spc/images/loading.gif";
	loadingImage.onload = function(){

		//ローディングイメージ配置
		elements['container'].append('<div id="loading"><img src="spc/images/loading.gif" width="" height="" alt="Now loading" /></div>');
		elements['loading'] = $('#loading');

		//XML読み込み開始
		loadXML(xmlPath);
	};

});

/*======================================================

XMLを読み込み

======================================================*/
function loadXML(path){

	//MXLを読み込み
	$.ajax({
		url:path,
		type:'GET',
		dataType:'xml',
		timeout:1000,
		error:function(){
			alert("Pickup用xmlファイルの読み込みに失敗しました");
		},
		success:parseXML
	});
	
	//XMLをパース
	function parseXML(xml,status){
		$(xml).find('image').each(function(n){
			images[n] = new Object();
			images[n].file = imagePath + $(this).text();
			images[n].color = $(this).attr('logocolor');
			images[n].x = $(this).attr('x');
			images[n].y = $(this).attr('y');
		});

		//ビジュアルの先読み＆サイズ取得
		var loaded = 0;
		for(i=0; i<images.length; i++){
			preloadimages[i] = new Image();
			preloadimages[i].src = images[i].file;
			preloadimages[i].onload = function(){
				loaded++;
				if(loaded >= images.length){
					buildVisual();
				}
			};
		}
	}

}

function buildVisual(){
	
	elements['loading'].remove();

	for(i=0; i<images.length; i++){
		images[i].w = preloadimages[i].width;
		images[i].h = preloadimages[i].height;
		elements['container'].append('<div class="visual" id="visual' + i + '"></div>');
		
		$('#visual' + i).append('<img src="' + images[i].file + '" />');
		$('#visual' + i)
			.css('min-width', images[i].w + 'px')
			.css('min-height', images[i].h + 'px')
			.css('visibility', 'hidden');
	}

	//写真の前面にドットパターンを敷く
	elements['container'].append('<div id="dotpatten"></div>');
	elements['dotpatten'] = $('#dotpatten');
	elements['dotpatten'].css('opacity', '0.25');

	//ロゴ用の要素を追加
	elements['container'].append('<div id="logo"></div>');
	elements['logo'] = $('#logo');

	//マスク用の要素を追加
	elements['container'].append('<div id="mask"></div>');
	elements['mask'] = $('#mask');
	elements['mask']
		.css('left', '0px')
		.css('width', elements['container'].width() + 'px')
		.css('visibility', 'visible');
	//elements['mask'].css('opacity', '0.5');

	//現在のイメージを取得して表示
	elements['current'] = $('#visual' + currentImage);
	elements['current'].css('visibility', 'visible');

	//もろもろ実行
	fitCenter();
	addLogo();
	slide('in');
}

/*======================================================

リサイズ時

======================================================*/
window.onresize = function(){
	fitCenter();
};

/*======================================================

センターへ移動

======================================================*/
function fitCenter() {
	$('.visual')
		.css('left', (elements['container'].width() - elements['current'].width()) / 2 + 'px')
		.css('top', (elements['container'].height() - elements['current'].height()) / 2 + 'px');
	elements['mask'].css('width', elements['container'].width() + 'px');
}

/*======================================================

イメージ入れ替え

======================================================*/
function swapImage(){
	slide('out');
}

//スライド実行用
function slide(md){
	switch(md){
		case "out":
			elements['mask']
				.css('left', elements['container'].width() + 'px')
				.css('width', elements['container'].width()+'px')
//				.css('background', bgcolor[images[(currentImage + 1) % images.length].color])
				.css('visibility', 'visible');
			elements['mask'].animate({ 
				left: 0
			},{duration:500, easing:"easeOutQuart", complete:onOutComp});
			break;
		case "in":
			elements['mask'].animate({ 
				left: -elements['mask'].width()
			},{duration:500, easing:"easeOutQuart", complete:onInComp});
			break;
		default:
			break;
	}
}

//画像が消えている間の処理
function onOutComp(){
	elements['current'].css('visibility', 'hidden');
	currentImage = (currentImage + 1) % images.length;
	elements['current'] = $('#visual' + currentImage);
	elements['current'].css('visibility', 'visible');
	elements['logoimg'].css('visibility', 'hidden');
	slide('in');
}

//画像の出現が完了したときの処理
function onInComp(){
	elements['mask'].css('visibility', 'hidden');
	addLogo();
	elements['logoimg'].animate({ 
		opacity: 1
	},{duration:200, easing:"linear", complete:onAllComp});
}

//すべて完了したときの処理
function onAllComp(){
	elements['mask'].css('visibility', 'hidden');
	setTimeout(swapImage, 5000);
}

//ロゴを追加する処理
function addLogo(){
	if(elements['logoimg']){
		elements['logoimg'].remove();
	}
	var logofile = imagePath + 'nextspc' + images[currentImage].color + '.png';
	elements['logo'].append('<img src="' + logofile + '" alt="NEXT SPC" />');
	elements['logoimg'] = elements['logo'].find('img');
	elements['logoimg']
		.css('opacity', '0')
		.css('visibility', 'visible')
		.css('left', images[currentImage].x + 'px')
		.css('top', images[currentImage].y + 'px');
}