var ArchiveView = ScrollableView.extend({
  
  el: "#archive",
  menu_template: $("#archive .menu .template").html(),
  row_template: $("#archive .scroll .template").html(),
  
  events: {
    "click .item": "pick",
  },
  
  initialize: function(){
    this.$menu_items = this.$(".menu .items")
    this.$content = this.$(".content")
    this.$loader = this.$(".loader")
    this.scroller = new IScroll('#archive .scroll', app.iscroll_options)
  },

  back: function(){
    this.$el.addClass("menu")
    app.header.set_back(false)
  },

  pick: function(){
    this.$el.removeClass("menu")
    app.header.set_back(true)    
  },
  
  show: function(){
    this.deferScrollToTop()
    app.footer.hide()
    this.back()
    document.body.className = "archive"
  },

  populate: function(data){
    if (this.loaded) { return }
    this.loaded = true
    this.data = data
    this.$loader.hide()
    this.$content.empty()
    
    // id title images[ uri label code caption ]
    this.data.forEach(function(row, index){
      var t = this.row_template.replace(/{{image}}/, row.images[0].uri)
                               .replace(/{{label}}/, row.images[0].label)
                               .replace(/{{code}}/, row.images[0].code)
                               .replace(/{{caption}}/, row.images[0].caption)
      this.$content.append(t)

      var t = this.menu_template.replace(/{{title}}/, row.title)
      var $t = $(t)
      $t.data("title", row.title)
      $t.data("index", index)
      this.$menu_items.append($t)
    }.bind(this))
    
    this.back()
    this.deferScrollToTop()
  },

})