jQuery(document).ready(function(){

	// navigation animation
	$('nav[role="navigation"] li a')
		.each(function(){
				$(this).find('img').fadeTo(0, 0.45);
			}
		)
		.hover(
			function(){
				$(this).find('img').stop().fadeTo('fast', 1);
			},
			function(){
				$(this).find('img').stop().fadeTo('fast', 0.45);
			}
		)
		.click(function(e){
			e.preventDefault();
			// fade out the header
			$('header[role="banner"] h1').fadeOut('slow')
			showPage(this);
			$('nav[role="navigation"] li.active').removeClass('active');
			$(this).parent('li').addClass('active');
		})

	$('ul.fairs a').click(function(e){
		e.preventDefault();
		showPage(this, 'section[role="main"] #fairs ul');
		$('ul.fairs li.active').removeClass('active');
		$(this).parent('li').addClass('active')
	})

	function showPage(a, selector){
		if (!selector){
			selector = 'section[role="main"] > div';
		}
		var id = '#' + a.href.split(/#/)[1];
		var np = $(selector + id);
		if (np.length > 0){
			if (!np.hasClass('active')){
				$(selector + '.active').stop().fadeOut('fast',
					function(){
						$(this).removeClass('active');
						np.stop().fadeIn('fast', function(){
							$(this).addClass('active');
						})
					}
				);
			}
		}
	}

})