$(document).ready(function() {

    stats.init();

});



var stats = {

    wrapper: null,

    item_container: null,

    item_height: null,

    item_width: null,

    item_index: [],

    item_count: [],

    init: function() {

        this.wrapper = $('#stats');

        $("#stats ul:last-child, #stats ul li:last-child").addClass('last');

        this.wrapper.find('ul').append('<div class="arrow arrow_up" /><div class="arrow arrow_down" />')

            .each(function(i, elm) {

                $(elm).find('li').wrapAll('<div class="stats_container"/>');

                stats.item_index[i] = 0;

                stats.item_count[i] = $(elm).find('li').length;

            });



        this.wrapper.find('.arrow').click(function() {

            stats.arrow_click($(this));

        });

        this.item_container = this.wrapper.find('.stats_container');

        this.item_height = this.item_container.children('li').outerHeight();

        this.item_width = this.item_container.children('li').outerWidth();

        this.item_container.parent().width(this.item_width);

    },

    arrow_click: function(elm) {

        var container_index = this.item_container.parent().index(elm.parent());

        var i_container = this.item_container.eq(container_index);

        i_container.stop(true, true);

        i_container.css({

            position: 'relative',

            width: stats.item_width,

            height: stats.item_height * stats.item_count[container_index]

        })

        if (elm.hasClass('arrow_up')) {

            if (this.item_index[container_index] == 0) {

                i_container.animate({ top: (i_container.height() - this.item_height) * -1 }, '500', function() {

                    stats.item_index[container_index] = stats.item_count[container_index] - 1;

                });



            } else {

                i_container.animate({ top: i_container.position().top + this.item_height }, '500', function() {

                    stats.item_index[container_index] = stats.item_index[container_index] - 1;

                });

            }

        }

        else if (elm.hasClass('arrow_down')) {

            if (this.item_index[container_index] == this.item_count[container_index] - 1) {

                i_container.animate({ top: 0 }, '500', function() {

                    stats.item_index[container_index] = 0;

                });

            } else {

                i_container.animate({ top: i_container.position().top - this.item_height }, '500', function() {

                    stats.item_index[container_index] = stats.item_index[container_index] + 1;

                });

            }

        }

    }

};