// jQuery is running in noConflict mode, so $ is not available. Use jQuery() instead of $().

var slideshow = {
	settings : {
		animation: {
			inDuration: 1000,
			outDuration: 750
		},
		delay: 8000,
		elements : {
			headlineContainer: '#headline'
		}
	},
	init: function() {
		var that = this;
		
		// Hide the images.
		that.images = jQuery('#slideshow img').each(function(){ jQuery(this).hide(); });
		
		// Hide the headlines and move them to the headline container.
		that.headlines = jQuery('#slideshow div').each(function(){ jQuery(this).hide().appendTo(that.settings.elements.headlineContainer); });
		
		// Show a random image / headline
		that.currentIndex = 0; // Math.floor(Math.random() * 1000) % that.images.length;
		jQuery(that.images[that.currentIndex]).show();
		jQuery('.' + that.images[that.currentIndex].id).show();
		
		setTimeout(function(){
			that.rotate();
		}, that.settings.delay);
	},
	
	rotate: function() {
		var that = this;
		
		// Figure out which image is next.
		that.currentIndex = (that.currentIndex + 1 == that.images.length) ? 0 : that.currentIndex + 1 ;
		
		// Fade out the current headline and fade in the new one
		that.headlines.filter(':visible').fadeOut(that.settings.animation.outDuration, function(){
			that.headlines.filter('.' + that.images[that.currentIndex].id).fadeIn(that.settings.animation.inDuration);
		});
		
		// Move the image to the top and fade it in
		jQuery(that.images[that.currentIndex]).hide().appendTo(jQuery(that.images[that.currentIndex]).parent()).fadeIn(that.settings.animation.inDuration);
		
		setTimeout(function(){
			that.rotate();
		}, that.settings.delay);
	}
};

jQuery(document).ready(function(){
	slideshow.init();
});