router.get('/browse', function (req) {
  var vm = new Vue({
    el: 'body',
    data: {
      races: utils.inlineData
    },
    methods: {
      refresh: function () {
        $('.refresh-effect').fadeOut(180);
        utils.xhr.get('/api/races').done(function (data) {
          vm.$data.races = data;
          Vue.nextTick(vm.initDOMPlugins);
        }).always(function (argument) {
          $('.refresh-effect').fadeIn(180);
        });
      },
      initDOMPlugins: function () {
        $('[data-toggle="tooltip"]').tooltip();
        $('[data-toggle="popover"]').popover({
          html: true
        });
        console.log('updated tooltips');
      }
    },
    components: {
      serverBrowser: {
        computed: {
          fullCarList: function () {
            return _.map(this.race.cars, function (car) {
              return car.manufacturer + " " + car.namePretty;
            }).join(", ");
          },
          carCount: function () {
            var count = this.race.cars.length;
            if (count > 1) return count + ' cars';
            return count + ' car';
          },
          slotCount: function () {
            var count = this.race.drivers.length;
            var maxSlots = (this.race.chosenTrack) ? '/' + this.race.chosenTrack.slots : '';
            return count + maxSlots;
          },
          trackName: function () {
            return (this.race.chosenTrack) ? this.race.chosenTrack.namePretty : this.race.track;
          },
          popoverContent: function() {
            var carOptions = [];
            _.map(this.race.cars, function (car) {
              var carMakeModel = '<option value="' + car.id + '">' + car.manufacturer + ' ' + car.namePretty + '</option>';
              carOptions.push(carMakeModel);
            });
            var popoverContent = "<form action='/race/" + this.race.raceID + "/join' method='post'><div class='form-group'><label for='carID'>Select car</label><select class='form-control' name='carID'>" + carOptions.join('') + "</select></div><div class='form-group'><button class='btn btn-primary btn-block' type='submit'>Join Queue</button></div></form>";
            return popoverContent;
          }
        }
      }
    }
  });

  var io = window.io.connect(utils.conf.host);

  io.on('race_update', function (race) {
    console.log(race.name);
    debugger;
    // check if this race matches a displayed race
    var item = _.find(vm.$data.races, {'id': race.id});
    var isMatch = !_.isUndefined(item);

    if (race.status != 'BOOKING' || race.status != 'INSESSION') {
      // if it matches, remove it
      if (isMatch) _.remove(vm.$data.races, item);
    } else {
      // it matches, update it
      utils.xhr.get('/api/race/' + race.id + '/withAssociations').done(function (race) {
        console.log('race_update ' + race);
        item = race;
      });
    }

    // vm.$data.instance.race.status = race.status;
  });
});