// http://snipplr.com/view.php?codeview&id=22241
(function($) {

	$.fn.crossfade = function(options) {

		//options, obviously
		var defaults = {
			speed: 3000,
			pause: 8000
		},

		options = $.extend(defaults, options);

		this.each(function() {
			
			//grab this item and the list items (children)
			//this way, the children are cached and not your
			//not constantly selecting the items from the dom
			var $this = $(this),
				$children = $this.children("li");
			
			//set css styling for selected item and the children
/*			$this.css({
				'position' : 'relative',
				'list-style' : 'none',
			});
			
			$children.css({
				'position' : 'absolute',
				'left' : 0,
				'z-index' : 0
			});
*/			
			var $first = $children.eq(0), //grab first element (top item)
				$next, //initalize variable to hold the next item
				length = $children.length, //determine length of the array
				index = 0; //initialize an index variable
				
				//set z-index of the first item to 2, above all others
				//because all others are 0
				$first.css({ 'z-index' : 2 }); 
			
			//start yor timer
			var timer = window.setInterval(function() {
				
				//determine if your at the end of the array
				//if so, set index to the first item
				//otherwise, increment to the next index
				if (!$children.eq(index+1).length) { index = 0; }
				else { index++; }
	
				//grab the next item
				$next = $children.eq(index);
				
				//set z-index for the next item so that it is, one above all other elements
				//but one under the top item
				$next.css({ 'z-index': 1 });
				
				//fade the top item out, revealing the next item
				$first.fadeTo(options.speed, 0, function() {
					
					//then just set the z-index to the lower level
					//and fade it back in
					$first.css({ 'z-index' : 0 }).fadeTo(0,1);
					
					//set the next, now the top, item to the top level
					$next.css({ 'z-index' : 2 });
					
					//make the new top item, $first
					$first = $next;
				});
				
			}, options.pause);
			
		});

		return this;

	};

})(jQuery);