// form_common.js
/*
* いまのところ、入力チェックを処理する関数のみ
* ★以下の前提がある
* 「お名前」欄のname属性は「name」
* 各input要素のノード構成は「tdタグ > pタグ > inputタグ」の構成
*/

// フォームエレメントを取得する変数を準備
var mailForm;

// チェック項目を登録する配列を準備
var checkDiv1 = new Array();	// text系input（id属性値を登録）
var checkDiv2 = new Array();	// ラジオボックス系（name属性値を登録）
var checkDiv3 = new Array();	// セレクト系（id属性を登録）
var checkDiv4 = new Array();	// チェックボックス系（「_」付きnameと項目数、エラーチェックの有無、をセットで多重配列で登録）
/*
* ★チェックボックスの処理には条件がある。
* HTML側：チェックボックスはまとめて「pタグ」の中に収めておく。エラー表示のエフェクトはこのpタグにかける。
* HTML側：name属性は「_○○1」「_○○2」とつける。（冒頭にアンダーバー「_」、末尾は半角数字で「1」から連番。例「_連絡手段1」「_連絡手段2」
* HTML側：チェックボックス郡の後ろにhidden属性のinputタグを準備。このname属性は「_」を取り除いた名前を指定。例「連絡手段」
* チェックされた項目の値を、このhidden属性のvalue値にまとめて整形して格納する仕様。
* よって、チェックボックスの値自体は送信させない。送信先のCGIスクリプトにて頭に「_」が付いたkeyデータは破棄するように組むこと。
* チェック項目を収める配列「checkDiv4」には多重配列にて「name属性,項目数,エラーチェックの有無」を格納。※nameには「_」を付けた名前で指定。例「[['_連絡手段',3,1]]」（エラーチェックをかける）
* 入力チェックエラーの際、エラー項目を配列変数「errDivName2」に格納。
*/

// エラー項目を登録する配列、フラグ変数を準備
var errDivId = new Array();		// id属性の項目を格納する変数
var errDivName = new Array();		// name属性の項目を格納する変数
var errDivName2 = new Array();		// name属性の項目を格納する変数2(チェックボックス用）)
var flag = false;

// ページロード時の初期処理をイベント登録
Event.observe(window, 'load', init);

//--------------------------------------------------
// 初期処理
//--------------------------------------------------
function init() {
	// フォームエレメントを取得
	mailForm = document.forms[0];
	
	// 送信ボタンのイベント登録
	/* ここは各HTML内で設定
	//Event.observe('btnSubmit', 'click', formCheck);
	
	// チェックする項目をタイプ別に配列に登録
	/* ここは各HTML内で設定
	checkDiv1 = ['name','Email'];
	*/
	
	// フォームのデザイン
	// ※エラー表示エフェクトのため背景に色をつけると立体的表示になってしまう（IE）のを対策
	$$("input[type='text']").each(function(ele){
			ele.style.border = 'solid 1px #7f9db9';
			ele.style.backgrounColor = '#ffffff';
		});
	$$("textarea").each(function(ele){
			ele.style.border = 'solid 1px #7f9db9';
			ele.style.backgrounColor = '#ffffff';
		});
	$$("select").each(function(ele){
			ele.style.border = 'solid 1px #7f9db9';
			ele.style.backgrounColor = '#ffffff';
		});
}

