script(src='/socket.io/socket.io.js')
script(src='/javascripts/ICanHaz.min.js')
script(src='http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js')
script(src='/javascripts/backbone.js')
script(id='die', type='text/html')
  li A {{ color }} die with the {{ side }} side up
script(id='player', type='text/html')
  li {{ name }} - 
  div(id='{{ id }}'){{ score }}
script
  var playerId = '#{playerid}';
  var socket = io.connect();
  socket.on('connect', function(data) {
    socket.emit('join game', { gameId: '#{gameId}'}, function(joined, serverPlayers, scores) {
      _.each(serverPlayers, function(p) {
        p.score = scores[p.id];
        players.add(new Player(p));
      })
      $('#msgArea').html('Joined game: ' + joined);
      setButtonVisibility(joined);
    });
  });
  socket.on('news', function (data) {
    socket.emit('my other event', { my: 'data' });
  });
  socket.on('addPlayer', function (data) {
    console.log('Add player: ');
    console.log(data);
    players.add(new Player(data));
  });
  socket.on('updateTable', function (data) {
    console.log(data);
    table.setBrains(data.tableBrains);
    table.setShotguns(data.tableShotguns);
    table.setActivePlayer(data.activePlayer);
    tableview.render();

    $('#tableDice').html('');
    _.each(data.dice, function(die) {
      var die = ich.die(die);
      $('#tableDice').append(die);

    });
  });
  socket.on('resetTable', function (data) {
    table.reset();
    $('#tableDice').html('');
    table.setActivePlayer(data.activePlayer);
    tableview.render();
    updateScore(data.scoreUpdate);
    setButtonVisibility(data.activePlayer);
  });
  var object = {};

  _.extend(object, Backbone.Events);

  function setButtonVisibility(activePlayerId) {
    if (activePlayerId === playerId) {
      showButtons();
    } else {
      hideButtons();
    }
  }

  function showButtons() {
    onTurnButtons(function(name) {
      $(name).removeClass('hidden');
    });
  }

  function hideButtons() {
    onTurnButtons(function(name) {
      $(name).addClass('hidden');
    });
  }

  function onTurnButtons(fn) {
    fn('#rollBtn');
    fn('#endTurnBtn');
  }

  function roll() {
    $.getJSON('/game/#{game.cid}/roll', function(dice) {
        <!--$('#msgArea').html('Server says: ' + data + '<br>');-->
      }
    );
  }
  function endTurn() {
    $.getJSON('/game/#{game.cid}/endTurn', function(data) {
      }
    );
  }
  function updateScore(data) {
    console.log(data);
    var p = players.get(data.playerId);
    p.set({score: data.score});
  }
h1 #{title}
div(id='playArea')
  Your game: #{game.cid}
  div(id='tablePlayer')
  div(id='tableBrains')
  div(id='tableShotguns')
  div(id='tableDice')
  button(id='rollBtn', class='hidden') Roll
  button(id='endTurnBtn', class='hidden') End turn
  script
    (function ($) {
      Table = Backbone.Model.extend({
        initialize: function() {
          this.brains = 0;
          this.shotguns = 0;
        },
        setBrains: function(brains) {
          this.brains = brains;
        },
        setShotguns: function(shotguns) {
          this.shotguns = shotguns;
        },
        setActivePlayer: function(player) {
          this.activePlayer = player;
        },
        reset: function() {
          this.brains = 0;
          this.shotguns = 0;
        }
      });
      
      TableView = Backbone.View.extend({
        el: $('#playArea'),
        initialize: function () {
        },
        events: {
          "click #rollBtn":  "rollAction",
          "click #endTurnBtn":  "endTurnAction"
        },
        rollAction: function () {
          roll();
        },
        endTurnAction: function () {
          endTurn();
        },
        render: function() {
          $('#tablePlayer').html('Current player: ' + table.activePlayer);
          $('#tableBrains').html('Brains: ' + table.brains);
          $('#tableShotguns').html('Shotguns: ' + table.shotguns);
        }
      });
      
      tableview = new TableView;
      table = new Table();
    })(jQuery);
  div(id='msgArea')
div(id='scoreBoard')
  button(id='add-friend') Add Friend
  script
    (function ($) {
      Player = Backbone.Model.extend({
        name: 'unnamed',
        initialize: function(options) {
          if (options.score) {
            this.score = options.score;
          }
          if (options.name) {
            this.name = options.name;
          }
          if (options.id) {
            this.id = options.id;
          }
          console.log('Player.initialize');
          console.log(options);
          this.bind("change:score", function(model) {
            $("#" + model.id).html(model.get('score'));
          });
        }
      });
    
      Players = Backbone.Collection.extend({
        model: Player,
        initialize: function (models, options) {
          this.bind("add", options.view.addFriendLi);
        },
        addByName: function(name) {
          console.log('Add by name: ' + name);
          var p = new Player({name: name});
          console.log('Add: ' + p + '(' + p.get('name') + ')');
          this.add(p);
        }
      });
    
      ScoreView = Backbone.View.extend({
        el: $('#scoreBoard'),
        initialize: function () {
          this.friends = new Players( null, { view: this });
        },
        events: {
          "click #add-friend":  "showPrompt",
          "click #rollBtn":  "performRoll",
        },
        showPrompt: function () {
          var friend_name = prompt("Who is your friend?");
          var friend_model = new Player({ name: friend_name });
          this.friends.addByName( friend_name );
        },
        performRoll: function () {
          roll();
        },
        addFriendLi: function (model) {
          var playerTemplate = ich.player({name: model.get('name'), score: model.get('score'), id: model.id});
          $("#scoreTable > ul").append(playerTemplate);
        },
        render: function(model) {
          $("#scoreTable > ul").append("<li>" + model.get('name') + ", " + model.get('score') + "</li>");
        }
      });
      
      scoreview = new ScoreView;
      players = new Players( null, { view: scoreview });
    })(jQuery);

  Current score
  div(id='scoreTable')
    ul