(function($){
	$.fn.rotate = function(options) {

		var defaults = {
			length: 10000,
			speed: "slow"
		};

		var options = $.extend(defaults, options);

		this.each(function() {

			var element = new Array(this);
			var obj = "#"+this.id;
			var sayWhat = element.id;
			//console.log(element[0]);
			//console.log(obj);
			//console.log(options.length);
			
			//Set the opacity of all images to 0
			$(obj + ' ul li').hide();
			
			//Get the first image and display it (gets set to full opacity)
			$(obj + ' ul li:first').show();
				
			//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
			setInterval(function(){
				//console.log("I'm called!");
				//console.log(obj);
				//Get the first image
				
				
				var current = ($(obj + ' ul li.show')?  $(obj + ' ul li.show') : $(obj + ' ul li:first'));
				//console.log(current + this);

				//Get next image, when it reaches the end, rotate it back to the first image
				var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $(obj + ' ul li:first') :current.next()) : $(obj + ' ul li:first'));	
				
				//Set the fade in effect for the next image, the show class has higher z-index
				next.hide().addClass('show').fadeIn(options.speed);

				//Hide the current image
				current.fadeOut('slow').removeClass('show');

			},options.length);



		});
	};
})(jQuery);