var people = (function() {
  var people = ['Will', 'Matt'];

  // Cache Dom
  $el = $('#peopleModule');
  $button = this.$el.find('button');
  $input = this.$el.find('input');
  $ul = this.$el.find('ul');
  template = this.$el.find('#people-template').html();
  
  // Bind Events
  $button.on('click', addPerson);
  $ul.on('click', 'i.del', deletePerson);

  // Initial Render
  _render();
  
  function _render() {
    $ul.html(Mustache.render(template, {people: people}));
  }
  
  function addPerson(value) {
    var name = (typeof value === "string") ? value : $input.val();
    if (!name) return;
    people.push(name);
    _render();
    $input.val('');
  }
  
  function deletePerson(event) {
    var i;
    if (typeof event === "number") {
      i = event;
    } else if (event.type === 'click') {
      var $remove = $(event.target).closest('li');
      i = $ul.find('li').index($remove); 
    } else {
      return;
    }
    people.splice(i, 1);
    _render();
  }
  
  return {
    addPerson: addPerson,
    deletePerson: deletePerson
  }
  
})();