kkjs.load.module("simulation");

kkjs.event.onDOMReady(function(){
	createSlidingActive(kkjs.$("mainNavigation"));
});
function createSlidingActive(nav){
	var back = kkjs.node.create({tag: "li", className: "active", style: {"margin": "0 -2px", "padding": "0", "position": "absolute", "top": "0", "left": "0", "height": "100%"}});
	var sim = new kkjs.simulation({dt: 0.04, y: 10, mass: 1, k: 90,
		onRun: function(){
			var x = Math.min.apply(null, this.position).toFixed(3);
			var w = Math.abs(this.position[0] - this.position[1]);
			back.style.left = x + "px";
			back.style.width = Math.round(w) + "px";
		}
	});
	function setActive(li){
		sim.center[0] = li.offsetLeft - 5;
		sim.center[1] = li.offsetLeft + li.offsetWidth + 5;
	}
	var active = kkjs.css.$("li.active", {node: nav})[0];
	if (active) {
		kkjs.css.className.remove(active, "active");
		setActive(active);
		sim.position = sim.center.slice(0);
	}
	nav.appendChild(back);
	kkjs.event.add(nav, "mouseover", function(ev){
		var t = ev.target;
		if (t == nav) return;
		while(t.parentNode != nav) t = t.parentNode;
		if (t.nodeName == "LI" && kkjs.css.className.has(t, "navigationItem")) setActive(t);
	});
	kkjs.event.add(nav, "mouseleave", function(ev){
		if (active) setActive(active);
		else sim.center = [0, 0];
	});
}