$(function () {
    $("#grateful_voice")
    	.simpleSpy()
    ;
});


(function ($) {
    var befh;
    var cnt = 1;
$.fn.simpleSpy = function (limit, interval) {
	limit = limit || 3;
	interval = interval || 20000;

	return this.each(function () {
		// 1. setup
			// capture a cache of all the list items
			// chomp the list down to limit li elements
		var $list = $(this),
			items = [], // uninitialised
			befh = [],
			currentItem = limit,
			total = 0, // initialise later on
			//height = $list.find('> li:first').height();
			height = '200';
		
		// capture the cache
		var bc = 1;
		$list.find('> li').each(function () {
			befh[bc] = $(this).height() + 10;
			items.push('<li>' + $(this).html() + '</li>');
			bc++;

		});
		
		total = items.length;
		
		$list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
		
		$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

		// 2. effect        
		function spy() {
			// insert a new item with opacity and height of zero
			var $insert = $(items[currentItem]).css({
				height : 0,
				opacity : 0,
				display : 'none'
			}).prependTo($list);
			            
			// fade the LAST item out
			$list.find('> li:last').animate({ opacity : 0}, 1000, function () {
				// increase the height of the NEW first item
				if(cnt < limit){
					ah = limit + 1;
				}
				else{
					ah = cnt +2;
				}
				
				$insert.animate({ height : befh[ah] }, 1000).animate({ opacity : 1 }, 1000);
				// AND at the same time - decrease the height of the LAST item
				// $(this).animate({ height : 0 }, 1000, function () {
					// finally fade the first item in (and we can remove the last)
					$(this).remove();
				// });
			});
			
			
			currentItem++;
			cnt++;
			if (currentItem >= total) {
				return ;
			}
			
			setTimeout(spy, interval);
		}
		
		spy();
	});
};
    
})(jQuery);