window.addEvent('domready', function(){
	var categories = $$('#catNavigation li');
	var currentCategory = -1;

	categories.each(function(category, i){
		if (category.hasClass('selected')) currentCategory = i;
	});

	var categoryfx = new Fx.Elements(categories, {
		link: 'cancel',
		transition: 'quad:in:out'
	});

	var normal = {
		height: categories[(categories[0].hasClass('selected') ? 1 : 0)].getStyle('height').toInt(),
		backgroundPosition: '202 11'
	}

	var full = {
		height: 108,
		backgroundPosition: '112 11'
	}

	var animateNav = function(open){
		var o = {};
		categories.each(function(other, j){
			o[j] = normal;
		});
		if (open != -1) o[open] = full;
		categoryfx.start(o);
	}

	categories.each(function(category, i) {
		category.setStyles(i == currentCategory ? full : normal).addEvents({
			mouseenter: animateNav.pass(i),
			mouseleave: animateNav.pass(currentCategory)
		});
	});
});