1 files changed, 31 insertions, 13 deletions

diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 8bce7e4a..ab27c824 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -73,7 +73,7 @@ var ArchiveView = ScrollableView.extend({
     count = count || row.images.length
     
     row.images.forEach(function(cell, i){
-      if (i > count) return
+      if (i > 0) return
       var $t = $("<div>")
       $t.addClass("row")// .addClass("loading")
       var t = this.row_template.replace(/{{image}}/, cell.uri)
@@ -84,6 +84,13 @@ var ArchiveView = ScrollableView.extend({
       $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 )
+      
       loader.preloadImage(cell.uri, function(){
         $t.removeClass('loading')
       }.bind(this))
@@ -111,15 +118,19 @@ var ArchiveView = ScrollableView.extend({
   q: 0,
   
   mousedown: function(e){
-    app.archive.item = aa = {}
-    
-    aa.row = app.archive.row || e.currentTarget
+    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.mouse_x = e.pageX
-    aa.mouse_y = e.pageY
     aa.q = 0
+    return aa
   },
   
   mousemove: function(e){
@@ -151,15 +162,18 @@ var ArchiveView = ScrollableView.extend({
     if ( aa.flipped ) {
       gray = Math.round( (1-q) * 100 )
       opacity = lerp(q, 0.3, 1)
+      text_opacity = lerp(q, 1, 0.3)
 //       console.log("<", gray, opacity)
     }
     else {
       gray = Math.round( q * 100 )
       opacity = lerp(q, 1, 0.3)
+      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,
@@ -172,7 +186,7 @@ var ArchiveView = ScrollableView.extend({
     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)
-  console.log( 200 * Math.abs(aa.q-dest) )
+
     oktween.add({
       obj: {q: aa.q},
       to: {q: dest},
@@ -181,15 +195,19 @@ var ArchiveView = ScrollableView.extend({
         app.archive.render(aa, o.q)
       },
     })
-    
-    var q = aa.q
+
+    this.fix_z_index(aa)
+  },
+
+  fix_z_index: function (aa) {
     if ( aa.flipped ) {
-      z = q > 0.5 ? 2 : 1
-      zz = q > 0.5 ? 1 : 2
+    console.log(aa.q)
+      z = aa.q > app.archive.margin ? 2 : 1
+      zz = aa.q > app.archive.margin ? 1 : 2
     }
     else {
-      z = q > app.archive.margin ? 1 : 2
-      zz = q > app.archive.margin ? 2 : 1
+      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