//By Dylan Wagstaff, http://www.alohatechsupport.net
//Turned into a jquery plugin which can treat every list of images separately by Richard Walenga, Omega Design Studio
//Reads the rotate intervals in milliseconds for each matched list from the rel attribute.
(function($) {
	$.fn.rotator = function() {
		this.each(function() {
			var $this = $(this), rotate_interval = parseInt($this.attr('rel'),10);
			//Set the opacity of the first image to 1 and then the rest of the images to 0
			$this.find('li').css({opacity: 0.0}).first().css({opacity: 1.0});
			//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
			setInterval(function() {
				// Get the currently displayed image or the first image if no other image has the show class.
				var current = $this.find('li.show');
				if (current.length == 0) {
					current = $this.find('li:first');
				}

				//Get next image, when it reaches the end, rotate it back to the first image
				var next = current.next();
				if (!next.length || next.hasClass('show')) {
					next = $this.find('li:first');
				}
				//var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.imgRotate li:first') :current.next()) : $('.imgRotate li:first'));	
				//Set the fade in effect for the next image, the 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');
			},rotate_interval);
		});
		return this;
	};
})(jQuery);