var mouseX = 0;
var mouseY = 0;
new Image().src = 'http://pg1.joa.ne.jp/images/loading.gif';

if (document.all) {
	document.onmousemove = iMouse;
}
else if ( document.implementation) {
	window.captureEvents(Event.MOUSEMOVE);
	window.onmousemove = nMouse;
}
function iMouse() {
	var scrolX = (document.compatMode == "CSS1Compat")?
				document.documentElement.scrollLeft: document.body.scrollLeft;;
	var scrolY = (document.compatMode == "CSS1Compat")?
				document.documentElement.scrollTop: document.body.scrollTop;;
	mouseX = event.x + scrolX;
	mouseY = event.y + scrolY;
}
function nMouse(e) {
	mouseX = e.pageX;
	mouseY = e.pageY;
}

function popupImage(filepath){
	if (popupImage.frameNode) closeImage();
	popupImage.frameNode = document.createElement('span');
	
    if (document.all) {
		popupImage.scrolX = (document.compatMode == "CSS1Compat")?
				document.documentElement.scrollLeft: document.body.scrollLeft;;
		popupImage.scrolY = (document.compatMode == "CSS1Compat")?
				document.documentElement.scrollTop: document.body.scrollTop;;
		popupImage.browsW = (document.compatMode == "CSS1Compat")?
				document.documentElement.clientWidth : document.body.clientWidth;
		popupImage.browsH = (document.compatMode == "CSS1Compat")?
				document.documentElement.clientHeight : document.body.clientHeight;
		popupImage.x = mouseX;
		popupImage.y = mouseY;
		popupImage.frameNode.onclick = closeImage;
    } else if( document.implementation) {
		popupImage.scrolX = window.pageXOffset;
		popupImage.scrolY = window.pageYOffset;
		popupImage.browsW = innerWidth;
		popupImage.browsH = innerHeight;
		popupImage.x = mouseX;
		popupImage.y = mouseY;
		popupImage.frameNode.addEventListener('click' ,closeImage , true);
    } else {
        return false;
    }

	popupImage.frameNode.style.position = 'absolute';
	popupImage.frameNode.style.left = (popupImage.x-42) + 'px';
	popupImage.frameNode.style.top = (popupImage.y-10) + 'px';
		popupImage.frameNode.style.borderColor = '#555555';
		popupImage.frameNode.style.borderWidth = '1px';
		popupImage.frameNode.style.borderStyle = 'solid';
		popupImage.frameNode.style.backgroundColor = '#f4f4f4';
		popupImage.frameNode.style.padding = '7px';
	popupImage.frameNode.style.margin = '0px';
	
	// Now Loading...
	popupImage.frameNode.innerHTML = '<img src="http://pg1.joa.ne.jp/images/loading.gif">';
	
	document.body.appendChild(popupImage.frameNode);
	
	popupImage.real = new Image();
	popupImage.real.onload = loadImage;
	popupImage.real.src = filepath;

    function loadImage() {
		closeImage();
		popupImage.frameNode = document.createElement('span');
		popupImage.imgNode = document.createElement('img');
		popupImage.imgNode.setAttribute('src', popupImage.real.src);
		if (document.all) {
			popupImage.frameNode.onclick = closeImage;
			popupImage.frameNode.onmouseout = mouseOut;
			popupImage.frameNode.onmouseover = mouseOver;
		} else if( document.implementation) {
			popupImage.frameNode.addEventListener('click' ,closeImage , true);
			popupImage.frameNode.addEventListener('mouseover' ,mouseOver , true);
			popupImage.frameNode.addEventListener('mouseout' ,mouseOut , true);
		} else {
		    return false;
		}

		var x = (popupImage.x-popupImage.real.width/2);
		var y = (popupImage.y-popupImage.real.height/2);
		var mx = x - popupImage.scrolX;
		var my = y - popupImage.scrolY;
		if (mx+popupImage.real.width+32 > popupImage.browsW) x = popupImage.scrolX + popupImage.browsW-popupImage.real.width-32;
		if (my+popupImage.real.height+32 > popupImage.browsH) y = popupImage.scrolY + popupImage.browsH-popupImage.real.height-32;
		if (mx < 32) x = popupImage.scrolX + 32;
		if (my < 32) y = popupImage.scrolY + 32;

		popupImage.frameNode.style.position = 'absolute';
		popupImage.frameNode.style.left = x + 'px';
		popupImage.frameNode.style.top = y + 'px';
			popupImage.frameNode.style.borderColor = '#555555';
			popupImage.frameNode.style.borderWidth = '1px';
			popupImage.frameNode.style.borderStyle = 'solid';
			popupImage.frameNode.style.paddingTop = '15px';
			popupImage.frameNode.style.paddingBottom = '15px';
			popupImage.frameNode.style.backgroundColor = '#ffffff';
		popupImage.frameNode.style.margin = '0px';
		popupImage.frameNode.appendChild(popupImage.imgNode);
		
			popupImage.closeMark1 = document.createElement('span');
			popupImage.closeMark1.setAttribute('id', 'test');
			popupImage.closeMark1.innerHTML = '�~';
			popupImage.closeMark1.style.color = "#cccccc";
			popupImage.closeMark1.style.position = 'absolute';
			popupImage.closeMark1.style.left = (popupImage.real.width-16)+'px';
			popupImage.closeMark1.style.top = '0px';
			popupImage.closeMark1.style.padding = '2px';
			popupImage.frameNode.appendChild(popupImage.closeMark1);
		
		document.body.appendChild(popupImage.frameNode);
	}
	
    function mouseOver(){
        if (popupImage.frameNode) {
            popupImage.frameNode.style.cursor = "pointer";
			popupImage.closeMark1.style.color = "#000000";
        }
    }
    function mouseOut(){
        if (popupImage.frameNode) {
            popupImage.frameNode.style.cursor = "auto";
			popupImage.closeMark1.style.color = "#cccccc";
        }
    }
    function closeImage(){
        if (popupImage.frameNode) {
            document.body.removeChild(popupImage.frameNode);
            popupImage.frameNode = null;
            document.body.onclick = "";
        }
    }
}