

function mover(e) {
	var img = Event.element(e);
	
	if (navigator.userAgent.match(/MSIE/) || navigator.userAgent.match(/Opera/))
		img.parentNode.parentNode.style.overflow = "visible";
	
	img.style.zIndex = "999"; // for Opera
	img.parentNode.parentNode.style.overflow = "visible";


	var rate = 1.7;
	var resize = function () {
		with (img.style) {
			position = "relative";
			var w = img.orgWidth * rate;
			var h = img.orgHeight * rate;
			width = w + "px";
			height = h + "px";
			top = ((50 - h) / 2) + "px";
			left = ((50 - w) / 2) + "px";

			if (!navigator.userAgent.match(/Opera/) && navigator.userAgent.match(/MSIE/)) {
				marginBottom = ((50 - h)) + "px";
				marginRight = ((50 - w)) + "px";
			}
		}
	}
	resize();
	img.fadeTimer = setInterval(function () {
		rate += 0.65;
		if (rate > 2.5) {
			rate = 2.5;
			if (navigator.userAgent.match(/Opera/) || !navigator.userAgent.match(/MSIE/)) {
				with (img.infoElement.style) {
					display = "block";
				}
			}
		}
		resize();
	}, 100);
}

function mout(e) {
	img = Event.element(e);
	if (navigator.userAgent.match(/MSIE/) || navigator.userAgent.match(/Opera/)) img.parentNode.parentNode.style.overflow = "hidden";
	with (img.style) {
		width = img.orgWidth + "px";
		height = img.orgHeight + "px";
		top = "0px";
		left = "0px";
		opacity = "1";
		zIndex = "0"; // for Opera
		marginBottom = "auto";
		marginRight = "auto";
	}
	clearInterval(img.fadeTimer);

	if (!navigator.userAgent.match(/Opera/) && navigator.userAgent.match(/MSIE/)) return;
	with (img.infoElement.style) {
		display = "none";
	}
}

function playing_initialize() {
	recent_ol = document.getElementById("recent").getElementsByTagName("ol")[0];
	for (var i = 0, len = recent_ol.childNodes.length; i < len; i++) {
		li = recent_ol.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);
		
		if (!navigator.userAgent.match(/MSIE/))
			img.parentNode.parentNode.style.overflow = "visible";
		
		Event.observe(img, "mouseover", mover.bindAsEventListener(this), true);
		Event.observe(img, "mouseout", mout.bindAsEventListener(this), true);

		//
		var info = document.createElement("div");
		with (info.style) {
			var w = img.orgWidth * 2.5;
			var h = img.orgHeight * 2.5;
			width = w + "px";
			if (!navigator.userAgent.match(/Opera/) && navigator.userAgent.match(/MSIE/)) {
				top =  (h / 4) + 5 + "px";
				left = ((50 - w) / 2) + "px";
			} else {
				top = ((50 - h) / 2) + "px";
				left = ((50 - w) / 2) + "px";
			}
		}
		var at = img.alt.split(" - ", 2);
		var artist = document.createElement("span");
		var title = document.createElement("span");
		with (artist) {
			className = "artist";
			appendChild(document.createTextNode(at[0]));
		}
		with (title) {
			className = "title";
			appendChild(document.createTextNode(at[1]));
		}
		info.appendChild(artist);
		info.appendChild(title);
		img.parentNode.parentNode.appendChild(info);
		img.infoElement = info;

		if (!navigator.userAgent.match(/Opera/) && navigator.userAgent.match(/MSIE/)) continue;

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

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