1 files changed, 39 insertions, 6 deletions

diff --git a/StoneIsland/platforms/ios/www/js/lib/blogs/StoryView.js b/StoneIsland/platforms/ios/www/js/lib/blogs/StoryView.js
index 7f9b30a1..84684ff7 100644
--- a/StoneIsland/platforms/ios/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/platforms/ios/www/js/lib/blogs/StoryView.js
@@ -1,32 +1,65 @@
-var StoryView = View.extend({
+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.scroller = new IScroll('#story .scroll')
+    this.scroller = new IScroll('#story', app.iscroll_options)
   },
 
   show: function(){
+    this.deferScrollToTop()
+    app.footer.hide()
     document.body.className = "story"
   },
   
   populate: function(data){
+    if (this.loaded) { console.warn("populate called twice"); 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(/{{image}}/, row.image.url)
-                           .replace(/{{date}}/, row.date)
-                           .replace(/{{title}}/, row.title)
-                           .replace(/{{body}}/, row.body)
+      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 = row.title
+      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.$links.find(".active").removeClass("active")
+    this.$links.find("[data-id=" + id + "]").addClass("active")
+
+    this.$content.find(".active").removeClass("active")
+    this.$content.find("[data-id=" + id + "]").addClass("active")
+    
+    var section = this.sections[id]
+    this.$img.attr("src", section.image.uri)
+    this.deferScrollToTop()
   },
 
 })
\ No newline at end of file