$.fn.paginate = function(pagesize, page) {

    var $this = this;
    if (pagesize == 'clear') {
        $this.removeAttr('data-paginate');
        $this.find('[data-paginate-visible]').removeAttr('data-paginate-visible');
        $this.find('tbody tr').show();
        return;
    }

    var pagesize = pagesize || 50;
    var page = page || 1;

    var rows = $this.find('tbody tr');
    if (!$this.attr('data-paginate')) {
        $this.attr('data-paginate', pagesize);
        rows.filter(':visible').attr('data-paginate-visible', 1);
    } else {
        pagesize = parseInt($this.attr('data-paginate'));
    }

    var visible = rows.filter('[data-paginate-visible=1]');
    visible.each(function(index, row) {
        row = $(row);
        if (index >= (page-1)*pagesize
            && index < page*pagesize) {
            row.show();
        } else { // rollin', rollin', rollin'...
            row.hide();
        }
    });

    return visible.size();
};

var ranking = {

    playerClick : function(ev) {
        if (!$(ev.target).closest('a').size()) {
            var row = $(this);
            var pid = row.find('td.pid').text();
            if (pid) {
                var link = 'players/' + pid.trim() + '.html';
                location.href = link;
            }
        }
    },

    parseHash : function(hash) {
        hash = hash.replace(/^#/, '');
        var hashParams = hash.split(';');
        var params = new Map();
        hashParams.forEach(function(hashParam) {
            var param = hashParam.split(':');
            if (param.length > 1) {
                params.set(param[0], param[1].split(','));
            }
        });
        return params;
    },

    constructHash : function(params) {
        return Array.from(params).map(function(param) {
            return param[0] + ':' + param[1].join(',');
        }).join(';');
    },

    savedParams : new Map(),

    readHash : function() {
        var params = ranking.parseHash(location.hash);
        var allParams = ['age', 'gender', 'region'];
        var paramsChanged = false;
        allParams.forEach(function(param) {
            var newParam = params.get(param) || [];
            var oldParam = ranking.savedParams.get(param) || [];
            if (newParam.join(',') != oldParam.join(',')) {
                paramsChanged = true;
            }
        });
        $('button.btn-primary').removeClass('btn-primary');
        params.forEach(function(values, param) {
            values.forEach(function(value) {
                $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary');
            });
        });
        allParams.forEach(function(param) {
            if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) {
                $('button[data-clear="' + param + '"]').addClass('btn-primary');
            } else {
                $('#filters').collapse();
            }
        });
        if (paramsChanged) {
            ranking.filterRows(params);
            ranking.savedParams = params;
        }
        $('table.table tbody tr:visible').eq(0).addClass('gold');
        $('table.table tbody tr:visible').eq(1).addClass('silver');
        $('table.table tbody tr:visible').eq(2).addClass('bronze');
        $('table.table').css('opacity', 1);
        var pagesize = 40;
        var page = params.get('page') || [0];
        var count = $('table.table-paginate').paginate(pagesize, parseInt(page[0]));
        ranking.buildPaginator('#top-paginator', count, pagesize, page[0] || 1);
        ranking.buildPaginator('#bottom-paginator', count, pagesize, page[0] || 1);
    },

    filterRows : function(params) {
        $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
            var row = $(this);
            var hidden = false;
            params.forEach(function(value, param) {
                if (param != 'page') {
                    if (value.indexOf(row.find('td.' + param).text().trim()) == -1) {
                        row.hide();
                        hidden = true;
                    }
                }
            });
            if (!hidden) {
                row.show();
            }
        });
    },

    buildPaginator: function(selector, count, pagesize, page) {
        var box = $(selector);
        box.html('');
        var buttonGroup = $('<div>').addClass('btn-group');
        var pages = parseInt(Math.ceil(count / pagesize));
        buttonGroup.attr('data-pages', pages);
        buttonGroup.append($('<button>').addClass('btn btn-default paginator-prev').attr('type', 'button').text('<<'));
        for (var i = 0; i < pages; i++) {
            var pageBtn = $('<button>').addClass('btn btn-default paginator-page').attr('type', 'button').attr('data-page', i+1).text(i+1);
            if (i+1 == page) {
                pageBtn.addClass('btn-primary');
            }
            buttonGroup.append(pageBtn);
        }
        buttonGroup.append($('<button>').addClass('btn btn-default paginator-next').attr('type', 'button').text('>>'));
        box.append(buttonGroup);
    },

    changePage: function() {
        $('table.table').css('opacity', 0.1);
        var btn = $(this);
        var page = parseInt(btn.attr('data-page'));
        var params = ranking.parseHash(location.hash);
        var currentPage = params.get('page');
        currentPage = currentPage ? parseInt(currentPage[0]) : 1;
        if (btn.hasClass('paginator-prev')) {
            page = currentPage - 1;
        }
        if (btn.hasClass('paginator-next')) {
            page = currentPage + 1;
        }
        var count = parseInt(btn.closest('[data-pages]').attr('data-pages'));
        if (page > 0 && page <= count) {
            params.set('page', [page]);
            location.hash = ranking.constructHash(params);
        } else {
            $('table.table').css('opacity', 1);
        }
    },

    init : function() {

        $('.container .table tbody tr').click(ranking.playerClick);

        $(document).ready(function() {
            $(window).on('hashchange', ranking.readHash).trigger('hashchange');
        });

        $('button[data-filter]').click(function() {
            $('table.table').css('opacity', 0.1);
            $('table.table-paginate').paginate('clear');
            var button = $(this);
            var params = ranking.parseHash(location.hash);
            var param = params.get(button.attr('data-filter'));
            var value = button.attr('data-value');
            var index = param ? param.indexOf(value) : -1;
            if (index > -1) {
                param = param.filter(function(v) { return v != value; });
            } else {
                if (!param) {
                    param = [];
                }
                param.push(value);
            }
            if (!param.length) {
                params.delete(button.attr('data-filter'));
            } else {
                params.set(button.attr('data-filter'), param);
            }
            params.delete('page');
            location.hash = ranking.constructHash(params);
        });

        $('button[data-clear]').click(function() {
            $('table.table').css('opacity', 0.1);
            $('table.table-paginate').paginate('clear');
            var button = $(this);
            var params = ranking.parseHash(location.hash);
            params.delete(button.attr('data-clear'));
            params.delete('page');
            location.hash = ranking.constructHash(params);
        });

        $(document).on('click', 'button.paginator-prev, button.paginator-next, button.paginator-page', ranking.changePage);
    }

};

ranking.init();