$(function () {
    //$('ul.spy').simpleSpy();
	$('ul.spy').simpleSpy().bind('mouseenter', function () {
	    $(this).trigger('stop');
	}).bind('mouseleave', function () {
	    $(this).trigger('start');
	});
});

(function ($) {
    
$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 5;
    interval = interval || 4000;
    
    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),
            running = true,
			items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();
            
        // capture the cache
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });
        
        total = items.length;
        
        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
        
        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

		$list.bind('stop', function () {
		            running = false;
		}).bind('start', function () {
		            running = true;
		});


        // 2. effect        
        function spy() {
	     if (running) {
		
           	 // 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
	                //$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
					$insert.animate({ height: height }, 1000).fadeTo(1000, 1);
                

	                // 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++;
	            if (currentItem >= total) {
	                currentItem = 0;
	            }
        }
            setTimeout(spy, interval)
        }
        
        spy();
    });
};
    
})(jQuery);