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

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

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


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) {
re_w = Math.round(w * 0.9);
} else {
re_w = Math.round(w * 1.1);
}
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.width = image_width;
img.height = image_height;
img.id = 'img';
img.src = 'http://api.site-builder.jp/flyer_img.php?fid=55&type=b';
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);