var StoryView = ScrollableView.extend({
  
  loaded: false,
  
  el: "#story",
  template: $("#story .template").html(),

  events: {
    "click .links li": "pick",
  },
  
  initialize: function(){
    this.sections = {}
    this.$img = this.$("img")
    this.$content = this.$(".content")
    this.$links = this.$(".links")
    this.$loader = this.$(".loader")
    this.loader = new Loader ()
    this.scroller = ScrollFactory('#story', app.iscroll_options)
  },

  show: function(){
    this.deferScrollToTop()
    app.footer.hide()
    document.body.className = "story"
    if (! this.loaded) {
      this.populate( BACKUP_DB.story )
    }
  },
  
  populate: function(data){
    if (this.loaded) { return }
    this.loaded = true
    this.data = data
    this.$loader.hide()
    this.$content.empty()
    // id title image[uri caption] body
    this.data.forEach(function(row){
      var t = this.template.replace(/{{id}}/, row.id)
                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
      var li = document.createElement("li")
      li.dataset.id = row.id
      li.innerHTML = "<div style='pointer-events: none'>" + row.title + "</div>"
      li.setAttribute('role', "menuitem")
      this.sections[row.id] = row
      this.$links.append(li)
      this.$content.append(t)
    }.bind(this))
    
    this.set_active( this.data[0].id )
  },
  
  pick: function(e){
    var id = e.currentTarget.dataset.id
    this.set_active(id)
  },
  
  set_active: function(id){
    this.$(".active").removeClass("active")

    this.$links.find("[data-id=" + id + "]").addClass("active")
    this.$content.find("[data-id=" + id + "]").addClass("active")
    
    var section = this.sections[id]
    
    if (navigator.onLine) {
      var $replace = this.$img
    
      this.$img.stop().fadeTo(110,0.65, function() {
        $replace.attr("src", section.image.uri)
        $replace.attr("alt", section.image.caption)
      }).fadeTo(130,1)
    }
    
    this.deferScrollToTop()
  },

})