/* pamphletViewer
   2008/08/27 OATA ono
   ver 0.2
   「AJAX Webアプリケーションアイディアブック」より拝借した
   「wheel_resize.js」と「scaleefffect.js」を合成した。
   このままでは何なので、近いうちにprototype.jsを使ったものにしたい
   
   ver 0.25
   2009/04/14 ono
   若干の数値修正を施す
*/
//グローバル変数の定義
var top_dif;         // マウスポインタと画像のY座標の差分
var left_dif;        // マスポインタと画像のX座標の差分
var outframe_pos;    // 画像表示窓領域の座標格納オブジェクト

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

var image_width = 2000;  // 画像サイズ（幅）
//var image_height = 1445;  // 画像サイズ（高さ）2008
//var image_height = 1423;  // 画像サイズ（高さ）2009
var image_height = 1455;  // 画像サイズ（高さ）

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

var maximunNumber = 25; //最大のイメージ個数

// scaleeffect.jsより
function delBigImage(e) {
    if(document.getElementById('inframe')) {
        var bigimg = document.getElementById('inframe');
        bigimg.parentNode.removeChild(bigimg);
    }
}

// scaleeffect.jsより
function explodeImg(elem, startx, starty, startw, starth, endx, endy, endw, endh) {
    var x = startx;
    var y = starty;
    var w = startw;
    var h = starth;
    // エフェクト時間（ミリ秒）
    var period = 100;
    // エフェクト間隔（ミリ秒）
    var interval = 10;
    // 処理回数
    var times = Math.floor(period / interval)
    // 表示開始
    elem.style.left   = x + 'px';
    elem.style.top    = y + 'px';
    elem.width  = w + 'px';
    elem.height = h + 'px';
    elem.style.visibility = 'visible';
    // 処理回数カウンター
    var  n = 0;
    // タイマーオブジェクト
    var timer;
    // エフェクト処理の無名関数
    var funcRef = function() {
        // カウンターをインクリメント
        n ++;
        // 表示位置
        x += Math.floor( (endx - startx) / times );
        y += Math.floor( (endy - starty) / times );
        elem.style.left = x + 'px';
        elem.style.top  = y + 'px';
        // 表示サイズ
        w += Math.floor( (endw - startw) / times );
        h += Math.floor( (endh - starth) / times );
        elem.style.width  = w + 'px';
        elem.style.height = h + 'px';
        // カウンターの値を評価
        if(n >= times) {
            // 最終のサイズに調整
            elem.style.left   = endx + 'px';
            elem.style.top    = endy + 'px';
            elem.width  = endw + 'px';
            elem.height = endh + 'px';
            // タイマー解除
            clearInterval(timer);
        }
    }
    // タイマーセット
    timer = setInterval(funcRef, interval);
}

// scaleeffect.jsより
function dispBigImage(e) {
    // すでに表示されている画像を消去
    delBigImage();
    // クリックされたサムネイルの参照を取得
    var target_node = getTargetNode(e);
    // クリックされたサムネイルのid属性値を取得
    var id_value = target_node.id;
    /* 画像格納領域div要素(inframe)を再作成し、
    その中にimgタグをセット */
    inframe = document.createElement('div');
    inframe.width = image_width;
    inframe.height = image_height;
    inframe.id = 'inframe';
    outframe.appendChild(inframe);
    var bigimg = document.createElement('img');
    bigimg.id = 'img';
    bigimg.width = image_width/3;
    bigimg.height = image_height/3;
    inframe.appendChild(bigimg);

    // 一番上のサムネイルの左上端座標を取得
    var yado0 = document.getElementById('yado0');
    var yado0_pos = getElemPos(yado0);
    // クリックされたサムネイルの左上端座標を取得
    var pos = getElemPos(target_node);
    // クリックされたサムネイルのサイズを取得
    var width = target_node.width;
    var height = target_node.height;
    // アニメーション表示開始
    explodeImg(inframe, pos.x, pos.y, width, height, 0,0, (image_width / 2), (image_height / 2));
//    explodeImg(inframe, pos.x, pos.y, width, height, 0,0, 200, 144);
    // 画像を読み込む
    bigimg.src = './assets/images/yado_pamph/' + id_value + '.jpg';
}

//wheel_resize.jsより
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);
    }

    // ダブルクリック時には大きく拡大する
//alert(e.type);
    if(window.event && window.event.type=='dblclick') {
        re_w = Math.round(w * 1.5);
    } else if(e.type=='dblclick') {
        re_w = Math.round(w * 1.5);
    }
    if(window.event && window.event.type=='contextmenu') {
        re_w = Math.round(w * 0.7);
    } else if(e.type=='contextmenu') {
        re_w = Math.round(w * 0.7);
    }
    
    
    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;
}

//wheel_resize.jsより
// バブリングとデフォルトイベントアクションの停止
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;
    }
}

//wheel_resize.jsより
// ドラッグ開始
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;
}

//wheel_resize.jsより
// ドラッグ終了
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;
}

//wheel_resize.jsより
// ドラッグ中（子ウィンドウ移動）
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) {
//scaleeffectより
    var i;
    var elem = document.getElementById( 'yado0' );
    addListener(elem, 'click', dispBigImage, false);
    for(i=1; i<=maximunNumber; i=i+2) {
        var elem = document.getElementById( 'yado' + i );
        addListener(elem, 'click', dispBigImage, false);
    }


    // 画像表示窓領域と画像格納領域のdiv要素の参照をグローバル変数にセット
    outframe = document.getElementById('outframe');
    inframe = document.getElementById('inframe');
    // 画像格納領域div要素内にimgタグをセット
    var img = document.createElement('img');
    img.width = image_width/3;
    img.height = image_height/3;
    img.id = 'img';
    img.src = './assets/images/yado_pamph/yado0.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);
    // 画像表示窓領域div要素のマウスホイールイベントのリスナーをセット
    addMouseWheelListener(outframe, resizeImage, false);
    // 画像表示窓領域div要素にダブルクリックイベント、右クリックイベントをセット
    addListener(outframe, 'dblclick', resizeImage, false);
    addListener(outframe, 'contextmenu', 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);