/*
 * 使用用途のイメージをポップアップ表示するためのJavaScriptです。
 * 動作には、事前に jQuery を読み込んでおく必要があります。
 */

// 定数
var SCREEN_ID = "PU_screen";
var FRAME_ID = "PU_body";
var CLOSEBUTTON_ID = "PU_closebutton";

var isIE6 = false;
if (navigator.userAgent.match(/MSIE (\d\.\d+)/)) {
	if (RegExp.$1 == "6.0") isIE6 = true;
}


// ポップアップイメージの定義
var loadImage = new Array();
setLoadImage("bedroom_s", "../sp_common/images/popup/bedroom_s.gif");
setLoadImage("living_s", "../sp_common/images/popup/living_s.gif");
setLoadImage("kidsroom_s", "../sp_common/images/popup/kidsroom_s.gif");
setLoadImage("door_s", "../sp_common/images/popup/door_s.gif");
setLoadImage("toilet_s", "../sp_common/images/popup/toilet_s.gif");
setLoadImage("bathroom_s", "../sp_common/images/popup/bathroom_s.gif");
setLoadImage("lavatory_s", "../sp_common/images/popup/lavatory_s.gif");
setLoadImage("kitchen_s", "../sp_common/images/popup/kitchen_s.gif");
setLoadImage("trash_s", "../sp_common/images/popup/trash_s.gif");
setLoadImage("doorknob_s", "../sp_common/images/popup/doorknob_s.gif");
setLoadImage("diaper_s", "../sp_common/images/popup/diaper_s.gif");
setLoadImage("vomit_s", "../sp_common/images/popup/vomit_s.gif");
setLoadImage("pet_s", "../sp_common/images/popup/pet_s.gif");
setLoadImage("ashtray_s", "../sp_common/images/popup/ashtray_s.gif");
setLoadImage("office_s", "../sp_common/images/popup/office_s.gif");
setLoadImage("restroom_s", "../sp_common/images/popup/restroom_s.gif");
setLoadImage("smokingroom_s", "../sp_common/images/popup/smokingroom_s.gif");
setLoadImage("publicbath_s", "../sp_common/images/popup/publicbath_s.gif");
setLoadImage("hotel_s", "../sp_common/images/popup/hotel_s.gif");
setLoadImage("bedroom_g", "../sp_common/images/popup/bedroom_g.gif");
setLoadImage("living_g", "../sp_common/images/popup/bedroom_g.gif");
setLoadImage("kidsroom_g", "../sp_common/images/popup/bedroom_g.gif");
setLoadImage("door_g", "../sp_common/images/popup/door_g.gif");
setLoadImage("toilet_g", "../sp_common/images/popup/toilet_g.gif");
setLoadImage("bathroom_g", "../sp_common/images/popup/lavatory_g.gif");
setLoadImage("lavatory_g", "../sp_common/images/popup/lavatory_g.gif");
setLoadImage("kitchen_g", "../sp_common/images/popup/kitchen_g.gif");
setLoadImage("pet_g", "../sp_common/images/popup/pet_g.gif");
setLoadImage("laundry_g", "../sp_common/images/popup/laundry_g.gif");
setLoadImage("ashtray_g", "../sp_common/images/popup/ashtray_g.gif");
setLoadImage("office_g", "../sp_common/images/popup/office_g.gif");
setLoadImage("nursing_s", "../sp_common/images/popup/nursing_s.gif");
setLoadImage("carrying_s", "../sp_common/images/popup/carrying_s.gif");

// イメージをフェードイン・フェードアウトする時の間隔・透過度
var fadeSec = 25;	// 1ステップの間隔（ミリ秒）
var fadeOpacity = 20;	// 1ステップあたりの透過度（%）

var obScreen = null;
var obFrame = null;
var obYouto = null;



/*
 * ポップアップイメージの情報を定義する
 * 
 * 格納先 loadImage の任意の配列（0からの連番）
 * 
 * id ... イメージのID（一意）
 * src ... イメージのURL
 * fadeTimer ... タイマーID（フェード実行時）
 * fadeOpacity ... フェードの透過度
 * 
 * img ... イメージオブジェクト
 * img.src ... イメージオブジェクトのURL
 * img.id  ... イメージオブジェクトのID
 * 
*/
function setLoadImage(id, url) {
	var no = loadImage.length;
	loadImage[no] = {};
	loadImage[no].id = id;
	loadImage[no].src = url;
}

function getLoadImage(id) {
	var length = loadImage.length;
	var no = -1;
	for (var i=0; i<length; i++) {
		if (loadImage[i].id == id) {
			no = i;
			break;
		}
	}
	if (no == -1) {
		return null;
	} else {
		return { "no": no, "obj": loadImage[no] };
	}
}

