(function() {

    var css = {
            width: '12px',
            height: '12px',
            margin: '2px',
            borderRadius: '3px'
        },
        reload = pandora.$ui.appPanel.reload,
        timeout,
        $users = $('<div>'),
        $icon = $('<img>')
            .attr({src: Ox.getFlagByGeoname('', 16)})
            .css(css)
            .bind({click: start})
            .appendTo($users);

    load();

    function getUsers() {
        Ox.Request.clearCache('findUsers');
        pandora.api.findUsers({
            keys: ['firstseen', 'lastseen', 'location'],
            query: {
                conditions: [{key: 'level', operator: '!=', value: 'robot'}],
                operator: '&'
            },
            range: [0, 2400],
            sort: [{key: 'lastseen', operator: '-'}]
        }, function(result) {
            var time = new Date(),
                newUsers = result.data.items.filter(function(user) {
                    return time - new Date(user.firstseen) < 86400000;
                }).length,
                allUsers = result.data.items.filter(function(user) {
                    return time - new Date(user.lastseen) < 86400000;
                }).length;
            $users.empty();
            result.data.items.slice(0, 16).forEach(function(user) {
                $users.prepend(
                    Ox.Element({
                            element: '<img>',
                            tooltip: '<div style="text-align: center">'
                                + (user.location || 'Unknown')
                                + '<br><span class="OxLight">'
                                + Ox.formatDate(user.lastseen, '%T')
                                + '</span></div>'
                        })
                        .attr({src: Ox.getFlagByGeoname(user.location, 16)})
                        .css(css)
                        .bindEvent({anyclick: stop})
                );
            });
            $users.prepend(
                Ox.Element({
                        tooltip: Ox.formatNumber(newUsers) + '/'
                            + Ox.formatNumber(allUsers)
                            + ' (new/total) users in the last 24 hours'
                    })
                    .addClass('OxLight')
                    .css({float: 'left', margin: '2px', fontSize: '10px'})
                    .html(
                        Ox.formatNumber(newUsers) + '/'
                        + Ox.formatNumber(allUsers)
                    )
                    .bindEvent({anyclick: stop})
            );
        });
        timeout = setTimeout(getUsers, 60000);
    }

    function load() {
        pandora.$ui.mainMenu.find('.OxExtras').prepend($users);
        patchReload();
    }

    function patchReload() {
        pandora.$ui.appPanel.reload = function() {
            reload();
            load();
            timeout ? start() : stop();
        }
    }

    function start() {
        clearTimeout(timeout);
        timeout = void 0;
        getUsers();
    }

    function stop() {
        clearTimeout(timeout);
        timeout = void 0;
        $('.OxTooltip').hide();
        $users.empty().append($icon.bind({click: start}));
    }

}());