//taken from http://jqueryfordesigners.com/simple-jquery-spy-effect/

$(function() {
    var length = $('#ctl00_ContentPlaceHolder_ContentReader2_LabelContent ul li').length;
    if (length > 0) {
        if (length <= 5) {
            $('#ctl00_ContentPlaceHolder_ContentReader2_LabelContent ul').simpleSpy(length - 1, 4000);
        }
        else {
            $('#ctl00_ContentPlaceHolder_ContentReader2_LabelContent ul').simpleSpy(5, 4000);
        }
    }
});

(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),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();

            // capture the cache
            $list.find('> li').each(function() {

                var $classname = $(this).attr("class");  //store the class name so that the styles arn't removed -- Jeremy
                items.push('<li class=' + $classname + '>' + $(this).html() + '</li>');
            });

            total = items.length;

            $list.wrap('<div class="spyWrapper" />').parent().css({ height: 110 });
            // old line 
            //$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'
                }).appendTo($list);

                // fade the LAST item out
                $list.find('> li:first').animate({ opacity: 0 }, 1000).animate({ height: 0, paddingTop: 0 }, 1000, function() { $(this).remove(); });
                    

                // increase the height of the NEW first item
                $insert.animate({ height: height }, 1000).animate({ opacity: 1 }, 1000);
                
                
                currentItem++;
                if (currentItem >= total) {
                    currentItem = 0;
                }

                setTimeout(spy, interval)
            }

            setTimeout(spy, interval);
        });
    };

})(jQuery);