﻿(function($) {
    $.fn.simpleSpy = function(limit, interval, speed) {
        limit = limit || 3;
        interval = interval || 8000;
        speed = speed || 2000;


        //console.log(limit);


        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 = [], // Initialised
            currentItem = limit,
            total = 0, // Initialise later on...
            height = 60, //$list.find('> li:first').height();
            running = true;
            // 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();

            // Stop start spy effect 
            $list.bind('stop', function() {
                running = false;
            }).bind('start', function() {
                running = true;
            });



            // 2. effect
            function spy() {

                if (running) {
                    // insert a new item with opacity and hight of zero
                    var $insert = $(items[currentItem]).css({
                        height: 0,
                        opacity: 0
                    }).prependTo($list);

                   // console.log(currentItem);

                    // fade the last item out

                    $list.find('> li:last').animate({ opacity: 0 }, speed, function() {
                        // increase the height of the NEW first item

                        $insert.animate({ height: height }, speed).animate({ opacity: 1 }, speed);

                        // AND at the same time - decrease the height of the LAST item
                        $(this).animate({ height: 0 }, speed, function() {
                            // finaly fade the first item in (and we can remove the last);
                            $(this).remove();

                        });


                    });

                    currentItem++;
                    if (currentItem >= total) {
                        currentItem = 0;
                    }

                 }
                 
                 setTimeout(spy, interval);

                
            }
            setTimeout(spy, interval);
        });

    };

})(jQuery);
