var ArchiveView = ScrollableView.extend({
  
  el: "#archive",
  menu_template: $("#archive .menu .template").html(),
  row_template: $("#archive .scroll .template").html(),
  
  events: {
    "click .item": "pick",
    "mousedown .row": "mousedown",
    "touchstart .row": "touchstart",
    "mousemove .row": "mousemove",
    "touchmove .row": "touchmove",
    "mouseup .row": "mouseup",
    "touchend .row": "touchend",
  },
  
  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(e){
    this.$el.removeClass("menu")
    app.header.set_back(true)   
    var index = $(e.currentTarget).data("index")
    this.populateDecade(index)
  },
  
  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.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()

    this.populateDecade(0, 3)
  },
  
  populateDecade: function(index, count){
    this.$content.empty()

    var loader = new Loader()

    var row = this.data[index]
    
    row.images.forEach(function(cell, i){
      if (i > count) return
      var $t = $("<div>")
      $t.addClass("row").addClass("loading")
      var t = this.row_template.replace(/{{image}}/, cell.uri)
                               .replace(/{{label}}/, cell.label)
                               .replace(/{{code}}/, cell.code)
                               .replace(/{{caption}}/, cell.caption)
      $t.html(t)
      this.$content.append($t)

      loader.preloadImage(cell.uri, function(){
        $t.removeClass('loading')
      }.bind(this))
    }.bind(this))
  },

//  ['transformProp'] = "translateZ(0) translateX(-50%) translateY(-50%) ";
// .image, .text

  touchstart: function(e){
    this.$row = e.currentTarget
    this.mousedown(e.touches[0])
  },
  touchmove: function(e){
    this.mousemove(e.touches[0])
  },
  touchend: function(e){
    this.mouseup()
  },
  mouse: { x: 0, y: 0 },
  $row: null,
  
  mousedown: function(e){
    this.$row = this.$row || e.currentTarget
    this.mouse.x = e.pageX
    this.mouse.y = e.pageY
  },
  mousemove: function(e){
    var dx = ( this.mouse.x - e.pageX ) / window.innerWidth
    var dy = ( this.mouse.y - e.pageY ) / window.innerWidth
    this.$row.style['transformProp'] = [
      "translateZ(0)",
      "translateX(-50%)",
      "translateY(-50%)",
      "rotateY(" + dx + "deg)",
    ].join(" ")
  },
  mouseup: function(e){
    this.mouse.x = this.mouse.y = 0
    this.$row = null
  },

})