function delBox(){
	for(i=1; i<=30; i++) {
		if( i <= 9 ){
			var setimage = 'box_00'+i;
		}else{
			var setimage = 'box_0'+i;
		}
		if( document.getElementById( setimage ) ) {
			document.getElementById( setimage ).style.visibility = 'hidden';	
		}
	}
	
}


function showImage(e){
	var target_node = getTargetNode(e);
    var id_value = target_node.id;
	
	var img1 = document.getElementById(id_value);
   	var img1_pos = getElemPos(img1);

	var text = img1.alt;
	var num = text.length;
	var tx = 22-(num*6);

	var x = img1_pos.x+tx;
	var y = img1_pos.y-17;

	var settext = document.getElementById("message");
	settext.style.visibility = 'visible';
	settext.style.left = x + 'px';
	settext.style.top = y + 'px';
	settext.innerHTML = text;

	img1.style.filter = "alpha(opacity: 50)";  // IE のソース
	img1.style.opacity = 0.5; // その他
}

function delImage(e){
	var target_node = getTargetNode(e);
    var id_value = target_node.id;

	var settext = document.getElementById("message");
	settext.style.visibility = 'hidden';

	var img1 = document.getElementById(id_value);
	img1.style.filter = "alpha(opacity: 100)";  // IE のソース
	img1.style.opacity = 1; // その他
}

function setImage(e){
	delBox();
	var target_node = getTargetNode(e);
    var id_value = target_node.id;

	var main_box = document.getElementById( 'box_'+id_value );
	var img1 = document.getElementById( 'box_001' );
   	var img1_pos = getElemPos(img1);

	var x = img1_pos.x;
	var y = img1_pos.y;

	main_box.style.left = x + 'px';
	main_box.style.top = y + 'px';
	main_box.style.visibility = 'visible';
}

function getTargetNode(e) {
    var target_node;
    if(e.target) {
      target_node = e.target;
    } else {
      target_node = e.srcElement;
    }

	if (target_node.nodeType == 3) {
        target_node = target_node.parentNode;
    }
    return target_node;
}

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 setListeners(e) {
	for(i=1; i<=30; i++) {
		if( i <= 9 ){
			var setimage = '00'+i;
		}else{
			var setimage = '0'+i;
		}
		if( document.getElementById( setimage ) ) {
			var elem = document.getElementById( setimage );
		}
		addListener(elem, 'mouseover', showImage, false);
		addListener(elem, 'mouseout', delImage, false);
		addListener(elem, 'click', setImage, 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;
    }
}

addListener(window, 'load', setListeners, false);