//--------------------------------------------------
// チェック関数（メイン）
//--------------------------------------------------
function formCheck() {
	// エラー表示DIVノードの取得
	var reportDiv = $('errReport');
	
	// 既にエラー表示されている場合はリセット
	if (flag) {
		// フラグリセット
		flag = !flag;
		//エラーエフェクトをリセット
		errDivEffect('off');
		// エラー表示をオフ
		reportDiv.style.display = 'none';
	}
	
	// 各変数の準備
	var errMess = '';	// エラーの項目を蓄積させる変数
	var element;
	var i;
	
	// ■チェックその１: [type=text]系
	for (i = 0; i<checkDiv1.length; i++) {
		element = $(checkDiv1[i]);
		if (element.value == '') {
			// エラーメッセージを追加格納
			errMess += '<li>' + element.name + '</li>';
			// エラー項目を格納
			errDivId.push(checkDiv1[i]);
		}
	}
	
	// ■チェックその２: ラジオボックス系
	for (i = 0; i<checkDiv2.length; i++) {
		if (!inputCheck2(checkDiv2[i])) {
			errMess += '<li>' + checkDiv2[i] + '</li>';
			errDivName.push(checkDiv2[i]);
		}
	}
	
	// ■チェックその３: セレクト系
	for (i = 0; i<checkDiv3.length; i++) {
		element = $(checkDiv3[i]);
		if (element.selectedIndex <= 0) {
			errMess += '<li>' + element.name + '</li>';
			// エラー項目を格納
			errDivId.push(checkDiv3[i]);
		}
	}
	
	// ■チェックその４: チェックボックス系
	for (i = 0; i<checkDiv4.length; i++) {
		// エラーがあれば関数からは整形済みエラーメッセージを返す
		// エラー処理とは別にチェックボックス値は統合される
		errMess += inputCheck4(checkDiv4[i]);
	}
	
	// ■Emailのチェック
	//errMess += emailCheck($('Email').value, $('Email2').value);
	
	// ■エラーメッセージ整形
	//errMess = errMess.replace(/name/i, 'お名前');
	
	// ■最後に、エラーがあればエラー表示、無ければフォーム送信
	if(errMess){
		// エラーレポートの作成・表示
		var mess = '<h3>ご記入もれ等、入力エラーがございます</h3><div id="errMessBox">';
		mess += '<p>以下の項目をご確認の上、再度「フォーム送信」ボタンをクリックしてください。</p>';
		mess += '<ul>' + errMess + '</ul></div>';
		reportDiv.innerHTML = mess;
		reportDiv.style.display = 'block';
		// エラー窓にエフェクトをかける（エラーチェック結果が同じだった場合に何も表現しないと処理されたどうか見た目にわからないため変化をつける）
		//reportDiv.visualEffect("Pulsate", {duration:2});
		reportDiv.visualEffect("Highlight", {startcolor:"#ff9999", endcolor:"#fff399", restorecolor:"#fff3f3"});
		//エラーフォームエフェクト関数実行
		errDivEffect('on');
		// エラーチェックフラグをON
		flag = true;
		// コール元へfalseを返す
		return false;
	}else{
		flag = false;
		reportDiv.style.display = 'none';
		reportDiv.innerHTML = '';
		// コール元へtrueを返す
		return true;
	}
}

//--------------------------------------------------
// ラジオボックス系のチェック
//--------------------------------------------------
// ※チェックされた数を返す関数
function inputCheck2(checkDiv) {
	// ラジオボタン名でアクセスして要素を取得
	var element = mailForm[checkDiv];
	// 要素数ごとにチェックの有無を確認してカウント
	var cnt = 0;
	for (var j = 0; j<element.length; j++) {
		if (element[j].checked) cnt++;
	}
	return cnt;
}

//--------------------------------------------------
// チェックボックス系のチェック
//--------------------------------------------------
/*
* checkDivの3フィールド目のフラグでエラーチェックの有無を確認（0: チェックなし、1:チェックする）
* チェックされたボックスの値を一つにまとめる送信用パーツにセット
*/
function inputCheck4(checkDiv) {
	// ※この引数「checkDiv」は配列。⇒[名前,項目数,エラーチェックの有無]
	var chk = checkDiv[2];
	var element;
	var cnt = 0;
	var myValue = '';
	for (var i = 1; i<=checkDiv[1]; i++){
		// 各項目ずつ…「名前1, 名前2, ...」
		element = mailForm[(checkDiv[0])+i];
		//alert(element.name+'→'+element.value+'→'+element.checked);
		if (element.checked) {
			// チェックされていればカウントアップ
			cnt++;
			// value値を合成していく
			//myValue += '[' + element.value + ']' + '　';
			myValue += '⇒ ' + element.value + '\n';
		}
	}
	// カウント値=0ならばエラー（チェック無用なら処理をパス）
	if ((cnt <= 0) && chk) {
		// チェック数合計が「0」ならエラーリスト登録とエラーメッセージを返す
		errDivName2.push(checkDiv[0]);
		// 名前は冒頭の「_」を削除して表示
		return '<li>' + checkDiv[0].substr(1) + '</li>';
	}
	
	// エラーなし、もしくはエラーチェック不要の場合、合成したvalue値を送信用の部品にvalue値をセット
	if (myValue == '') myValue = '（該当なし）'
	var t = checkDiv[0].substring(1);
	mailForm[t].value = myValue;
	return '';
}

