//グローバル変数の定義
var httpObj;               // HTTP通信用オブジェクト
var timerId;               // HTTP通信用タイマーオブジェクト
var timeout_sec = 10;      // HTTP通信タイムアウト秒数
var code_list = new Array();  // 商品コードを格納する配列
var item_list = new Array();  // 商品名を格納する配列

function highlightMenu(e) {
    // 対象要素の参照を取得
    var target_node = getTargetNode(e);
    // ハイライト表示
    target_node.style.backgroundColor = '#ffffff';
    target_node.style.color = '#00bb00';
}

function lowlightMenu(e) {
    // 対象要素の参照を取得
    var target_node = getTargetNode(e);
    // ダウンライト表示
    target_node.style.backgroundColor = '#dddddd';
    target_node.style.color = '#000000';
}

function callMenu(e) {
    // ドロップダウンリストを削除
    eliminateDropdownList();
    // 対象要素の参照を取得
    var target_node = getTargetNode(e);
    // 対象要素のid属性値を取得
    var target_node_id = target_node.id;
    // 値をテキストボックスにセット
    document.getElementById('code').value = code_list[target_node_id];
    document.getElementById('item').value = item_list[target_node_id];
}

// ドロップダウンリストを削除
function eliminateDropdownList() {
    if( document.getElementById('dropframe') ) {
        var dropframe = document.getElementById('dropframe');
        dropframe.parentNode.removeChild(dropframe);
    }
}

function getTargetNode(e) {
    // 対象要素の参照を取得
    var target_node;
    if(e.target) {
      target_node = e.target;
    } else {
      target_node = e.srcElement;
    }
    // Safari対策
    if (target_node.nodeType == 3) {
        target_node = target_node.parentNode;
    }
    return target_node;
}

// 要素の位置を取得し、オブジェクトとして返す
function getElemPos(elem) {
    var obj = new Object();
    obj.x = elem.offsetLeft;
    obj.y = elem.offsetTop;
    while(elem.offsetParent) {
       elem = elem.offsetParent;
       obj.x += elem.offsetLeft;
       obj.y += elem.offsetTop;
    }
    return obj;
}

// ドロップダウンリストを生成
function generateDropdownList(text_data) {
    // 受信したテキストデータを行ごとに配列に格納する
    var lines = text_data.split("\n");
    // 項目を追加
    var dropframe = document.createElement('div');
    dropframe.id = 'dropframe';
    for(i=0; i<lines.length; i++) {
        if(lines[i] == '') {
            break;
        }
        var parts = lines[i].split(",");
        var code = parts[0];
        var item = parts[1];
        // id属性値
        var id_value = 'c' + i;
        // 配列にデータを蓄積
        code_list[id_value] = code;
        item_list[id_value] = item;
        // divタグを生成
        var child_div = document.createElement('div');
        // divタグにid属性を追加
        child_div.id = id_value;
        // divタグのテキストノードを新規に生成する
        var caption = document.createTextNode('[' + code + '] ' + item);
        // 生成したテキストノードをdivタグノードの子ノードとして結合する
        child_div.appendChild(caption);
        // divタグを追加する。
        dropframe.appendChild(child_div);
        // divタグにイベントリスナーをセット
        addListener(child_div, 'mouseover', highlightMenu, false);
        addListener(child_div, 'mouseout', lowlightMenu, false);
        addListener(child_div, 'mouseup', callMenu, false);
     }
     // ドロップダウンメニューを表示
     var code_elem = document.getElementById('code');
     var pos_obj = getElemPos(code_elem);
     pos_obj.y += document.getElementById('code').offsetHeight;
     dropframe.style.left = pos_obj.x + 'px';
     dropframe.style.top = pos_obj.y + 'px';
     document.body.appendChild(dropframe);
}

// テキストの内容をドロップダウンリストとして表示
function printItemList() {
    // ドロップダウンリストを削除
    eliminateDropdownList();
    // 商品コードの入力文字を取得
    var in_code = document.getElementById('code').value;
    var target_url;
    if(in_code == 'a' || in_code == 'b' || in_code == 'c') {
        target_url = in_code + '.txt';
        // HTTP通信を開始し、完了したら上記関数を実行させる
        httpRequest(target_url, generateDropdownList);
    }
}

// 引数に与えられたURLにHTTPリクエストを行ない、指定された関数を実行
function httpRequest(target_url, 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("GET", 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('');
}

// XMLHttpRequestオブジェクト生成に失敗した場合の処理
function httpObjGenerateFail() {
    alert('ご利用のブラウザーでは、当サイトをご利用頂けません。');
    return false;
}
// HTTPタイムアウト処理
function timeoutCheck() {
    timeout_sec --;
    if(timeout_sec <= 0) {
        // タイマーをストップする
        clearInterval(timerId);
        // HTTPリクエストを中断する
        httpObj.abort();
        // エラーダイアログを表示
        alert('タイムアウトです。');
        return false;
    }
}

// イベントリスナーをセットする
function setListeners(e) {
    var code = document.getElementById('code');
    addListener(code, 'keyup', printItemList, 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);