$(function() {
	//load header DOM into var
	var header = $('#header ul li')
	
	//control fading in and out of items on hover
	header.hover(function() {
		//hide previous hovered over items
		header.removeClass('on');
		
		//show this hovered over item
		$(this).addClass('on');
		if($(this).attr('class') != 'selected')	{
			var w = (!$(this).children('div').attr('rel')) ? $(this).children('div').width() : $(this).children('div').attr('rel');
			
			$(this).children('div').css('width','0');
			$(this).children('div').animate({ width: w }, 200).attr('rel',w);;
		}
	}, function() {
		//hide hover items
		header.removeClass('on');
		if($(this).attr('class') != 'selected'){
			var w = $(this).children('div').width();
			$(this).children('div').animate({ width: 0 }, 200);
		}
	});
	
	//control nav on click
	header.click(function(){
		var id = $(this).attr('id');
		
		//hide previously selected nav element and show clicked element
		header.removeClass('selected');
		$(this).addClass('selected');	
		
		//hide previously visible div containe
		header.each(function(){
			if($(this).attr('id') != id) $(this).children('div').hide();	 
		});
	});
});