(function($) {
	$(document).ready(function() {
		
		// Array of images to load into the banner.
		// They are inserted into the "src" attribute
		// of an <img> tag as-is, so they can be
		// absolute (with or without a hostname) or
		// relative
		var images = [
			'/img/banner1.jpg',
			'/img/banner2.jpg',
			'/img/banner4.jpg',
			'/img/banner5.jpg',
			'/img/banner6.jpg',
			'/img/banner7.jpg',
			'/img/banner8.jpg'
		];
		
		// Sort the images randomly, so they don't
		// show up in the same order on every page
		// load
		images.sort(function(a, b) {
			return Math.random() - 0.4;
		});
		
		// Banner div on the page, where the images
		// are located
		var banner = $('#banner');
		
		// The speed of the animation, and how long
		// each image stays on-screen
		var display_time = 4000;
		var transition_speed = 6000;
		
		// Insert each image into the DOM, inside the
		// "banner" div
		for (var i in images)
			banner.append('<img src="' + images[i] + '" alt="" class="banner-photo" style="display: none;" />'); // Empty alt attribute so IE 6/7 don't display something like "banner photo" like a title attribute
		
		// Show the first element immediately, and
		// use a dummy animation to keep it on-screen
		var first_element = banner.children().eq(0);
		first_element.show().animate({opacity: 1}, display_time).queue(function() {
			// Start fading the images after the first
			// one has had its screentime.
			first_element.dequeue();
			do_fade(1);
		});
		
		// --------------------------------------------------------------------
		
		/**
		 * Fade through an array of images
		 *
		 * Rotates an array of images inside a div with a
		 * pretty fade effect. Stops on the last image.
		 *
		 * @access	public
		 * @param	integer		index		Index of first image to transition
		 * @return	void
		 */
		function do_fade(index) {
			var image = banner.children().eq(index);
			
			// Show the current image, then use a dummy
			// animation to keep it on-screen
			image.fadeIn(transition_speed).animate({opacity: 1}, display_time);
			image.queue(function() {
				image.dequeue();
				// Move on to the next image
				do_fade(index + 1);
			});
		};
		
	});
})(jQuery);