$(function() {
    var r = $('#fragment');
    crossroads.routed.add(console.log, console); //log all routes
    crossroads.addRoute('/exchange/{from}/{to}/{what}', function(from, to, what) {
        $.ajax({
            url : '/assets/partials/exchange?from='+from+'&what='+what+'&to='+to,
            type: 'GET',

            success: function(data){
                r.html(data);
            }
        });
    });

    crossroads.addRoute('/waiting-for-start', function() {
        $.ajax({
            url : '/assets/partials/loader.html',
            type: 'GET',

            success: function(data){
                r.html(data);
            }
        });
    });

    crossroads.addRoute('/game', function() {
        $.ajax({
            url: '/assets/partials/game.html',
            type: 'GET',

            success: function (data) {
                r.html(data);
                $.getJSON('api/player-info?name=' + playerName, function(json){
                    $('#name').html(playerName);
                    $('#role').html(json.role);
                    $('#object').html(json.object);
                    $('#race').html(json.race);
                });

                $("#topLeftAlarm").on("click", function() {alert("topLeftAlarm");});
                $("#topRightAlarm").on("click", function() {alert("topRightAlarm");});
                $("#bottomLeftAlarm").on("click", function() {alert("bottomLeftAlarm");});
                $("#bottomRightAlarm").on("click", function() {alert("bottomRightAlarm");});
                $("#centerAlarm").on("click", function() {alert("CenterAlarm ");});
                $("#fixItRalph").on("click", function() {alert("fixItRalph ");})
            }
        });
    });

    crossroads.addRoute('/lobby', function() {
        $.ajax({
            url : '/lobby',
            type: 'GET',
            success: function(data){
                r.html(data);
                $.getJSON('api/player-list', function(json){
                    $.getJSON('api/who-am-i', function(json2){
                        var whoAmI = json2;
                        for(key in json){
                            var name = json[key]
                            if(name == whoAmI){
                                $('#lobby button[data-choice="' + name + '"]').removeClass('btn-default').addClass('btn-success');
                            }else{
                                $('#lobby button[data-choice="' + name + '"]').removeClass('btn-default').addClass('btn-danger');
                            }
                        }
                    });
                });
                $('body').one('click', '.choose button.btn-default', function(e){
                    e.preventDefault();
                    var data = {
                        call : $(this).parent('.choose').attr('id'),
                        param : $(this).attr('data-choice')
                    };

                    if(conn.readyState == 1){
                        conn.send(JSON.stringify(data));
                    }
                });
            }
        });
    });

    var sectionRoute = crossroads.addRoute('/{section}', function(section){
        console.log("Section route");
        $.ajax({
            url : section,
            type: 'GET',

            success: function(data){
                r.html(data);
            }
        });
    });

    function onSectionMatch(section, id){
        console.log(section +' - '+ id);
    }

    sectionRoute.matched.add(onSectionMatch);
    //setup hasher
    function parseHash(newHash, oldHash){
        console.log("Parsing "+newHash);
        crossroads.parse('/'+newHash);
    }

    hasher.initialized.add(parseHash); //parse initial hash
    hasher.changed.add(parseHash); //parse hash changes
    hasher.init(); //start listening for history change

//update URL fragment generating new history record
    hasher.setHash('menu');
    /* var a = document.querySelectorAll('a')
    for(i=0;i<a.length;i++){
        a[i].onclick=function(e){
            e.preventDefault();
            crossroads.parse('/' + this.href.split('/').pop());
        }
    }*/
})