(function ($) {
    $(function () {

        var $imagereel = $('.image_reel');
        var $people = $imagereel.find('> div');
        var $active;

        var $paging = $(".paging").show();

        function rotate() {
            var $next;

            if ($active) {
                $next = $active.next();
            } else {
                $next = $people.first();
            }

            if ($next.length === 0) {
                $next = $people.first();
            }

            showPerson($next);

        }

        function showPerson($person) {
            if ($active) {
                $paging.find('.active').removeClass('active');
                $active = $active.removeClass('active');
            }
            $active = $person.addClass("active");
            $paging.find('[data-personid="' + $person.data('personid') + '"]').addClass("active");
        }

        $people.hover(function () {
            clearInterval(interval);
        }, function () {
            resetInterval();
        });

        $paging.find("a").click(function () {
            var personid = $(this).data('personid');
            clearInterval(interval);
            var $person = $people.filter('[data-personid="' + personid + '"]').first();
            showPerson($person);
            resetInterval();
            return false;
        });

        var interval;
        function resetInterval() {
            interval = setInterval(function () {
                rotate();
            }, 10000);
        }

        rotate();
        resetInterval();
    });
})(jQuery);