/**
 * This function will rotate between a selection of images inside a container
 * named "slideshow". The first image should be assigned a class called "active"
 * and the rest of the images should be set to "display: none;".
 *
 * The following CSS should be placed inside the stylesheet:
 *
 * #slideshow { position: relative; }
 *
 * #slideshow img {
 *  position: absolute;
 *  top: 0;
 *  left: 0;
 *  z-index: 8;
 * }
 * 
 * #slideshow img.active { z-index: 10; }
 * #slideshow img.last-active { z-index: 9; }
*/
function rotateImages() {
	// Run a function at a given interval
	window.setInterval(function() {
		// Make sure all images in the slideshow container are visible
		$('#slideshow img').css('display','block');
		
		// Assign the first active image to a variable
		// *** Make sure a class of "active" is applied to the first image in the slideshow ***
		var active = $('#slideshow img.active');
		
		// Check if an element with the class "active" exists
		if(active.length == 0)
			active = $('#slideshow img:last');
		
		// Pull in all the images from the markup in the order they appear
		var next =  active.next().length ? active.next() : $('#slideshow img:first');
		
		// Apply a class to the last active image
		active.addClass('last-active');
		
		// Transition between the images
		next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0},1000,function() {
		active.removeClass('active last-active');
		});
	},4000);
}