//グローバル変数の定義
var top_dif;         // マウスポインタと画像のY座標の差分
var left_dif;        // マスポインタと画像のX座標の差分
var outframe_pos;    // 画像表示窓領域の座標格納オブジェクト

var inframe;         // 画像格納領域のdiv要素
var outframe;        // 画像表示窓領域のdiv要素

var image_width = 1024;  // 画像サイズ（幅）
var image_height = 768;  // 画像サイズ（高さ）

var image_left_offset = -312;  // 最初に表示する画像の位置オフセット
var image_top_offset  = -234;  // 最初に表示する画像の位置オフセット

// バブリングとデフォルトイベントアクションの停止
function stopDefaultAndPropagation(e) {
    // バブリング停止
    if(e.stopPropagation) {
        e.stopPropagation();
    }
    if(window.event) {
        window.event.cancelBubble = true;
    }
    // デフォルトイベントアクションを停止する
    if(e.preventDefault) {
        e.preventDefault();
    }
    if(window.event) {
        window.event.returnValue = false;
    }
}

// ドラッグ開始
function dragStart(e) {
    // 画像表示窓領域div要素の座標を取得
    outframe_pos = getElemPos(outframe);
    // 画像格納領域div要素の座標を取得
    var pos = getElemPos(inframe);
    // 画像格納領域div要素とマウスポインターの位置の差分を求める
    left_dif = e.clientX - pos.x;
    top_dif = e.clientY - pos.y;
    // ドキュメント全体にイベントリスナーをセット
    addListener(document, 'mousemove', moveElem, false);
    addListener(document, 'mouseup', dragEnd, false);
    // バブリングとデフォルトイベントアクションの停止
    stopDefaultAndPropagation(e);
    return false;
}

// ドラッグ終了
function dragEnd(e) {
    if(e.preventDefault) e.preventDefault();
    // イベントリスナー解除
    removeListener(document, 'mousemove', moveElem, false);
    removeListener(document, 'mouseup', dragEnd, false);
    // マウスドラッグのフラグをfalseにセット
    dragging = false;
    // バブリングとデフォルトイベントアクションの停止
    stopDefaultAndPropagation(e);
    return false;
}

// ドラッグ中（子ウィンドウ移動）
function moveElem(e) {
    // マウスがブラウザー表示領域から外れたら終了
    if(
        (navigator.appName == 'Netscape' && navigator.userAgent.indexOf("Safari") < 0 ) ||
        navigator.userAgent.indexOf("Opera") >= 0
    ) {
        if(
            e.clientX >= window.innerWidth - 20 || e.clientX <= 10 ||
            e.clientY >= window.innerHeight - 30 || e.clientY <= 10
        ) {
            dragEnd(e);
            return false;
        }
    }
    // 画像格納領域div要素の移動
    inframe.style.left = (e.clientX - outframe_pos.x - left_dif) + 'px';
    inframe.style.top  = (e.clientY - outframe_pos.y - top_dif)  + 'px';
    // バブリングとデフォルトイベントアクションの停止
    stopDefaultAndPropagation(e);
    return false;
}

// 要素の位置を取得し、オブジェクトとして返す
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 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;
}

// load時の処理
function setListeners(e) {
    // 画像表示窓領域と画像格納領域のdiv要素の参照をグローバル変数にセット
    outframe = document.getElementById('outframe');
    inframe = document.getElementById('inframe');
    // 画像格納領域div要素内にimgタグをセット
    var img = document.createElement('img');
    img.width = image_width;
    img.height = image_height;
    img.id = 'img';
    img.src = 'images/big.jpg';
    inframe.appendChild(img);
    // 画像格納領域div要素の位置を調整
    inframe.style.left = image_left_offset + 'px';
    inframe.style.top  = image_top_offset  + 'px';
    // 画像表示窓領域div要素にmousedownイベントリスナーをセット
    addListener(outframe, 'mousedown', dragStart, 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時のイベントリスナーをセットする
addListener(window, 'load', setListeners, false);