Guildwars 2 dynamic events

by ydelmas

HTML

<div>
    <button onclick="init('fr')">FR</button>
    <button onclick="init('en')">EN</button>
    <button onclick="init('de')">DE</button>
    <button onclick="init('es')">ES</button>
</div>
<div><span id="labelSvr"></span>&nbsp;: <select id="serveur" onchange="majEvts()"></select></div>
<div><span id="labelCrt"></span>&nbsp;: <select id="carte" onchange="majEvts()"></select></div>
<table id="evts"/>

CSS

.Warmup, .Preparation { background: #CCCCFF; }
.Active { background: #FFFF66; }
.Fail { background: #FFCCCC; }
.Success { background: #CCFFCC; }

JavaScript

var GW2API = 'https://api.guildwars2.com/v1/';
var cartes = [];
var nomsEvenements = [];
var i18n = {
    'monde': {'fr': 'Monde', 'en': 'World', 'de': 'Welt', 'es': 'Mundo'},
    'carte': {'fr': 'Carte', 'en': 'Map', 'de': 'Karte', 'es': 'Mapa'},
    'toutes': {'fr': 'Toutes', 'en': 'All', 'de': 'Alle', 'es': 'Todas'}
};

function majEvts() {
    monde = $('#serveur').val();
    if ( ! monde ) { return; }
    uri = GW2API + 'events.json?world_id=' + monde;
    carte = $('#carte').val();
    if ( carte ) { uri = uri + '&map_id=' + carte; }
    $.getJSON(uri, function(data) {
        $('#evts').html('');
        $.each(data['events'], function(key, val) {
            $('<tr class="'+val['state']+'"><td>'+cartes[val['map_id']]+'</td><td>'+nomsEvenements[val['event_id']]+'</td></tr>').appendTo('#evts');
        });
    });
}
function init(lang) {
    $('#labelSvr').html(i18n['monde'][lang]);
    $.getJSON(GW2API + 'world_names.json?lang=' + lang, function(data) {
        selSvr = $('#serveur');
        selSvr.html('<option value="" selected></option>');
        $.each(data, function(key, val) {
            $('<option value="'+val['id']+'">'+val['name']+'</option>').appendTo(selSvr);
        });
    });
    $('#labelCrt').html(i18n['carte'][lang]);
    cartes = [];
    $.getJSON(GW2API + 'map_names.json?lang=' + lang, function(data) {
        selCrt = $('#carte');
        selCrt.html('<option value="" selected>'+i18n['toutes'][lang]+'</option>');
        $.each(data, function(key, val) {
            $('<option value="'+val['id']+'">'+val['name']+'</option>').appendTo(selCrt);
            cartes[val['id']] = val['name'];
        });
    });
    nomsEvenements = [];
    $.getJSON(GW2API + 'event_names.json?lang=' + lang, function(data) {
        $.each(data, function(key, val) {
            nomsEvenements[val['id']] = val['name'];
        });
    });
    $('#evts').html('');
}

$(function(){
    langue = navigator.language || navigator.userLanguage;
    if (...