// JavaScript Document

/*====================================*
 * 共通変数の宣言
 *====================================*/
var photo = new Object();
photo['photo'] = 0;	// 写真の枚数
photo['page']  = 0; // サムネイルのページ数
photo['now']   = 1; // 現在のページ
photo['num']   = 7; // 1ページの表示枚数
photo['step']  = 1; // 現在の写真


/*====================================*
 * プレビューのイニシャライズ
 *------------------------------------*
 * 下記ステータスをphoto2.phpに渡す。
 * id   : ウインドウID
 *------------------------------------*
 * @void
 *====================================*/
function photoPreviewInit(id) {
	// 変数宣言
	var i, w, h, dec;
	var bwr = navigator.userAgent;

	//動画ウインドウを隠す
	$("#MovieViewBox").hide();

	// ボタンを初期化
	$("#PhotoViewPrev img").attr("src", "./images/btn_prev_no.gif");
	$("#PhotoViewNext img").attr("src", "./images/btn_next_no.gif");
	
	if($("div#PhotoViewBox").css("display") == "block") {
		// 違うジャンルを選んだ時
		$("ul#PhotoViewSumb").fadeOut("fast");
		$("#PhotoViewZoom img").fadeOut("fast");
	}
	
	// サムネイル作成
	$("ul#PhotoViewSumb").load(
		"./photo.php",
		{
			"id":	id
		},
		function(data, status) {
			if(status == "success") {
				// サムネイルの先頭の画像を初期値として拡大部分にセット
				$("#PhotoViewZoom img").attr({
					"src": $("ul#PhotoViewSumb li img").attr("src"),
					"alt": $("ul#PhotoViewSumb li img").attr("alt")
				});
				
				// キャプションをセット
				$("p#PhotoViewCaption").html($("ul#PhotoViewSumb li img").attr("alt"));
				
				// サムネイルのステータスをセット
				photo['photo'] = $("ul#PhotoViewSumb li").length;
				photo['page']  = Math.ceil($("ul#PhotoViewSumb li").length / photo['num']);
				photo['now']   = 1;
				
				// 次のページがある場合はNEXTボタンをアクティブ画像に変更
				if(photo['page'] > 1) {
					$("#PhotoViewNext").css("cursor", "pointer");
					$("#PhotoViewNext img").attr("src", "./images/btn_next.gif");
				}
				
				if($("div#PhotoViewBox").css("display") == "none") {
					var bgW = document.documentElement.clientWidth || $(window).width();
					var bgH = document.documentElement.clientHeight || $(window).height();
					var x = document.body.scrollLeft || document.documentElement.scrollLeft;
					var y = document.body.scrollTop || document.documentElement.scrollTop;
					
					$("#alphaBG").css({"height": bgH + 300, "width": bgW, "display": "block"});
					$("#alphaBG").css({"top": y - 300, "left": x});
					$("#alphaBG").css("background-color", "#FFF").fadeTo("slow", 0.8);
					$("#PhotoViewBox").css("top", y + 20);
					$("#PhotoViewBox").fadeIn();
				}
				
				// メイン画像の入れ子を初期化
				$("#PhotoViewZoom").css({
					"padding": 0,
					"width": 450,
					"height": 450
				});
				
				// 拡大部分の空白調整
				photoPreviewResize("#PhotoViewZoom", 450, 1);

				// サムネイル部分の空白調整
				for(i = 1; i <= photo['photo']; i++) {
					photoPreviewResize("#photo" + i, 58, 1);
				}

				if(photo['page'] > 1) {
					for(i = 8; i <= photo['photo']; i++) {
						$("#photo" + i).hide();
					}
				}

				$("ul#PhotoViewSumb").fadeIn("slow");
				$("#PhotoViewZoom img").fadeIn("slow");
			} else {
				alert("データの読み込みに失敗しました。");
			}
		}
	);
}


/*====================================*
 * サムネイルのページ切り替え
 *------------------------------------*
 * mode : prevで戻る、nextで次へ
 *------------------------------------*
 * @void
 *====================================*/
