$(document).ready(function() {		

	//Execute the slideShow
	slideShow();

});

function slideShow() {

	//Set the opacity of all images to 0
	$('#header_images span').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#header_images span:first').css({opacity: 1.0});
	
	//Call the header_images function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('header_images()',6000);
	
}

function header_images() {
	
   //if no IMGs have the show class, grab the first image
   var current = ($('#header_images span.show')?  $('#header_images span.show') : $('#header_images span:first'));
   
   //Get next image, if it reached the end of the slideshow, rotate it back to the first image
   var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#header_images span:first') :current.next()) : $('#header_images span:first'));	
   
   //Set the fade in effect for the next image, show class has higher z-index
   next.css({opacity: 0.0})
   .addClass('show')
   .animate({opacity: 1.0}, 1000);
   
   //Hide the current image
   current.animate({opacity: 0.0}, 1000)
   .removeClass('show');

}