// 
// prototype.jpを利用。
// 
// - ajaxToggleRequest
// displayの表示に応じてリクエストを制御する。
// 表示したタイミングでリクエストを行い、
// 閉じたタイミングでHTMLを空にする。
// 主に「on/off」を兼ねるスイッチボタンで利用し、
// 通常はElement.toggle/show([id])と併用する。※１
// 
// - ajaxToggleRequestOnce
// displayの表示に応じてリクエストを制御する。
// 表示したタイミングでリクエストを行い、
// その後の開閉はトグル制御のみ行う（非リクエスト）。
// 但しajaxGetRequestが行われる度に、
// ON/OFF情報は破棄されるので注意が必要。
// 
// - ajaxToggleReset
// displayの表示に応じてリクエストを制御する。
// 表示したタイミングでリクエストを行い、
// 閉じたタイミングでHTMLを空にする。
// 主に「閉じる」等の特定用途ボタンで利用し、
// 通常はElement.toggle/show([id])と併用する。※１
//
// - ajaxGetRequest
// リクエストのみ行う。
// フォーム名が引数に与えられている場合のみ、
// そのフォーム中の要素を連結しCGIに送信する。
// これにより 取得のみ / 送信して取得 の使い分けが可能。
// なおフォームに「id」指定が必須となる。
// 
// ※１
// 基本は「toggle」を利用し、
// 併せてajaxToggleResetにより中身をON/OFF（代入の有無）すれば問題ない。
// 
// 但し入れ子構造の際に少々コツが必要で、
// toggle/showの適切な使い分けが必要となる。
// 
// <input type="button" value="***" class="***" onClick="Element.show('parent'); ajaxToggleRequest('***', 'parent');">
// <div id="parent">
//    <input type="button" value="***" class="***" onClick="Element.toggle('child01'); ajaxToggleRequest('***', 'child01');">
//    <div id="child01">
//       TEST.
//    </div>
//    <div id="child02">
//    </div>
// </div>
// 
// 例えばボタン１のshowで「parent」を制御し表示させ、
// 続けてajaxToggleRequestで「child02」にデータを読み込むと仮定する。
// 次にparentを隠そうとした場合、showではidを対象としたOFFが不可能となるため、
// 単にajaxToggleRequestで「child02の中身を空にする」だけとなる。
// よって「child01」の内容は一度表示された後はそのままとなってしまう。
// 
// このような場合「parent」に対し「toggle」で制御しておけば、
// id自体を隠す事になるため問題なく制御可能となる。
// （同時にajaxToggleRequestでchild02の中身も空になる）
// 
// 次にボタン２の「toggle」で「child01」を制御しているが、
// 続けて「ajaxToggleRequest」で制御すると、何故かtoggleが効かなくなる（child01がONされない）。
// このような場合、この例では上記showによる問題点の範疇外となるため、
// （単一の内容のみ制御しているので、残ってしまう内容がない）
// 「show」で制御し「ajaxToggleRequest」にON/OFFを任せれば実現可能となる。
// 
// ==================================================
// 基本は「toggle」で、入れ子の中は「show」で制御。
// （toggleが使えるなら、その方が絶対に好ましい）
// これが基本っぽい。
// ==================================================
//
// またローディング演出はSafariでは正しく表示できないため
// 画面右上に表示を固定している。
//

dfFlag = new Array();	// 対象カラムのON/OFF状態
ocFlag = new Array();	// 対象カラムのON/OFF状態（ワンスモード）

//////////////////////////////////////////////////////////////////////
// トグルリクエスト（常にリクエストを行う）
//////////////////////////////////////////////////////////////////////
function ajaxToggleRequest (event, uriCGI, byId, formName, alertFlg) {

	// オープン ⇒ 初期ローディング
	if (!dfFlag[byId]) {
		ajaxGetRequest(event, uriCGI, byId, formName, alertFlg);
		dfFlag[byId] = 'on';

	// リセット処理 ⇒ クローズ
	} else {
		$(byId).innerHTML = '';
		dfFlag[byId] = '';

		// ローディング表示OFF
		$('_processStatus').style.visibility="hidden";

	}

}

