1 files changed, 72 insertions, 7 deletions

diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index f0a796bf..c156aed0 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -6,6 +6,12 @@ var ArchiveView = ScrollableView.extend({
   
   events: {
     "click .item": "pick",
+    "mousedown .row": "mousedown",
+    "touchstart .row": "touchstart",
+    "mousemove .row": "mousemove",
+    "touchmove .row": "touchmove",
+    "mouseup .row": "mouseup",
+    "touchend .row": "touchend",
   },
   
   initialize: function(){
@@ -20,9 +26,11 @@ var ArchiveView = ScrollableView.extend({
     app.header.set_back(false)
   },
 
-  pick: function(){
+  pick: function(e){
     this.$el.removeClass("menu")
-    app.header.set_back(true)    
+    app.header.set_back(true)   
+    var index = $(e.currentTarget).data("index")
+    this.populateDecade(index)
   },
   
   show: function(){
@@ -41,11 +49,6 @@ var ArchiveView = ScrollableView.extend({
     
     // 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)
@@ -56,6 +59,68 @@ var ArchiveView = ScrollableView.extend({
     
     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
   },
 
 })
\ No newline at end of file