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)
    this.$subtitle = this.$('.subtitle')
    this.subtitle_html = this.$subtitle.html()

  },

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

  pick: function(e){
    this.$el.removeClass("menu")
    app.header.set_back(true)   
    var index = $(e.currentTarget).data("index")
    this.$subtitle.html( $(e.currentTarget).text() )
    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]
    
    count = count || row.images.length
    
    row.images.forEach(function(cell, i){
      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)
      $t.data("flipped", false)
      this.$content.append($t)
      
      var item = $t[0]
      var aa = this.build_aa_item( item )
      aa.q = 0
      this.render( aa, 0 )
      aa.flipped = true
      this.fix_z_index( aa )
      
      var $text = $t.find(".text")
      if ( ($text.height() % 2) == 1) {
        $text.css("margin-bottom", "1px")
      }
      
      loader.preloadImage(cell.uri, function(){
        aa.flipped = false
        this.fix_z_index( aa )
        $t.removeClass('loading')
      }.bind(this))
    }.bind(this))
  },

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

  touchstart: function(e){
    app.archive.row = e.currentTarget
    app.archive.mousedown(e.originalEvent.touches[0])
  },
  touchmove: function(e){
    app.archive.mousemove(e.originalEvent.touches[0])
  },
  touchend: function(e){
    app.archive.mouseup()
  },

  row: null,
  image: null,
  text: null,
  flipped: false,
  q: 0,
  
  mousedown: function(e){
    var aa = app.archive.item = app.archive.build_aa_item( app.archive.row || e.currentTarget )
    aa.mouse_x = e.pageX
    aa.mouse_y = e.pageY
  },
  
  build_aa_item: function(el){
    var aa = {}
    aa.row = el
    aa.flipped = $(aa.row).data('flipped')
    aa.image = $(aa.row).find(".image")[0]
    aa.text = $(aa.row).find(".text")[0]
    aa.q = 0
    return aa
  },
  
  mousemove: function(e){
    if (! app.archive.item) return
    aa = app.archive.item
    var dx = ( aa.mouse_x - e.pageX ) / window.innerWidth
    var dy = ( aa.mouse_y - e.pageY ) / window.innerWidth
    
    var gray, opacity, q
    
    dx = Math.abs(dx)
    dx *= 2
    q = clamp( dx, 0, 1 )
    
    this.render(aa, q)
    
    aa.q = q 
/*
    aa.row.style['transformProp'] = [
      "translateZ(0)",
      "translateX(-50%)",
      "translateY(-50%)",
      "rotateY(" + dx + "deg)",
    ].join(" ")
*/
  },

  render: function(aa, q){
    if ( aa.flipped ) {
      gray = Math.round( (1-q) * 100 )
      opacity = lerp(q, 0.2, 1)
      text_opacity = lerp(q, 1, 0.3)
//       console.log("<", gray, opacity)
    }
    else {
      gray = Math.round( q * 100 )
      opacity = lerp(q, 1, 0.2)
      text_opacity = lerp(q, 0.3, 1)
//       console.log(">", gray, opacity)
    }
    aa.image.style.WebkitFilter = "grayscale(" + gray + "%)"
    aa.image.style.opacity = opacity
    aa.text.style.opacity = text_opacity
  },
  
  margin: 0.3,
  
  mouseup: function(e){
    aa = app.archive.item
    app.archive.row = null
    app.archive.item = null
    var was_flipped = aa.flipped
    var flipped = aa.flipped ? (aa.q < app.archive.margin) : (aa.q > app.archive.margin)
    var dest = was_flipped == flipped ? 0 : 1
    $(aa.row).data('flipped', flipped)

    oktween.add({
      obj: {q: aa.q},
      to: {q: dest},
      duration: 200 * Math.abs(aa.q-dest),
      update: function(o, dt){
        app.archive.render(aa, o.q)
      },
    })

    this.fix_z_index(aa)
  },

  fix_z_index: function (aa) {
    if ( aa.flipped ) {
    console.log(aa.q)
      z = aa.q > app.archive.margin ? 2 : 1
      zz = aa.q > app.archive.margin ? 1 : 2
    }
    else {
      z = aa.q < app.archive.margin ? 2 : 1
      zz = aa.q < app.archive.margin ? 1 : 2
    }
    aa.image.style.zIndex = z
    aa.text.style.zIndex = zz

  },

})