window.addEvent('domready', function() {

	if ($('navi-bar')) {

		var overallWidth = 600;
		var navis = $$('#navi-bar .navi');
		// 92 132 84
		var num = navis.length;

		var expansion = 40;
		var margin = 4; // we could get this from the computed style
		
		//Dynamic... todo
		//var widthCollapsed = Math.floor((overallWidth - ( (num*2) * margin)) / num);
		//var widthExpanded = widthCollapsed + expansion;
		

		var widthCollapsed = 92;
		var widthExpanded = 132;
		var widthShrunk = widthCollapsed - Math.floor( expansion / (num-1));

		var fx = new Fx.Elements(navis, {wait: false, duration: 200, transition: Fx.Transitions.quadOut});

		navis.each(function(navi, i){

				navi.addEvent('mouseenter', function(e){

				var obj = {};
				obj[i] = {
					'width': [navi.getStyle('width').toInt(), widthExpanded]
				};
				navis.each(function(other, j){
					if (other != navi){
						var w = other.getStyle('width').toInt();
						if (w != widthShrunk) obj[j] = {'width': [w, widthShrunk]};
					}
				});
				fx.start(obj);
			});
		});

		$('navi-bar').addEvent('mouseleave', function(e){
			var obj = {};
			navis.each(function(other, j){
				obj[j] = {'width': [other.getStyle('width').toInt(), widthCollapsed]};
			});
			fx.start(obj);
		});
	}
});