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 = 12;
    // 処理回数
    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';
    bigimg.name = id_value;
    // ドキュメントにimgタグを追加する
    document.body.appendChild(bigimg);
    // clickイベントのイベントリスナーをセット
    addListener(bigimg, 'click', jump2link, false);
    addListener(bigimg, 'mouseout',delBigImage, false);
    // クリックされたサムネイルの左上端座標を取得
    var pos = getElemPos(target_node);
    // クリックされたサムネイルのサイズを取得
    var width = target_node.width;
    var height = target_node.height;
    // アニメーション表示開始
    explodeImg(bigimg, pos.x, pos.y, width, height, pos.x-10, pos.y-5, 60, 60);
    // 画像を読み込む
    bigimg.src = './img/top/' + id_value + '_b.gif';
//    setTimeout("delBigImage()",500);

}

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

function jump2link(e) {
    // クリックされたサムネイルの参照を取得
    var target_node = getTargetNode(e);
    // クリックされたサムネイルのid属性値を取得
    var id_value = target_node.id;
    if (id_value=='bigimg'){
	// クリックされたサムネイルのname属性値を取得
	id_value  = target_node.name;
    }
    if (id_value=='menu0'){
		location.href=menu0link;
    }
    if (id_value=='menu1'){
		location.href=menu1link;
    }
    if (id_value=='menu2'){
		location.href=menu2link;
    }
}


// load時の処理
function setListeners(e) {
    var i;
    for(i=0;i<=2;i++){
	  if(document.getElementById( 'menu' + i )){
		var elem = document.getElementById( 'menu' + i );
		addListener(elem, 'mouseover', dispBigImage, false);
		addListener(elem, 'click', jump2link, false);
		var imgpre = new Image();
		imgpre.src = '/img/top/menu' + i + '_b.gif';
	  }
    }
}

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