EventListener.addEvent(window, "load", setZoomers);

function setZoomers () {
	if(/webkit/i.test(navigator.userAgent)) {
	//	document.body.className = '';
	//	return;
	}
	var cv=document.getElementById("cv");
	if (cv!=null){
    	var uls = cv.getElementsByTagName("ul");
    
    	if(uls!=null) {
	    	for (var i=0; i < uls.length; i++) {
	    		if (uls[i].id == "test") continue;
	    		new Zoomer(uls[i]);
	    	}    	
    	}
    }
}

function Zoomer (root) {

	this.zoom = new Animator(1, 100, this.method(this.dozoom), this.method(this.dozoomed));
	this.zoom.setDuration(400);

	this.root = root;
	this.children = this.root.getElementsByTagName("li");
	for (var i=0; i < this.children.length; i++) {
		var h4 = this.children[i].getElementsByTagName("h4")[0].cloneNode(true);
		var h5 = this.children[i].getElementsByTagName("h5")[0].cloneNode(true);
		//Attach pointers to animated elements for performance
		this.children[i].visual = this.children[i].getElementsByTagName("span")[0];
		this.children[i].body = this.children[i].getElementsByTagName("span")[1];
		this.children[i].img = this.children[i].getElementsByTagName("img")[0];
		this.children[i].h4 = this.children[i].visual.appendChild(h4);
		this.children[i].h5 = this.children[i].visual.appendChild(h5);
	}
	this.prevNode = null;
	this.newNode = null;
	this.root.onmouseover = this.method(this.checkEvent);
	this.root.onmouseout = this.method(this.checkEvent);
}
Zoomer.prototype.checkEvent = function (e) {

//	if (this.zoom.isAnimating()) return;

	var event = (e) ? e : window.event;
	var from = (e) ? e.target : window.event.srcElement;
	var to = (e) ? e.relatedTarget : window.event.toElement;

	switch (event.type) {
		case "mouseout" :
			while (to.parentNode && to != this.root) to = to.parentNode;
			if (to != this.root) {//Moving out of the list
				this.newNode = null;
				if (this.zoom.isAnimating()) {
					setTimeout(this.method(this.restore), 200);
				} else {
					this.zoom.start();
				}
			}
		break;
		case "mouseover" :
			while (from.parentNode && from.parentNode != this.root) from = from.parentNode;
			if (from.tagName && from.tagName == "LI") {
				if (this.prevNode != from) {//Moving into a (new) listitem
					if (this.zoom.isAnimating()) return;
					if (this.prevNode) this.prevNode.className = "";
					this.newNode = from;
					this.zoom.start();
				}
			}
		break;
	}
}
Zoomer.prototype.dozoom = function (p) {

	x = p/100;
	if (this.prevNode == null && this.newNode) {
		// from outside into the list
		// new normal to large, others normal to small
		for (var i=0; i < this.children.length; i++) {
			var child = this.children[i];
			child.style.marginLeft = parseInt(6 - (10 * x)) + "px";
			child.style.marginRight = parseInt(6 - (10 * x)) + "px";
			if (child == this.newNode) {
				child.body.style.width = (parseInt(175 * x) || 1) + "px";
				if (document.all) {child.h4.style.visibility="hidden";child.h5.style.visibility="hidden";} else {child.h4.style.opacity = (100-p)/100;child.h5.style.opacity = (100-p)/100;}
			} else {
				child.visual.style.width = parseInt(119 - (40 * x)) + "px";
				child.visual.style.fontSize = parseInt(100 - (20 * x)) + "%";
			}
		}
		return;
	}
	if (this.prevNode && this.newNode) {
		// from one listitem to the other
		// prev large to small
		this.prevNode.className = "";
		this.prevNode.body.style.width = (parseInt(175 - (175 * x)) || 1) + "px";
		this.prevNode.visual.style.width = parseInt(119 - (40 * x)) + "px";
		this.prevNode.visual.style.fontSize = parseInt(100 - (20 * x)) + "%";
		if (document.all) {this.prevNode.h4.style.visibility="visible";this.prevNode.h5.style.visibility="visible";} else {this.prevNode.h4.style.opacity = p/100;this.prevNode.h5.style.opacity = p/100;}
		// new small to large
		this.newNode.body.style.width = (parseInt(175 * x) || 1) + "px";
		this.newNode.visual.style.width = parseInt(79 + (40 * x)) + "px";
		this.newNode.visual.style.fontSize = parseInt(80 + (20 * x)) + "%";
		if (document.all) {this.newNode.h4.style.visibility="hidden";this.newNode.h5.style.visibility="hidden";} else {this.newNode.h4.style.opacity = (100-p)/100;this.newNode.h5.style.opacity = (100-p)/100;}
		return;
	}
	if (this.prevNode && this.newNode == null) {
		// from one listitem to outside the list
		// prev large to normal, others small to normal
		for (var i=0; i < this.children.length; i++) {
			var child = this.children[i];
			child.style.marginLeft = parseInt(-4 + (10 * x)) + "px";
			child.style.marginRight = parseInt(-4 + (10 * x)) + "px";
			if (child == this.prevNode) {
				child.className = "";
				child.body.style.width = (parseInt(175 - (175 * x)) || 1) + "px";
				if (document.all) {child.h4.style.visibility="visible";child.h5.style.visibility="visible";} else {child.h4.style.opacity = p/100;child.h5.style.opacity = p/100;}
			} else {
				child.visual.style.width = parseInt(79 + (40 * x)) + "px";
				child.visual.style.fontSize = parseInt(80 + (20 * x)) + "%";
			}
		}
		return;
	}
}
Zoomer.prototype.dozoomed = function () {
	if (this.newNode) this.newNode.className = "large";
	this.prevNode = this.newNode;
}
Zoomer.prototype.restore = function () {
	for (var i=0; i < this.children.length; i++) {
		var child = this.children[i];
		child.body.style.width = "1px";
		child.visual.style.width = "119px";
		child.className = "";
		if (document.all) {child.h4.style.visibility="visible";child.h5.style.visibility="visible";} else {child.h4.style.opacity = 1;child.h5.style.opacity = 1;}
	}
}
Zoomer.prototype.method = function (method) {
	var context = this;
	return function () {
		method.apply(context, arguments);
	}
}