// JavaScript Document

(function($){

	"use strict";

	if (typeof window.console !== 'object') {
		console = {};
		console.log = function(){}
	}

	/**
	 * Log util.
	 */
	$.fn.extend({
		log: function(message){
			console.log(message, this);
			return this;
		}
	});

	$(document).ready(function(){

		// var $topXML;				// XMLを格納しているjQuery変数
		// var $elements;			// HTML上の.elements要素
		var $picture;				// HTML上の.picture要素
		var $nav;						// HTML上の.nav要素
		var $playMark;			// navの中の▷のアイコン画像
		var $caption;				// navの中のテキスト
		var topArray;				// XMLの情報をまとめた配列
		var pictureLength;	// 画像の数
		var prevNum;				// 前回選択していた画像（ナビ）の番号
		var currentNum;			// 現在選択されている画像（ナビ）
		var navInitTimer;		// ナビ部分の最初のアニメーションを行う際に必要なタイマー
		var changeTimer;		// 画像とナビの表示切り替えを自動で行うタイマー
		var mouseEnabled;		// ナビのクリック判定に使用するフラグ falseの時はナビをクリックできなくなるようにする

		xmlInit();

		/**
		 * XML読み込み関数
		 */
		function xmlInit() {
			$.ajax({
				url: 'xml/top.xml?' + (new Date()).getTime(),
				dataType: 'text',
				error: function(xhr, status, e){
					console.log("status = " + status);
				},
				success: loadXmlComplete
			});
		}

		/**
		 * XML読み込み完了関数
		 */
		function loadXmlComplete(xml) {
			topArray = [];

			// XMLを格納する際に<div>タグをつけないとIEで認識されない…
			var $topXML = $('<div>' + xml + '</div>');

			$topXML.find("contents").each(function(){
				var caption = $(this).attr('caption');
				var image = $(this).attr('image');
				var url = $(this).attr('url');
				var target = $(this).attr('target');

				topArray.push({
					caption: caption,
					image: image,
					url: url,
					target: target
				});
			});

			pictureLength = topArray.length;

			init();
		}

		/**
		 * 各初期設定
		 */
		function init() {
			currentNum = 0;

			pictureInit();
			navInit();
		}

		/**
		 * 写真表示のタグ生成
		 */
		function pictureInit() {
			var $elements = $('#gallery div.elements');

			var result = [];
			var ulStartTag = '<ul class="picture">';
			result.push(ulStartTag);

			for (var i = 0; i < pictureLength; i++) {
				var liStartTag = '<li>';
				result.push(liStartTag);

				var topObj = topArray[i];
				var url = topObj.url;
				var target = topObj.target;
				var imageURL = topObj.image;
				var caption = topObj.caption;

				var aStartTag = '<a href="' + url + '" target="' + target + '">';
				result.push(aStartTag);

				var imageTag = '<img src="' + imageURL + '" alt="' + caption + '" />';
				result.push(imageTag);

				var aEndTag = '</a>';
				result.push(aEndTag);
			}

			var ulEndTag = '</ul>';
			result.push(ulEndTag);

			var resultTag = result.join('');
			// console.log('resultTag = ' + resultTag);

			$elements.append(resultTag);

			$picture = $elements.find('.picture li');
			$picture
				.eq(0)
					.addClass('first')
					.css({
						opacity: 0
					})
					.animate({
						opacity: 1
					}, 1000, 'easeOutQuart')
					.end()
				.end()
			;
		}

		/**
		 * タイマーイベント
		 */
		function changeTimerEvent() {
			var nextNum = currentNum + 1;
			settingNext(nextNum);
		}

		function settingNext(nextNum) {
			if (mouseEnabled === false) {
				return;
			}
			mouseEnabled = false;

			clearInterval(changeTimer);

			// 前回の番号を変更
			prevNum = currentNum;

			// 現在の番号を変更
			currentNum = nextNum;

			// 変更した番号が写真の数以上になったら0に戻す
			if (currentNum >= pictureLength) {
				currentNum = 0;
			}

			changePicture();
			changeActiveNav();

			changeTimer = setInterval(changeTimerEvent, 4000);
		}

		/**
		 * 写真を変更する関数
		 */
		function changePicture() {
			// 写真変更のアニメーション
			$picture
				.eq(prevNum)
					.stop(false, true)
					.animate({
						left: -1250
					}, 1500, 'easeInOutQuint')
				.end()
				.eq(currentNum)
					.stop(false, true)
					.css({
						left: 1250
					})
					.animate({
						left: 0
					}, 1500, 'easeInOutQuint')
				.end()
			;
		}

		/**
		 * ナビの設定
		 */
		function navInit() {
			mouseEnabled = true;

			var $elements = $('#gallery div.elements');

			var result = [];
			var ulStartTag = '<ul class="nav">';
			var liStartTag;
			result.push(ulStartTag);

			for(var i = 0; i < pictureLength; i++) {
				liStartTag = '<li>';
				result.push(liStartTag);

				var playMarkImg = 'images/playmark.png';
				var playMark = '<span class="mark"><img src="' + playMarkImg + '" ></span>';
				result.push(playMark);

				var caption = '<span class="caption">' + topArray[i]['caption'] + '</span>';
				result.push(caption);

				var liEndTag = '</li>';
				result.push(liEndTag);
			}

			var ulEndTag = '</ul>';
			result.push(ulEndTag);

			var resultTag = result.join('');
			$elements.append(resultTag);

			$nav = $elements.find('ul.nav li');
			$nav
				.click(function(){
					// 表示されている画像が自分自身だった場合は関数を呼ばない
					var indexNum = $nav.index(this);
					if (indexNum === currentNum) {
						return;
					}

					settingNext(indexNum);
				})
				.each(function(){
					// テキストが入った状態で幅を取得
					var width = $(this).width();

					// 取得した幅をdataに格納
					// ※今はこの値は使っていない
					$(this).data('width', width);
				})
				.find('span.caption')
					.hide()
				.end()
				.width(8)
			;

			navInitTimer = setTimeout(navInitAnimation, 500);
		}

		/**
		 * ナビの最初のアニメーション
		 */
		function navInitAnimation() {
			if (navInitTimer !== undefined) {
				$nav
					.eq(0)
						.find('span.mark')
							.stop(false, true)
							.fadeOut(300)
						.end()
						.find('span.caption')
							.stop(false, true)
							.fadeIn(300, function(){
								$nav
									.eq(currentNum)
										.animate({
											width: 210
										}, 1000, 'easeInOutQuint')
							})
						.end()
					.end()
				;

				clearTimeout(navInitTimer);
				navInitTimer = undefined;

				changeTimer = setInterval(changeTimerEvent, 4000);
			}
		}

		/**
		 * ナビのアクティブを変更する為のアニメーション
		 */
		function changeActiveNav() {
			$nav
				.eq(prevNum)
					.find('span.mark')
						.stop(false, true)
						.fadeIn('fast')
					.end()
					.find('span.caption')
						.stop(false, true)
						.fadeOut('fast')
					.end()
					.stop(false, true)
					.animate({
						width: 8
					}, 300, 'easeOutExpo', newActiveNav)
				.end()
			;
		}

		/**
		 * ナビのアクティブを展開する為のアニメーション
		 */
		function newActiveNav(){
			// var width = $nav.eq(currentNum).data('width');		// ← dataに格納している幅を取得

			$nav
				.eq(currentNum)
					.find('span.mark')
						.stop(false, true)
						.fadeOut('fast')
					.end()
					.find('span.caption')
						.stop(false, true)
						.fadeIn('fast')
					.end()
					.stop(false, true)
					.animate({
						width: 210
					}, 1000, 'easeInOutQuint', resetNavMouseEnabled)
				.end()
			;
		}

		/**
		 * ナビのクリック不可を解除
		 */
		function resetNavMouseEnabled() {
			mouseEnabled = true;
		}

		// ナビゲーションの背景透過画像の表示　ie6用
		if ($.browser.msie && (parseInt($.browser.version, 10) < 7)) {
			/* string argument can be any CSS selector */
			/* .png_bg example is unnecessary */
			/* change it to what suits you! */
			DD_belatedPNG.fix('.elements .nav li, #blur1 img, #blur2 img');
		}

	});

}(jQuery));