//グローバル変数の定義
var httpObj;               // HTTP通信用オブジェクト
var timerId;               // HTTP通信用タイマーオブジェクト
var timeout_sec = 10;      // HTTP通信タイムアウト秒数
var fadeout_opacity = 70;  // 子ウィンドウの不透明度初期値
var fadeout_timer;         // 子ウィンドウフェードアウト用タイマーオブジェクト
var board_top_dif;         // マウスポインタと子ウィンドウのY座標の差分
var board_left_dif;        // マスポインタと子ウィンドウのX座標の差分

// ドラッグ開始
function dragStart(e) {
    // 子ウィンドウとマウスポインターの位置の差分を求める
    var board = document.getElementById('board');
    board_left_dif = e.clientX - parseInt(board.style.left);
    board_top_dif = e.clientY - parseInt(board.style.top);
    // イベントリスナーを"bar"にセット
    var bar = document.getElementById('bar');
    addListener(bar, 'mousemove', moveChildWindow, false);
    addListener(bar, 'mouseup', dragEnd, false);
    addListener(bar, 'mouseout', dragEnd, false);
}

// ドラッグ終了
function dragEnd(e) {
    // "bar"にセットされたイベントリスナーを解除
    var bar = document.getElementById('bar');
    removeListener(bar, 'mousemove', moveChildWindow, false);
    removeListener(bar, 'mouseup', dragEnd, false);
    removeListener(bar, 'mouseout', dragEnd, false);
}

// ドラッグ中（子ウィンドウ移動）
function moveChildWindow(e) {
    var board = document.getElementById('board');
    board.style.left = (e.clientX - board_left_dif) + 'px';
    board.style.top = (e.clientY - board_top_dif) + 'px';
}

// 子ウィンドウを閉じる
function closeChildWindow() {
    var board = document.getElementById('board');
    var ua = navigator.userAgent;
    if(ua.indexOf("Opera") >= 0) {
        board.style.visibility = 'hidden';
        return;
    }
    var func_ref = function() {
        fadeout_opacity = fadeout_opacity - 10;
        if(fadeout_opacity <= 0) {
            clearInterval(fadeout_timer);
            board.style.visibility = 'hidden';
            fadeout_opacity = 70;
        }
        board.style.filter = 'alpha(opacity=' + fadeout_opacity + ')';  // Internet Explorer用
        var non_ie_opacity = fadeout_opacity / 100;
        board.style.mozOpacity = non_ie_opacity;              // FireFox用
        board.style.opacity = non_ie_opacity;                 // Safari用
    };
    fadeout_timer = setInterval(func_ref, 100);
}

// 子ウィンドウを開く
function openChildWindow(e) {
    var board = document.getElementById('board');
    board.style.left = e.clientX + 'px';
    board.style.top = e.clientY + 'px';
    board.style.visibility = 'visible';

    // チェックされたリンクのid属性値を取得
    var target_node;
    if(e.target) {
      target_node = e.target;
    } else if(e.srcElement) {
      target_node = e.srcElement;
    }
    // Safari対策
    if (target_node.nodeType == 3) {
        target_node = target_node.parentNode;
    }
    var checked_link = target_node.id;
    // テキストファイルのURLを定義
    var target_url;
    if(checked_link == 'tokyo') {
        target_url = 'content1.txt';
    } else if(checked_link == 'nagoya') {
        target_url = 'content2.txt';
    } else if(checked_link == 'osaka') {
        target_url = 'content3.txt';
    }

    // 処理を実行するための関数リファレンスを定義
    var funcRef = function(text_data) {
        var content = document.getElementById('content');
        content.innerHTML = text_data;
        // 透明度を変更する
        board.style.filter = 'alpha(opacity=70)';  // Internet Explorer用
        board.style.mozOpacity = 0.7;              // FireFox用
        board.style.opacity = 0.7;                 // Safari用
    }
    // HTTP通信を開始し、完了したら上記関数を実行させる
    httpRequest(target_url, funcRef);
}

// 引数に与えられた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 removeListener(elem, eventType, func, cap) {
    if(elem.removeEventListener) {
        elem.removeEventListener(eventType, func, cap);
    } else if(elem.detachEvent) {
        elem.detachEvent('on' + eventType, func);
    }
}

// イベントリスナー登録
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時のイベントリスナーをセットする
function setListeners(e) {
    var tokyo = document.getElementById('tokyo');
    addListener(tokyo, 'click', openChildWindow, false);
    var nagoya = document.getElementById('nagoya');
    addListener(nagoya, 'click', openChildWindow, false);
    var osaka = document.getElementById('osaka');
    addListener(osaka, 'click', openChildWindow, false);
    var close = document.getElementById('close');
    addListener(close, 'click', closeChildWindow, false);
    var bar = document.getElementById('bar');
    addListener(bar, 'mousedown', dragStart, false);
}

// HTMLがロードされた際に、setListeners()関数を実行させる
addListener(window, 'load', setListeners, false);