//--------------------------------------------------
// Emailのチェック
//--------------------------------------------------
// ※チェックは順に上から一つずつ。エラー全てを返さない仕様。
function emailCheck(a,b) {
	// Email欄2つとも入力されてなければリターン（未入力エラーは上位レベルの別チェック）
	if (!a || !b) return '';
	
	// Eメール書式チェック（カンマ）
	if (a.match(/,/)) {
		return '<li>メールアドレスにカンマ「,」が含まれています</li>';
	}
	// Eメールの書式チェック
	var reg = /^[A-Za-z0-9]+[\w\.-]+@[\w\.-]+\.\w{2,}$/;
	// [参考] http://www.ksknet.net/javascript/post_76.html ※ローカル部で「ピリオド」が使用できるように変更した
	if (!a.match(reg)) {
		return '<li>Emailの書式をご確認ください、もしくは扱えないアドレスです</li>';
	}
	// 入力値を比較。
	if (a != b) {
		return '<li>Emailの２つの欄に食い違いがあります</li>';
	}
	// ここまで通るとエラー無し
	return '';
}

//--------------------------------------------------
// エラー項目のエフェクト処理
//--------------------------------------------------
function errDivEffect(sw) {
	switch(sw){
		case 'on':
			// エラー項目（id属性）にエフェクトかける
			for (var i = 0; i<errDivId.length; i++) {
				$(errDivId[i]).style.backgroundColor = '#fff3f3';
			}
			// エラー項目（name属性）にエフェクト
			for (i = 0; i<errDivName.length; i++) {
				// name属性の要素を取得（ノードリスト）
				var element = mailForm[errDivName[i]];
				// 要素（ノードリスト）の一つを指定して、その親であるpタグに対してエフェクトをかける
				element[0].parentNode.style.backgroundColor = '#fff3f3';
			}
			// エラー項目（name属性：チェックボックス系）にエフェクト
			for (i = 0; i<errDivName2.length; i++) {
				// チェックボックスの先頭ノードを一つ取得
				var element = mailForm[(errDivName2[i])+1];
				// 要素の親であるpタグに対してエフェクトをかける
				element.parentNode.style.backgroundColor = '#fff3f3';
			}
			break;
		case 'off':
			// エラー項目（id属性）のエフェクト解除
			for (var i = 0; i<errDivId.length; i++) {
				$(errDivId[i]).style.backgroundColor = '#ffffff';
			}
			errDivId = [];		// 格納配列リセット
			// エラー項目（name属性）のエフェクト解除
			for (i = 0; i<errDivName.length; i++) {
				// name属性の要素を取得（ノードリスト）
				var element = mailForm[errDivName[i]];
				// 要素（ノードリスト）の一つを指定して、その親であるpタグに対してエフェクトをかける
				element[0].parentNode.style.backgroundColor = '#ffffff';
			}
			errDivName = [];	// 格納配列リセット
			for (i = 0; i<errDivName2.length; i++) {
				// チェックボックスの先頭ノードを一つ取得
				var element = mailForm[(errDivName2[i])+1];
				// 要素の親であるpタグに対してエフェクトをかける
				element.parentNode.style.backgroundColor = '#ffffff';
			}
			errDivName2 = [];	// 格納配列をリセット
			break;
	}
}