function regEventHandler(eventName,elem,eventHandler)
{
	if(elem == null){
		alert("elem is null !!");
		return;
		}
	if(typeof addEventListener != "undefined")
		elem.addEventListener(eventName,eventHandler, false);
	else if(typeof attachEvent != "undefined")
		elem.attachEvent("on" + eventName,eventHandler);
}

function removeEventHandler(eventName,elem,eventHandler)
{
	if(typeof removeEventListener != "undefined")
		elem.removeEventListener(eventName,eventHandler, false);
	else if(typeof detachEvent != "undefined")
		elem.detachEvent("on" + eventName,eventHandler);
}


function getEventTarget(e)
{
	if(typeof e.target == "object")
		return e.target;
	else if(typeof e.srcElement == "object")
		return e.srcElement;
}

function preventDefault(e)
{
	if(typeof e.preventDefault != "undefined")
		e.preventDefault();
	else if(e.type != "mouseover")
		e.returnValue = false;
	else
		e.returnValue = true;
}


regEventHandler("click",document,openLargeBox);
regEventHandler("resize",window,handleResize);


function openLargeBox(e)
{
	var target = getEventTarget(e);
	if(target.nodeName == "IMG"){
		var imglink = target.parentNode;
		if(!imglink || imglink.nodeName != "A")
			return;
	}else if(target.nodeName == "A"){
		var imglink = target;
		var target = imglink.firstChild;
		if(!target || target.nodeName != "IMG")
			target = target.nextSibling;
		if(!target || target.nodeName != "IMG")
			return;
	}else
		return;
	if(!imglink.rel ) return;

	var bodyElem = document.getElementById("body");
	var overlayBox = document.getElementById("overlay-box");
	if(overlayBox == null){
		var overlayBox = document.createElement("DIV");
		overlayBox.id = "overlay-box";
		overlayBox.className = "none";
		bodyElem.appendChild(overlayBox);
	}
	var largeBox = document.getElementById("large-box");
	if(largeBox == null){
	var largeBox = document.createElement("DIV");
		largeBox.id = "large-box";
		largeBox.className = "none";
		var image = document.createElement("IMG");
		image.id = "large-image";
		largeBox.appendChild(image);
		var caption = document.createElement("H3");
		caption.id = "caption-box";
		largeBox.appendChild(caption);
		bodyElem.appendChild(largeBox);
	}
	if(!image)
		image = document.getElementById("large-image");
	if(image == null)
		return;
	image.src = imglink.href;
	var dataStr = imglink.rel.split("-");
	image.width = dataStr[1];
	image.height = dataStr[2];
	largeBox.style.width = image.width + "px";
	if(!caption)
		caption = document.getElementById("caption-box");
	if(caption != null)
		caption.innerHTML = target.alt;

	overlayBox.style.visibility = "hidden";
	largeBox.style.visibility = "hidden";
	overlayBox.className = "block";
	largeBox.className = "block";

	var left = Math.round((document.documentElement.clientWidth - largeBox.offsetWidth)/2);
	var top = Math.round((document.documentElement.clientHeight - largeBox.offsetHeight)/2);
	if(top < 2)
		top = 2;
	var leftdiff = 0;
	if(left < 2)
		leftdiff = left - 4;
	largeBox.style.top = (top + document.documentElement.scrollTop).toString() + "px";
	largeBox.style.left = (left + leftdiff + document.documentElement.scrollLeft).toString() + "px";

	overlayBox.style.width = document.documentElement.scrollWidth + "px";
	overlayBox.style.height = document.documentElement.scrollHeight + "px";

	largeBox.style.visibility = "visible";
	overlayBox.style.visibility = "visible";

	removeEventHandler("click",document,openLargeBox);
	regEventHandler("click",largeBox,closeLargeBox);
	preventDefault(e);
}

function closeLargeBox()
{
	var largeBox = document.getElementById("large-box");
	if(largeBox != null){
		largeBox.className = "none";
		removeEventHandler("click",largeBox,closeLargeBox);
	}
	var largeImage = document.getElementById("large-image");
	if(largeImage != null)
		largeImage.src = "kuc.jpg";
	else
		alert("ha!");
	var overlayBox = document.getElementById("overlay-box");
	if(overlayBox != null){
		overlayBox.className = "none";
		overlayBox.style.visibility = ""
		overlayBox.style.width = "";
		overlayBox.style.height = "";
	}
	regEventHandler("click",document,openLargeBox);
}

function handleResize()
{
	var overlayBox = document.getElementById("overlay-box");
	if(overlayBox != null){
		overlayBox.style.width = document.documentElement.scrollWidth + "px";
		overlayBox.style.height = document.documentElement.scrollHeight + "px";
	}
}