// node type
ELEMENT_NODE = 1;

// for decoration
MODE_NORMAL = 0
MODE_ART = 1
var decoration = MODE_NORMAL;
var borderWidth = 0;
var tmpBorderWidth = 0;

// settings for ZOOM
MAX_ZOOM_RATE = 3.0;
ZOOM_STEP = 0.5;

function mover(e) {
	var img = Event.element(e);
	
	var cachedImage = getCachedImage(img.index);
	if (cachedImage != undefined) {
		if (cachedImage.complete) {
			img.src = cachedImage.src;
		}
	}

	img.style.zIndex = "999";
	img.parentNode.parentNode.style.overflow = "visible";

	var absTopPos = getElemTopPos(img);
	var absLeftPos = getElemLeftPos(img);

	var rate = 1.0 + ZOOM_STEP;
	var resize = function () {
		with (img.style) {
			position = "relative";
			var w = img.orgWidth * rate;
			var h = img.orgHeight * rate;
			width = w + "px";
			height = h + "px";

			if (absTopPos + (img.orgHeight * (1 - MAX_ZOOM_RATE) / 2) < 0) {
				top = "0px";
			} else {
				top = ((img.orgHeight - h) / 2) - tmpBorderWidth + "px";
			}
			marginBottom = (img.orgHeight - h) - tmpBorderWidth + "px";

			if ((absLeftPos + (img.orgWidth * (1 - MAX_ZOOM_RATE) / 2) > 0) && (absLeftPos + (img.orgWidth * (MAX_ZOOM_RATE + 1) / 2) < getBrowserWidth()) ) {
				// spread from center
				left = ((img.orgWidth - w) / 2) - tmpBorderWidth + "px";
			} else if (absLeftPos + (img.orgWidth * (1 - MAX_ZOOM_RATE)) > 0) {
				// spread from right
				left = (img.orgWidth - w) - tmpBorderWidth + "px";
			} else {
				// spread from left
				left = (-1 * tmpBorderWidth) + "px";
			}
			marginRight = (img.orgWidth - w) - 2 * tmpBorderWidth + "px";
		}
	}
	resize();
	img.fadeTimer = setInterval(function () {
		rate += ZOOM_STEP;
		if (rate > MAX_ZOOM_RATE) {
			rate = MAX_ZOOM_RATE;
			tmpBorderWidth = borderWidth;
			if ((decoration == MODE_ART) && (tmpBorderWidth > 0)) {
				img.style.border = "ridge " + borderWidth + "px #ffcc99";
			}
			with (img.infoElement.style) {
				var w = img.orgWidth * rate;
				var h = img.orgHeight * rate;
				width = w + "px";

				if (absTopPos + (img.orgHeight - h) / 2 < 0) {
					top = (h - img.orgHeight) + "px";
				} else {
					top = ((h - img.orgHeight) / 2) - 5 + "px";
				}

				var parentLi = img.parentNode.parentNode;
				var nextLi = getNextSiblingElement(parentLi);
				if (nextLi != undefined) {
					var parentLiPos = getElemLeftPos(parentLi);
					var nextLiPos = getElemLeftPos(nextLi);
					if (parentLiPos + img.orgWidth < nextLiPos) { 
						marginBottom = (img.orgHeight - h) + "px";
					}
				} else {
					marginBottom = (img.orgHeight - h) + "px";
				}

				if ((absLeftPos + (img.orgWidth * (1 - MAX_ZOOM_RATE) / 2) > 0) && (absLeftPos + (img.orgWidth * (MAX_ZOOM_RATE + 1) / 2) < getBrowserWidth()) ) {
					// spread from center
					left = ((img.orgWidth - w) / 2) + borderWidth + "px";
				} else if (absLeftPos + (img.orgWidth * (1 - MAX_ZOOM_RATE)) > 0) {
					// spread from right
					left = (img.orgWidth - w) + borderWidth + "px";
				} else {
					// spread from left
					// left = borderWidth + "px";
					left = "0px";
				}
				marginRight = (img.orgWidth - w) - 2 * borderWidth + "px";
				display = "block";
			}
		}
		resize();
	}, 100);
}

function mout(e) {
	img = Event.element(e);

	img.parentNode.parentNode.style.overflow = "hidden";
	img.src = img.orgSrc;
	tmpBorderWidth = 0;
	with (img.style) {
		width = img.orgWidth + "px";
		height = img.orgHeight + "px";
		top = "0px";
		left = "0px";
		opacity = "1";
		zIndex = "0";
		marginBottom = "auto";
		marginRight = "auto";

		if (decoration == MODE_ART) {
			border = img.orgStyleBorder;
		}
	}
	clearInterval(img.fadeTimer);
	with (img.infoElement.style) {
		display = "none";
	}
}

function changeMaxSize(obj) {
	with(obj) {
		MAX_ZOOM_RATE = options[selectedIndex].value;
	}
}

// utility
function getNextSiblingElement(elem) {
	var v = elem.nextSibling;
	while (v != undefined) {
		if (v.nodeType == ELEMENT_NODE) {
			return v;
		}
		v = v.nextSibling;
	}
	return v;
}
function getBrowserWidth() {
	if ( window.innerWidth ) { return window.innerWidth; }  
	else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }  
	else if ( document.body ) { return document.body.clientWidth; }  
	return 800;  
}
function getElemTopPos(elem) {
	var v = elem.offsetTop;
	while (elem.offsetParent) {
		elem = elem.offsetParent;
		v += elem.offsetTop;
	}
	return v;
}
function getElemLeftPos(elem) {
	var v = elem.offsetLeft;
	while (elem.offsetParent) {
		elem = elem.offsetParent;
		v += elem.offsetLeft;
	}
	return v;
}

function initialize() {
	recent_ul = document.getElementById("zoom").getElementsByTagName("ul")[0];
	for (var i = 0, len = recent_ul.childNodes.length; i < len; ++i) {
		li = recent_ul.childNodes[i];
		if (li.nodeType != ELEMENT_NODE) continue;
		
		img = li.getElementsByTagName("img")[0];
		img.style.position = "relative";
		img.orgWidth = Number(img.width);
		img.orgHeight = Number(img.height);
		img.orgSrc = img.src;
		img.orgStyleBorder = img.style.border;
		
		img.parentNode.parentNode.style.overflow = "visible";
		
		Event.observe(img, "mouseover", mover.bindAsEventListener(this), true);
		Event.observe(img, "mouseout", mout.bindAsEventListener(this), true);

		// style setting for text area under picture
		var info = document.createElement("div");
		var alt = img.alt.split(" / ", 3);
		img.index = alt[0];
		var sub1 = document.createElement("span");
		var sub2 = document.createElement("span");
		if (alt[1]) {
			with (sub1) {
				className = "sub1";
				appendChild(document.createTextNode(alt[1]));
			}
		}
		if (alt[2]) {
			with (sub2) {
				className = "sub2";
				appendChild(document.createTextNode(alt[2]));
			}
		}
		info.appendChild(sub1);
		info.appendChild(sub2);
		img.parentNode.parentNode.appendChild(info);
		img.infoElement = info;

		img.removeAttribute("alt");
		img.parentNode.parentNode.removeAttribute("title");
	}

	initializeSpecial();

	if (decoration == MODE_ART) {
		borderWidth = 10;
	}
}

var images;
function getCachedImage(index) {
	var ret = undefined;
	if (images != null && images != undefined) {
		ret = images[index];
	}
	return ret;
}

Event.observe(window, "load", initialize);