// JavaScript Document
   
$.fn.listScroller = function (limit, interval) {
	llmit = limit || 4;
	interval = interval || 4000;
	
	return this.each(function() {
		//1. setup
			// capture cache of all the list items
			//only show <limit> items
		var $list = $(this),
			items = [],
			currentItem = limit + 1,
			total = 0, 
			hht = $list.find('> li:first').height();
			
			console.log(hht);
			
		//capturing the cache
		$list.find('> li').each(function () {
			items.push('<li>' + $(this).html() + '</li>');								  
		});
		total = items.length;

		$list.find('> li').filter(':gt(' + (limit-1) + ')').remove();
		
		//2. do the effects
		
		function reveal() {
			// insert new item with opacity and height of zero
			var $insert = $(items[currentItem]).css({
					height : 0,
					opacity : 0,
					display : 'none'}).prependTo($list);

			// fade LAST item out
			$list.find('> li:last').animate({ opacity: 0}, 1000 , function() {
				// increase height of the NEW first item
				$(this).animate({height:0}, 1000);
				$insert.animate({height : hht},1000).animate({opacity : 1}, 1000);
				// AND decrease the height of the LAST item
				$(this).animate({height : 0}, 1000, function () {
				// fade the first item in (and remove the last item) 
					$(this).remove();											  
				});
																	  																	  
			});
			currentItem ++;
			if (currentItem >= total) {
				currentItem = 0;
			}
			
			setTimeout(reveal, interval);
			
		}
		
		
		reveal();
		
	});
	
};