var Selector = View.extend({
  
  el: "#selector",
  template: $("#selector .template").html(),
  
  events: {
    "click .close": "hide",
    "click .options div": "pick",
  },
  
  initialize: function(){
    this.$options = this.$(".options")
  },
  
  lookup: null,
  callback: null,
  select: function(options, callback){
    this.lookup = {}
    this.callback = callback || function(item){ console.log(item) }
    this.$options.empty()
    options.forEach(function(opt){
      this.lookup[String(opt.id)] = opt
      var t = this.template.replace(/{{id}}/, opt.id)
                           .replace(/{{label}}/, opt.label)
      this.$options.append(t)
    }.bind(this))
    this.$el.show()
    app.curtain.show("white")
    this.visible = true
  },
  
  hide: function(){
    this.lookup = this.callback = null
    this.$el.hide()
    app.curtain.hide()
    this.visible = false
  },
  
  pick: function(e){
    var $option = $(e.currentTarget)
    var id = String($option.data("id"))
    var selection = this.lookup[id]

    this.callback( selection )
    this.hide()
  },

})