function photoPreviewMove(mode) {
	// 変数宣言
	var i, rmStart, rmEnd, start, end;
	
	// 送られてきたmodeによって分岐処理
	switch(mode) {
		case 'prev':
			// 戻るが押下された時
			if(photo['now'] > 1) {
				// ページ移動が可能な場合
				rmStart = (photo['now'] - 1) * photo['num'] + 1;			// 消去ここから
				rmEnd = (photo['now'] - 1) * photo['num'] + photo['num'];	// 消去ここまで
				start = (photo['now'] - 2) * photo['num'] + 1;				// 表示ここから
				end = (photo['now'] - 2) * photo['num'] + photo['num'];		// 表示ここまで
				
				// もし表示終了が画像の枚数を超えている場合は画像数のMAX値をセット
				if(rmEnd > photo['photo']) rmEnd = photo['photo'];
				
				// 消去処理
				for(i = rmStart; i <= rmEnd; i++) { $("#photo" + i).hide("slow"); }
				
				// 表示処理
				for(i = start; i <= end; i++) { $("#photo" + i).show("slow"); }
				
				// 現在のページカウンタをマイナスする
				photo['now']--;
				
				// 戻り先のページには必ず次のページがあるのでNEXTボタンをアクティブ画像に変更
				$("#PhotoViewNext").css("cursor", "pointer");
				$("#PhotoViewNext img").attr("src", "./images/btn_next.gif");
				
				// 戻り先のページにさらに前のページがある場合はPREVボタンをアクティブ画像に変更
				if(photo['now'] > 1) {
					$("#PhotoViewPrev img").attr("src", "./images/btn_prev.gif");
				} else {
					$("#PhotoViewPrev").css("cursor", "auto");
					$("#PhotoViewPrev img").attr("src", "./images/btn_prev_no.gif");
				}
			}
			break;
		
		case 'next':
			// 進むが押下された時
			if(photo['now'] < photo['page']) {
				// ページ移動が可能な場合
				rmStart = (photo['now'] - 1) * photo['num'] + 1;	// 消去ここから
				rmEnd = photo['now'] * photo['num'];				// 消去ここまで
				start = photo['now'] * photo['num'] + 1;			// 表示ここから
				end = photo['now'] * photo['num'] + photo['num'];	// 表示ここまで
				
				// もし表示終了が画像の枚数を超えている場合は画像数のMAX値をセット
				if(end > photo['photo']) end = photo['photo'];
				
				// 消去処理
				for(i = rmStart; i <= rmEnd; i++) { $("#photo" + i).hide("slow"); }
				
				// 表示処理
				for(i = start; i <= end; i++) { $("#photo" + i).show("slow"); }
				
				// 現在のページカウンタをプラスする
				photo['now']++;
				
				// 進み先のページには必ず前のページがあるのでPREVボタンをアクティブ画像に変更
				$("#PhotoViewPrev").css("cursor", "pointer");
				$("#PhotoViewPrev img").attr("src", "./images/btn_prev.gif");
				
				// 進み先のページにさらに次のページがある場合はNEXTボタンをアクティブ画像に変更
				if(photo['now'] < photo['page']) {
					$("#PhotoViewNext img").attr("src", "./images/btn_next.gif");
				} else {
					$("#PhotoViewNext").css("cursor", "auto");
					$("#PhotoViewNext img").attr("src", "./images/btn_next_no.gif");
				}
			}
			break;
	}
}


/*====================================*
 * サムネイルの画像をメインに表示する
 *------------------------------------*
 * num : 写真番号
 *------------------------------------*
 * @void
 *====================================*/
function photoPreviewShow(num) {
	// 変数宣言
	var sel = "#PhotoViewZoom";
	var size = 450;
	
	// メイン画像の入れ子を初期化しておく
	$(sel).css({
		"padding": 0,
		"width": size,
		"height": size
	});
	
	// メイン画像の基本属性を入れ替える
	$(sel + " img").attr({
		"src": $("li#photo" + num + " img").attr("src"),
		"alt": $("li#photo" + num + " img").attr("alt")
	});
	
	// キャプションを基本情報から取得する
	$("p#PhotoViewCaption").html($("li#photo" + num + " img").attr("alt"));
	
	// 拡大部分の空白調整
	photoPreviewResize(sel, size, 2);
}


/*====================================*
 * 拡大写真クリックで次の写真へ
 *------------------------------------*
 * @void
 *====================================*/
function photoStep() {
	if(photo['step'] < photo['photo']) {
		photo['step']++;
		if(photo['step'] % photo['num'] == 1) photoPreviewMove('next');
	} else {
		photo['step'] = 1;
		for(var i = 1; i < photo['page']; i++) { photoPreviewMove('prev'); }
	}
	
	photoPreviewShow(photo['step']);
}


/*====================================*
 * プレビューを非表示にする
 *------------------------------------*
 * @void
 *====================================*/
function photoPreviewHide() {
	// 表示ボックスとアルファ背景をフェードアウトさせる
	$("#PhotoViewBox").fadeOut();
	$("#alphaBG").fadeOut();
}


/*====================================*
 * スクロール時の背景を制御
 *------------------------------------*
 * @void
 *====================================*/
$(window).scroll(function() {
	// アルファ背景をスクロール追尾させる
	if($("#alphaBG").css("display") == "block") {
		var movX = document.documentElement.scrollLeft || document.body.scrollLeft;
		var movY = document.documentElement.scrollTop || document.body.scrollTop;
		
		$("#alphaBG").css({"left": movX, "top": movY - 300});
	}
});


/*====================================*
 * ウインドウリサイズ時の背景を制御
 *------------------------------------*
 * @void
 *====================================*/
$(window).resize(function() {
	// リサイズ後のウインドウサイズを基準にアルファ背景を調整する
	if($("#alphaBG").css("display") == "block") {
		var bgW = document.documentElement.clientWidth || $(window).width();
		var bgH = document.documentElement.clientHeight || $(window).height();
		
		$("#alphaBG").css({"height": bgH + 300, "width": bgW});
	}
});


/*====================================*
 * 画像リサイズの値をセット
 *------------------------------------*
 * sel  : セレクタ
 * size : 規定値
 *------------------------------------*
 * @void
 *====================================*/
function photoPreviewResize(sel, size, mode) {
	// 変数宣言
	var w, h, dec;
	
	switch(mode) {
		case 1:
			// 初期表示用、読み込みが追いつかない場合があるので
			w = $(sel + "Width").val();
			h = $(sel + "Height").val();
			break;
		
		case 2:
			// サムネイルクリック時
			w = $(sel + " img").attr("width");
			h = $(sel + " img").attr("height");
			break;
	}
	
	// 横幅が規定値を下回っている場合は不足分の半分を調整
	if(w < size) {
		dec = Math.floor((size - w) / 2);
		$(sel).css({
			"padding-left": dec,
			"width": parseInt($(sel).css("width").replace("px", "")) - dec
		});
	}
	
	// 高さが規定値を下回っている場合は不足分の半分を調整
	if(h < size) {
		dec = Math.floor((size - h) / 2);
		$(sel).css({
			"padding-top": dec,
			"height": parseInt($(sel).css("height").replace("px", "")) - dec
		});
	}
}