window.addEvent('domready', function(){
	var opts = {wait: false, duration: 150, transition: Fx.Transitions.sineOut};
	var links = $$('#navigation li a');
	var selected_link = $E('li.selected a','navigation');
	
	// create a default elements so we can get the styles...
	var default_item = new Element('li').setStyle('display','none').injectInside($E('ul','navigation'));
	var default_link = new Element('a').injectInside(default_item);

	if (selected_link == null)
	    selected_link = default_link;

	// default styles
	var normal_color = default_link.getStyle('color');
	var normal_size = default_link.getStyle('font-size');
	var hover_color = selected_link.getStyle('color');
	var hover_size = selected_link.getStyle('font-size');

	// add effects
	var fx = new Fx.Elements(links, opts);
	links.each(function(link, i){
		link.fx = new Fx.Styles(link, opts);
		link.addEvent('mouseenter', function(){
			if (this != selected_link)
				this.fx.custom({'font-size':[hover_size],'color':[hover_color]});
		});
		link.addEvent('mouseleave', function(){
			if (this != selected_link)
				this.fx.custom({'font-size':[normal_size],'color':[normal_color]});
		});
	});
});