var Jogos = {

    url: '/futebol/services/jogos/',

    templateProximoJogo: "<li><label><span class=\"txtWhite10\">#DIA_HORA#</span><br /><span class=\"txtWhite18\"><b>#DATA#</b></span></label><img src=\"/static/futebol/img-times/#TIME_1#.png\" class=\"jogoSpace\" /><img src=\"/static/futebol/img-times/versus.png\" class=\"jogoSpace\" /><img src=\"/static/futebol/img-times/#TIME_2#.png\" class=\"jogoSpace\" /></li>",

    templateResultados: "<li><label><span class=\"txtWhite18\"><b>#DATA#</b></span></label><img src=\"/static/futebol/img-times/#TIME_1#.png\" class=\"placarSpace\" title='#MANDANTE#'/><span class=\"txtWhite18\"><b>#RESULTADO#</b></span><img src=\"/static/futebol/img-times/#TIME_2#.png\" class=\"placarSpace\" title='#VISITANTE#'/></li>",
                        
    time: "",

    initialize: function(time) {
        this.time = time;
        this.get();
    },

    get: function() {
        $.getJSON(this.url + this.time,
            function(result) {
                Jogos.showProximosJogos(result.proximosJogos);
                Jogos.showUltimosResultados(result.ultimosResultados);
            });
    },

    showProximosJogos: function(proximosJogos) {
        
        $.each(proximosJogos, function(i, jogo) {
            
            var sJogo = Jogos.templateProximoJogo.replace('#DIA_HORA#', jogo.diahora).replace('#DATA#', jogo.data).replace('#TIME_1#', jogo.time1).replace('#TIME_2#', jogo.time2).replace('#TIME_2#', jogo.time2).replace('#VISITANTE#', jogo.visitante);

            $('#ul-proximos-jogos').append(sJogo);
        });

        $('#pane2').jScrollPane({ showArrows: true });
    },

    showUltimosResultados: function(ultimosResultados) {
        $.each(ultimosResultados, function(i, resultado) {
            var sResultado = Jogos.templateResultados.replace('#DATA#', resultado.data).replace('#TIME_1#', resultado.time1).replace('#TIME_2#', resultado.time2).replace('#RESULTADO#', resultado.resultado);
            $('#ul-ultimos-resultados').append(sResultado);
        });

        $('#pane3').jScrollPane({ showArrows: true });
    }
}