/*
 * マウスクリック時のポップアップイメージの表示処理
*/
function showImage(imgId) {

	// IE6 の場合はスクロールを無効にする
	if (isIE6) {
		$("body","html").css({
			"height": "100%", 
			"width": "100%"
		});
		$("html").css("overflow","hidden");
	}

	if (!obScreen) {
		obScreen = document.createElement("div");
		obScreen.id = SCREEN_ID;
		$("body").append(obScreen);
	}

	if (!obFrame) {
		obFrame = document.createElement("div");
		obFrame.id = FRAME_ID;
		$("body").append(obFrame);
	}

	var objImgInfo = getLoadImage(imgId);
	var imgNo = objImgInfo.no;

	var setImage = "<img id=\"" + imgId + "\" src=\"" + objImgInfo.obj.src + "\" class=\"PU_youto\" />";
	$("#" + FRAME_ID).append(setImage);

	var obYoutoImg = $("#" + imgId);
	obYoutoImg.load(function() {
		var width = parseInt(this.offsetWidth, 10);
		var height = parseInt(this.offsetHeight, 10);

		$("#" + FRAME_ID).css({
			"left": "50%",
			"top": "50%",
			"margin-left": - Math.floor(width / 2) + "px",
			"margin-top": - Math.floor(height / 2) + "px",
			"width": width + "px",
			"height": height + "px",
			"overflow": "hidden",
			"visibility": "visible"
		});
		if (isIE6) {
			// margin で位置を調整する
			var scrollTop = document.documentElement.scrollTop;
			$("#" + FRAME_ID).css({
				"position": "absolute",
				"margin-top": - Math.floor(height / 2) + scrollTop + "px"
			});
		}

		var setCloseBtn = "<a id=\"" + CLOSEBUTTON_ID + "\" href=\"#\">閉じる</a>";
		$("#" + FRAME_ID).append(setCloseBtn);

		$("#" + CLOSEBUTTON_ID).click(function() {
			removeImage(imgId);
//			closeImage(imgId);
			return false;
		});

		// イメージのフェードインを開始する
		loadImage[imgNo].fadeOpacity = 0;
		loadImage[imgNo].fadeTimer = setInterval(function() {
			fadeIn(imgNo);
		}, fadeSec);
	});

	// 背景部にクリックイベントを付加する
	$(obScreen).click(function() {
		removeImage(imgId);
//		closeImage(imgId);
	});
}


/*
 * マウスアウト時のポップアップイメージの表示処理
*/
function closeImage(imgId) {
	var objImgInfo = getLoadImage(imgId);
	if (!objImgInfo) {
		return false;
	}

	// 閉じるボタンを非表示にする
	$("#" + CLOSEBUTTON_ID).css("visibility", "hidden");


	var imgNo = objImgInfo.no;
	var objImg = objImgInfo.obj;

	var timer = loadImage[imgNo].fadeTimer;

	// 既にフェード処理中であれば、新しい処理は行わない
	if (!timer) {
		loadImage[imgNo].fadeOpacity = 100;
		loadImage[imgNo].fadeTimer = setInterval(function() {
			fadeOut(imgNo);
		}, fadeSec);
	}
}


function removeImage(imgId) {
	$(obScreen).unbind("click");
	$(obScreen).remove();
	obScreen = null;

	$("#" + imgId).remove();

	$("#" + CLOSEBUTTON_ID).unbind("click");

	$(obFrame).remove();
	obFrame = null;

	if (isIE6) {
		$("body","html").css({
			"height": "auto",
			"width": "auto"
		});
		$("html").css("overflow","");
	}
}

/*
 * イメージのフェードイン処理（タイマー使用）
*/
function fadeIn(imgNo) {
	var objImg = loadImage[imgNo];
	var imgId = objImg.id;
	var opacity = objImg.fadeOpacity;
	var isEnd = true;
	if (opacity < 100) {
		isEnd = false;
	} else {
		opacity = 100;
	}

	$("#" + imgId).css({
		"-moz-opacity": (opacity / 100) - .001,
		"opacity": (opacity / 100) - .001,
		"filter": "alpha(opacity=" + opacity + ")"
	});
	loadImage[imgNo].fadeOpacity = opacity + fadeOpacity;

	if (isEnd) {
		clearInterval(objImg.fadeTimer);
		loadImage[imgNo].fadeTimer = null;

		// 閉じるボタンを表示する
		$("#" + CLOSEBUTTON_ID).css("visibility", "visible");
	}
}

/*
 * イメージのフェードアウト処理（タイマー使用）
*/
function fadeOut(imgNo) {
	var objImg = loadImage[imgNo];
	var imgId = objImg.id;
	var opacity = objImg.fadeOpacity;
	var isEnd = true;
	if (fadeOpacity < opacity) {
		isEnd = false;
	} else {
		opacity = 0;
	}

	$("#" + imgId).css({
		"-moz-opacity": (opacity / 100) - .001,
		"opacity": (opacity / 100) - .001,
		"filter": "alpha(opacity=" + opacity + ")"
	});
	loadImage[imgNo].fadeOpacity = opacity - fadeOpacity;

	if (isEnd) {
		clearInterval(objImg.fadeTimer);
		loadImage[imgNo].fadeTimer = null;

		// 全てのポップアップ要素を取り除く
		removeImage(imgId);
	}
}