//グローバル変数の定義
var httpObj;               // HTTP通信用オブジェクト
var timerId;               // HTTP通信用タイマーオブジェクト
var timeout_sec = 10;      // HTTP通信タイムアウト秒数

// サーバから受信したデータを表示
function printResData(text_data) {
    // 受信したテキストデータを行ごとに配列に格納する
    var lines = text_data.split("\n");
    // 入力ボックスの色を初期化する
    var yourname = document.getElementById('yourname');
    yourname.style.backgroundColor = '#ffffff';
    var age = document.getElementById('age');
    age.style.backgroundColor = '#ffffff';
    // エラーメッセージを消去する
    document.getElementById('e_yourname').innerHTML = '';
    document.getElementById('e_age').innerHTML = '';
    // OKかNGかを読み取る
    var result = lines.shift();
    // 結果ごとの処理
    if(result == 'NG') {
        for(i = 0; i < lines.length; i ++) {
            var parts = lines[i].split("\t");
            var name = parts[0];
            var value = parts[1];
            if(name != 'yourname' && name != 'age') {
                continue;
            }
            var elem = document.getElementById(name);
            // フォーカスをあてる
            if(i == 0) {
                elem.focus();
            }
            // 入力ボックスを赤色でハイライトする
            elem.style.backgroundColor = '#ffaaaa';
            // エラーメッセージを表示
            var error_area = document.getElementById('e_' + name);
            error_area.innerHTML = value;
        }
    } else if(result == 'OK') {
        // ページリダイレクト
        document.location.href = 'http://www.google.co.jp/';
        return;
    }
    // 送信ボタンを有効にする
    document.getElementById('sendBtn').disabled = false;
}

// フォームデータをPOSTメソッドでCGIに送信する
function postData(e) {
    // 送信ボタンを無効にする
    document.getElementById('sendBtn').disabled = true;
    // フォーム入力値を取得
    var yourname = document.getElementById('yourname').value;
    var age      = document.getElementById('age').value;
    // POST用データに変換
    var post_data;
    post_data = 'yourname=' + encodeURIComponent(yourname) +
                '&age=' + encodeURIComponent(age);
    // POST先のCGIのURL
    var target_url = 'post2.cgi';
    // HTTP通信を開始し、完了したらprintResData関数を実行させる
    httpPostRequest(target_url, post_data, printResData);
}

// 引数に与えられたURLにHTTPリクエストを行ない、指定された関数を実行
function httpPostRequest(target_url, post_data, funcitonReference) {
    try {
        if(window.XMLHttpRequest) {
            httpObj = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            httpObj = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            httpObj = false;
        }
    } catch(e) {
        httpObj = false;
    }
    if(! httpObj) {
        httpObjGenerateFail();
    }
    // タイマーをセット
    timerId = setInterval('timeoutCheck()', 1000);

    httpObj.open("POST", target_url, true);
    httpObj.onreadystatechange = function() {
        if (httpObj.readyState == 4) {
            clearInterval(timerId);
            if (httpObj.status == 200) {
                funcitonReference(httpObj.responseText);
            } else {
                alert(httpObj.status + ' : ' + httpObj.statusText);
                return false;
            }
        }
    }
    httpObj.send(post_data);
}

// XMLHttpRequestオブジェクト生成に失敗した場合の処理
function httpObjGenerateFail() {
    alert('ご利用のブラウザーでは、当サイトをご利用頂けません。');
    return false;
}

// HTTPタイムアウト処理
function timeoutCheck() {
    timeout_sec --;
    if(timeout_sec <= 0) {
        // タイマーをストップする
        clearInterval(timerId);
        // HTTPリクエストを中断する
        httpObj.abort();
        // エラーダイアログを表示
        alert('タイムアウトです。');
        return false;
    }
}

// load時の処理
function setListeners(e) {
    var sendBtn = document.getElementById('sendBtn');
    addListener(sendBtn, 'click', postData, false);
}

// イベントリスナー登録
function addListener(elem, eventType, func, cap) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, func, cap);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + eventType, func);
    } else {
        alert('ご利用のブラウザーはサポートされていません。');
        return false;
    }
}

// load時のイベントリスナーをセットする
addListener(window, 'load', setListeners, false);