(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/top-banner-1.jpg',
			'/img/top-banner-2.jpg',
			'/img/top-banner-3.jpg',
			'/img/top-banner-4.jpg',
			'/img/top-banner-5.jpg',
			'/img/top-banner-6.jpg',
		];
		
		// 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 = 7000;
		
		// 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.
		 *
		 * @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();
				
				// Go to the next (or first) image
				if (index + 1 == images.length) {
					// Reset the images and do it again
					for (var i = 0; i < images.length; i++) {
						// Don't hide the first image
						if (i == 0)
							continue;
						
						if (i + 1 == images.length) // Fade the last image
							banner.children().eq(i).fadeOut(transition_speed);
						else // Instantly hide all others
							banner.children().eq(i).hide();
					}
					
					// Just a little cheat to force a wait in the animation
					banner.children().eq(0).animate({opacity: 1}, display_time);
					
					do_fade(0);
				} else {
					// On to the next one
					do_fade(index + 1);
				}
			});
		};
		
	});
})(jQuery);