// fade in content.
$(document).ready(function() 
	{
		$( '#section' ).fadeIn("slow");
		$( '#aside' ).fadeIn("slow");
		$( '#footSection' ).fadeIn("slow");
		$( '#footAside' ).fadeIn("slow");
		$( '#slideshow' ).cycle({
			fx:      	'fade',
            speed:       1800,
            timeout:     3000,
            prev:    '#prev',
            next:    '#next',
            pager:      '#nav',
            pagerEvent:     'click',
            pauseOnPagerHover: 	true
        });
		
		// Navigation Fade Effect
			$(function () {
			  // IE6 doesn't handle the fade effect very well - so we'll stick with
			  // the default non JavaScript version if that is the user's browser.
			  if ($.browser.msie && $.browser.version < 7) return;
			  
			  $('.navigation li')
			  
				// remove the 'highlight' class from the li therefore stripping 
				// the :hover rule
				.removeClass('highlight')
				
				// within the context of the li element, find the a elements
				.find('a')
				
				// create our new span.hover and loop through anchor:
				.append('<span class="hover" />').each(function () {
				  
				  // cache a copy of the span, at the same time changing the opacity
				  // to zero in preparation of the page being loaded
				  var $span = $('> span.hover', this).css('opacity', 0);
				  
				  // when the user hovers in and out of the anchor
				  $(this).hover(function () {
					// on hover
					
					// stop any animations currently running, and fade to opacity: 1
					$span.stop().fadeTo(500, 1);
				  }, function () {
					// off hover
					
					// again, stop any animations currently running, and fade out
					$span.stop().fadeTo(500, 0);
				  });
				});
			});
	});