$(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);
              });
            });
                     
          var img = new Image();
  
          // wrap our new image in jQuery, then:
          $(img)
            // once the image has loaded, execute this code
            .load(function () {
              // set the image hidden by default    
              $(this).hide();
            
              // with the holding div #loader, apply:
              $('#loader')
                // remove the loading class (so no background spinner), 
                .removeClass('loading')
                // then insert our image
                .append(this);
            
              // fade our image in to create a nice effect
              $(this).fadeIn();
            })
            
            // if there was an error loading the image, react accordingly
            .error(function () {
              // notify the user that the image could not be loaded
            })
            
            // *finally*, set the src attribute of the new image to our image
            .attr('src', 'images/header.jpg');
        });