function loadStatsTrigger() {
    loadStats(jQuery('#stats-username').val());
}

function loadStats(user) {
    // Make username globally avaliable
    username = user
    jQuery('#statistics').empty();
    jQuery('#statistics').append('<img src="http://static.xhochy.com/apps/lastfm-nationstats/loading.gif" alt="Loading..." />');
    jQuery.getJSON('ajax/user/' + username + '.json', showStats);
}

function showStats(data, textStatus) {
    countries = {};
    jQuery.each(data, function() {
        if (countries[this['country']] == undefined) {
            countries[this['country']] = Number(this['playcount'])
        } else {
            countries[this['country']] += Number(this['playcount'])
        }
    });

    jQuery('#statistics').empty();
    jQuery('#statistics').append('<div id="tabs"><ul></ul></div>');
    jQuery('#tabs ul').append('<li><a href="#tabs-1">Overview</a></li>');
    jQuery('#tabs ul').append('<li><a href="#tabs-2">Countries</a></li>');
    jQuery('#tabs ul').append('<li><a href="#tabs-3">Charts</a></li>');

    // Overview
    jQuery('#tabs').append('<div id="tabs-1"><table id="stats-table"><thead><tr><th>Playcount</th><th>Artist</th><th>Country</th></tr></thead><tbody></tbody></table></div>')
    jQuery.each(data, function() {
        artist = this['name'] 
        if (this.url !== undefined) {
            artist = '<a href="' + this['url'] + '">' + artist + '</a>'
        }
        jQuery('#stats-table tbody').append('<tr><td>' + this['playcount'] 
            + '</td><td>' + artist + '</td><td>' + this.country
            + '</td></tr>');
    });
    jQuery('#stats-table').tablesorter({sortList: [[0,1]]});
    jQuery('#stats-table').addClass('tablesorter');

    // Countries
    jQuery('#tabs').append('<div id="tabs-2"><table id="countries-table"><thead><tr><th>Playcount</th><th>Country</th></thead><tbody></tbody></table></div>');
    for (property in countries) {
        jQuery('#countries-table tbody').append('<tr><td>' + countries[property] + '</td><td>' + property + '</td></tr>');
    }    
    jQuery('#countries-table').tablesorter({sortList: [[0,1]]});
    jQuery('#countries-table').addClass('tablesorter');

    // Charts
    jQuery('#tabs').append('<div id="tabs-3"></div>');
    jQuery('#tabs-3').append('<div>Remark: If you use this charts, please ensure that they link back to this page</div>');
    jQuery('#tabs-3').append('<br /><img src="http://xhochy.org/lastfm-nationstats/ajax/user/' + username + '.png" />');
    jQuery('#tabs-3').append('<div>Embed code:</div>');
    jQuery('#tabs-3').append('<textarea>[url=http://xhochy.org/lastfm-nationstats/index.html?user='
        + username +'][img]http://xhochy.org/lastfm-nationstats/ajax/user/' 
        + username + '.png[/img][/url]</textarea>');
    jQuery('#tabs-3').append('<br />&nbsp;<br /><img src="http://xhochy.org/lastfm-nationstats/ajax/user/' + username + '.png-big" />');
    jQuery('#tabs-3').append('<div>Embed code:</div>');
    jQuery('#tabs-3').append('<textarea>[url=http://xhochy.org/lastfm-nationstats/index.html?user='
        + username +'][img]http://xhochy.org/lastfm-nationstats/ajax/user/'
        + username + '.png-big[/img][/url]</textarea>');
    jQuery('#tabs-3').append('<br />&nbsp;<br /><img src="http://xhochy.org/lastfm-nationstats/ajax/user/' + username + '.png-list" />');
    jQuery('#tabs-3').append('<div>Embed code:</div>');
    jQuery('#tabs-3').append('<textarea>[url=http://xhochy.org/lastfm-nationstats/index.html?user='
        + username +'][img]http://xhochy.org/lastfm-nationstats/ajax/user/'
        + username + '.png-list[/img][/url]</textarea>')
    
    // Tab it finally
    jQuery('#tabs').tabs();
}

jQuery(document).ready(function() {
    jQuery('#show-stats').click(loadStatsTrigger);
    jQuery('#stats-username').keyup(function(event) {
        if (event.keyCode == 13) {
            loadStatsTrigger();
        }
    });

    if (jQuery(document).getUrlParam('user') != null) {
        jQuery('#stats-username').val(jQuery(document).getUrlParam('user'));
        loadStats(jQuery(document).getUrlParam('user'));
    }
});