$(function() {
	
	// 初期設定
	var interval = 5000; // 画像切替の移動する時間設定（例：5000 → 5秒）
	var speed = 1500; // 画像切替のフェードの時間設定（例：1500 → 1.5秒）
	
	// jsonファイル読み込み配列
	var idArray = new Array();
	var linkArray = new Array();
	var imgArray = new Array();
	var thumbArray = new Array();
	var altArray = new Array();
	
	var slideNum; // 全スライド数
	var strListLeft = "";
	var strListRight = "";

	var off = -920; // 画像のサイズ幅（スライドする幅）

	// jsonファイル読み込み
	outputMainArea("top/data/data.json");

	// スライドクリック関数
	// --------------------------------------------------
	$("#slideThumb li a").live("click", function(){
	
		// thumbCurrentが付加されている要素を検索
		var thumbNam = $('#slideThumb li a.thumbCurrent').attr("class");
		var thumbNum = thumbNam.replace("thumb", "");
		thumbNum = thumbNum.replace(" thumbCurrent", "");

		// すべての画像からCurrentクラス削除
		$('#slideThumb li a').each(function(){
			$(this).removeClass('thumbCurrent');
		});
		
		// 画像の番号を取得
		var thumbNam = $(this).attr("class");
		var nextNum = thumbNam.replace("thumb", "");

		// 表示する画像にCurrentクラス追加
		$(this).addClass('thumbCurrent');

		// 現在の画像と表示する画像を設定
		strListLeft = $("<li>").addClass("list" + idArray[thumbNum-1]).append($("<a>").attr("href", linkArray[thumbNum-1]).append($("<img>").attr({src:imgArray[thumbNum-1], alt:altArray[thumbNum-1]})));
		strListRight = $("<li>").addClass("list" + idArray[nextNum-1]).append($("<a>").attr("href", linkArray[nextNum-1]).append($("<img>").attr({src:imgArray[nextNum-1], alt:altArray[nextNum-1]})));

		$('#slideList').html(strListLeft).append(strListRight).css('marginLeft', 0);

		$('#slideList').stop().animate({
			marginLeft : off +'px'
		}, speed, 'easeOutQuint');
		
		// 画像ループを初期化
		clearTimeout(timerID);

		// 再度画像ループを開始
		timerID = setTimeout(mainloop, interval);

		return false;

	});

	var timerID = setTimeout(mainloop,interval);


	// スライドループ関数
	// --------------------------------------------------
	function mainloop(){

		// thumbCurrentが付加されている要素を検索
		var thumbNam = $('#slideThumb li a.thumbCurrent').attr("class");
		var thumbNum = thumbNam.replace("thumb", "");
		thumbNum = thumbNum.replace(" thumbCurrent", "");

		// すべての画像からCurrentクラス削除
		$('#slideThumb li a').each(function(){
			$(this).removeClass('thumbCurrent');
		});

		// 次に表示する画像の番号を設定
		if (thumbNum != slideNum) {
			var nextNum = parseInt(thumbNum) + 1;
		} else {
			var nextNum = 1;
		}

		// 表示する画像にCurrentクラス追加
		$('#slideThumb li a.thumb' + nextNum).addClass('thumbCurrent');

		// 現在の画像と表示する画像を設定
		strListLeft = $("<li>").addClass("list" + idArray[thumbNum-1]).append($("<a>").attr("href", linkArray[thumbNum-1]).append($("<img>").attr({src:imgArray[thumbNum-1], alt:altArray[thumbNum-1]})));
		strListRight = $("<li>").addClass("list" + idArray[nextNum-1]).append($("<a>").attr("href", linkArray[nextNum-1]).append($("<img>").attr({src:imgArray[nextNum-1], alt:altArray[nextNum-1]})));

		$('#slideList').html(strListLeft).append(strListRight).css('marginLeft', 0);

		$('#slideList').stop().animate({
			marginLeft : off +'px'
		}, speed, 'easeOutQuint');

		timerID = setTimeout(mainloop, interval);
	};

	// jsonファイル読み込み関数
	// --------------------------------------------------
	function outputMainArea(jsonDataUrl) {
		
		$.getJSON(jsonDataUrl,
			function(data) {
	
				var listElm = $('#slideList');
				var thumbElm = $('#slideThumb');
				var strList = "";
				var strThumb = "";
	
				$.each(data, function(i, item){
									  
					if (i == 11) {  return false; } // 最大スライド数11枚で処理終了
					
					// jsonデータを配列に格納
					idArray[i] = item.id;
					linkArray[i] = item.link;
					imgArray[i] = item.imgPath;
					thumbArray[i] = item.thumbPath;
					altArray[i] = item.imgAlt;

					if (i != 0) {
						strThumb = $("<li>").append($("<a>").attr("href", "#").addClass("thumb" + item.id).append($("<img>").attr({src:item.thumbPath})));
					} else {
						strList = $("<li>").addClass("list" + item.id).append($("<a>").attr("href", item.link).append($("<img>").attr({src:item.imgPath, alt:item.imgAlt})));
						// 最初のスライドサムネイルに「thumbCurrent」クラス追加
						strThumb = $("<li>").append($("<a>").attr("href", "#").addClass("thumb" + item.id + " thumbCurrent").append($("<img>").attr({src:item.thumbPath})));
					}
					listElm.append(strList);
					thumbElm.append(strThumb);
					slideNum = i + 1;
				});

			}
		);

	}

});