//////////////////////////////////////////////////////////////////////
// トグルリクエストワンス（最初のみリクエスト、後はトグル制御のみ）
//////////////////////////////////////////////////////////////////////
function ajaxToggleRequestOnce (event, uriCGI, byId, formName, alertFlg) {

	// オープン ⇒ 初期ローディング
	if (!ocFlag[byId]) {
		ajaxGetRequest(event, uriCGI, byId, formName, alertFlg);
		ocFlag[byId] = 'on';

	// トグル表示処理
	} else {
		$(byId).toggle('byId');

		// ローディング表示OFF
		$('_processStatus').style.visibility="hidden";

	}

}

//////////////////////////////////////////////////////////////////////
// トグルリリセット（リセットして閉じるのみ行う）
//////////////////////////////////////////////////////////////////////
function ajaxToggleReset (event, byId) {

	// リセット処理 ⇒ クローズ
	$(byId).innerHTML = '';
	dfFlag[byId] = '';

	// ローディング表示OFF
	$('_processStatus').style.visibility="hidden";

}

//////////////////////////////////////////////////////////////////////
// リセット（eventは不要）
//////////////////////////////////////////////////////////////////////
function ajaxReset (byId) {

	// リセット処理 ⇒ クローズ
	$(byId).innerHTML = '';
	dfFlag[byId] = '';

	// ローディング表示OFF
	$('_processStatus').style.visibility="hidden";

}

//////////////////////////////////////////////////////////////////////
// 通常リクエスト
//////////////////////////////////////////////////////////////////////
function ajaxGetRequest (event, uriCGI, byId, formName, alertFlg) {

	// クリック座標取得
	if (!event) { event = window.event; }
	var mx, my;
	if (document.all) { // for IE
		mx = event.x;
		my = event.y;
	} else {
		mx = event.pageX;
		my = event.pageY;
	}

	// ウィンドウ表示位置調整
	mx -= 28;
	my -= 22;

	// Safari用強制調調整（右上に固定）
	if (navigator.userAgent.toUpperCase().indexOf("SAFARI") >= 0) {
		mx = innerWidth - (45 + 10);
		my = 0;
	}

	// ローディング表示ON
	$('_processStatus').style.visibility="visible";
	$('_processStatus').innerHTML = '<div class="status" style="top: ' + my + 'px; left: ' + mx + 'px;"><img src="/img/admin/loading.gif" width="13" height="13" border="0" vspace="1" alt="Loading..." /></div>';

	// 値の生成
	var sendData = 'byid=' + byId;
	if (formName) sendData += '&' + Form.serialize($(formName));

	// リクエスト
	var myAjax = new Ajax.Updater (
		byId,
		uriCGI, 
		{
			method: 'get', 
			parameters: sendData, 
			//onComplete: showResponse,
			onLoaded:   showLoaded,
			onFailure:  showFailure,
			evalScripts: true
		}
	);

	function showResponse (originalRequest) {
		$(byId).innerHTML = originalRequest.responseText;
	}

	function showLoaded (originalRequest) {
		if (alertFlg) {
			$('_processStatus').innerHTML = '<div class="status" style="top: ' + my + 'px; left: ' + mx + 'px;"><span class="size1">処理完了</span></div>';
			setTimeout("_clearStatus()", 900);
			_clearStatus = function resetStatus () {
				$('_processStatus').innerHTML = '';
				$('_processStatus').style.visibility="hidden";
			}
		} else {
			$('_processStatus').innerHTML = '';
			$('_processStatus').style.visibility="hidden";
		}
	}

	function showFailure (originalRequest) {
		$(byId).innerHTML = '<span class="size2" style="color: red;">データ読み込みに失敗しました。</span>';
	}

}

//////////////////////////////////////////////////////////////////////
// ロードのみ（座標取得＆処理経過表示なし）
//////////////////////////////////////////////////////////////////////
function ajaxLoader (uriCGI, byId, formName) {

	// 値の生成
	var sendData = 'byid=' + byId;
	if (formName) sendData += '&' + Form.serialize($(formName));

	// リクエスト
	var myAjax = new Ajax.Updater (
		byId,
		uriCGI, 
		{
			method: 'get', 
			parameters: sendData, 
			//onComplete: showResponse,
			onLoaded:   showLoaded,
			onFailure:  showFailure,
			evalScripts: true
		}
	);

	function showResponse (originalRequest) {
		$(byId).innerHTML = originalRequest.responseText;
	}

	function showLoaded (originalRequest) {
	}

	function showFailure (originalRequest) {
		$(byId).innerHTML = '<span class="size2" style="color: red;">データ読み込みに失敗しました。</span>';
	}

}