//グローバル変数の定義

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

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

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

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

function resizeImage(e)
{
	
    // ホイール方向を調べる
	 
    var delta;
    if(window.event && window.event.wheelDelta)
	 {
       delta = window.event.wheelDelta;
    }
    else if(e.wheelDalta)
	 {
        delta = e.wheelDelta;
    }
	 else
	 {
        delta = e.detail;
        delta = delta * -1;
    }
	 
    // 画像のサイズを計算
	 
    var img = document.getElementById('img');
    var w = img.width;
    var h = img.height;
    var re_w;
    
	 if(delta > 0 && w > 590)
	 {
        re_w = Math.round(w - 80);
    }
	 else if(delta < 0)
	 {
        re_w = Math.round(w + 80);
    }
	 else
	 {
		 re_w = 590;
	 }
	 
  	 var re_h = Math.round(re_w * image_height / image_width);
	 
    // 画像表示位置を算出
	 
    outframe_pos = getElemPos(outframe);
    var inframe_pos = getElemPos(inframe);
    var mouse_x;
    var mouse_y;
    if(e.wheelDalta && e.clientX && e.clientY)
	 {
        mouse_x = e.clientX;
        mouse_y = e.clientY;
    }
	 else
	 {
        mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 );
        mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 );
    }
    var x_rate = Math.abs(mouse_x - inframe_pos.x) / w;
    var y_rate = Math.abs(mouse_y - inframe_pos.y) / h;
    var left_diff = mouse_x - Math.round( inframe_pos.x + ( re_w * x_rate ) );
    var top_diff  = mouse_y - Math.round( inframe_pos.y + ( re_h * y_rate ) );
    var now_left = parseInt(inframe.style.left);
    var now_top  = parseInt(inframe.style.top);
	 
    // 画像位置の移動
	 
    inframe.style.left = (now_left + left_diff) + 'px';
    inframe.style.top  = (now_top  + top_diff)  + 'px';
	 
    // 画像をリサイズ
	 
    img.width = re_w;
    img.height = re_h;
	 
    // バブリングとデフォルトイベントアクションの停止
	 
    stopDefaultAndPropagation(e);
    return false;
}

// バブリングとデフォルトイベントアクションの停止

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.id = 'img';
    img.src = imagefile;
    img.width = 590;
    img.height = 840;
	 
    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);
	 
    // 画像表示窓領域div要素のマウスホイールイベントのリスナーをセット
	 
    addMouseWheelListener(outframe, resizeImage, 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 addMouseWheelListener(elem, func, cap)
{
    if(elem.addEventListener)
	 {
        elem.addEventListener('DOMMouseScroll', func, cap); // FireFox用
        elem.addEventListener('mousewheel', func, cap);  // Safari用
    }
	 else if(elem.attachEvent)
	 {
        elem.attachEvent("onmousewheel", func);  // IE用
    }
}

// イベントリスナー登録

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);