function delBigImage(e) {
    if(document.getElementById('bigimg')) {
        var bigimg = document.getElementById('bigimg');
        bigimg.parentNode.removeChild(bigimg);
    }
}

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

function dispBigImage(e) {
    // すでに表示されている画像を消去
    delBigImage();
    // クリックされたサムネイルの参照を取得
    var target_node = getTargetNode(e);
    // クリックされたムネイルのid属性値を取得
    var id_value = target_node.id;
    // imgタグを新規に生成
    var bigimg = document.createElement('img');
    bigimg.id = 'bigimg';
    // ドキュメントにimgタグを追加する
    document.body.appendChild(bigimg);
    // clickイベントのイベントリスナーをセット
    addListener(bigimg, 'click', delBigImage, false);
    // 一番上のサムネイルの左上端座標を取得
    var img1 = document.getElementById('img1');
    var img1_pos = getElemPos(img1);
    // クリックされたサムネイルの左上端座標を取得
    var pos = getElemPos(target_node);
    // クリックされたサムネイルのサイズを取得
    var width = target_node.width;
    var height = target_node.height;
    // アニメーション表示開始
    explodeImg(bigimg, pos.x, pos.y, width, height, img1_pos.x, img1_pos.y+150, 400, 564);
    // 画像を読み込む
    bigimg.src = 'images_m03/b_' + id_value + '.gif';
}

// 要素の位置を取得し、オブジェクトとして返す
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) {
    var i;
    for(i=1; i<=99; i++) {
        var elem = document.getElementById( 'img' + i );
        addListener(elem, 'click', dispBigImage, false);
    }
}

// イベントリスナー登録
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);