Animations work up until averaging

2 files changed, 54 insertions, 5 deletions

diff --git a/client/button.js b/client/button.js
index 370ccdb..f759887 100644
--- a/client/button.js
+++ b/client/button.js
@@ -1,3 +1,51 @@
+function animate() {
+  var delay = 0;
+
+  // load
+  var photos = $('div.photo');
+  photos.each(function(i) {
+    var self = this;
+    _.delay(function () {
+      $(self).show();
+    }, 400 * i);
+  });
+
+  delay += 400 * photos.length;
+
+  // pixelate
+  _.delay(function () {
+    _.each(Session.get('photos'), function(x, i) {
+      _.delay(function() {
+        $('#img-'+x.id).hide()
+        Effects.pixelate(x.id);
+        $('#canvas-'+x.id).show()
+      }, 400 * i);
+    });
+  }, delay + 2000);
+
+  delay += 400 * photos.length;
+  delay += 2000;
+
+  // colorize
+  _.delay(function() {
+    _.each(Session.get('photos'), function(x, i) {
+      _.delay(function () {
+        $('#img-'+x.id).hide()
+        Effects.colorize(x.id);
+        $('#canvas-'+x.id).show()
+      }, 400 * i);
+    });
+  }, delay + 2000);
+
+  delay += 400 * photos.length;
+  delay += 2000;
+
+  _.delay(function() {
+    Effects.average();
+  }, delay + 2000);
+
+}
+
 Template.layout.events({
   'click .logout': function (event) {
     Meteor.logout();
@@ -25,6 +73,7 @@ Template.dates.events({
         Session.set('photos', results.data.data);
       });
       Router.go('photos');
+      _.delay(animate, 2000);
     }
     return false;
   }
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 6c77de9..85af3a0 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -1,10 +1,10 @@
 <template name="photos">
   <div class="photos-wrapper">
-    <h4>(Step 1)</h4>
-    <h2>Processing...</h2>
-    <button class="pixelate btn btn-default">Pixelate</button>
+    <h4 class="step">(Step 1)</h4>
+    <h2 class="title">Processing...</h2>
+    <!-- <button class="pixelate btn btn-default">Pixelate</button>
     <button class="color btn btn-default">Color</button>
-    <button class="average btn btn-default">Average</button>
+    <button class="average btn btn-default">Average</button> -->
     <div class="photos">
       {{#each photos}}
         {{> photo}}
@@ -15,7 +15,7 @@
 </template>
 
 <template name="photo">
-  <div class="photo">
+  <div class="photo" style="display: none;">
     <div class="title">{{date}}</div>
     <img id="img-{{id}}" class="instagram-photo" src="{{proxy images.thumbnail.url}}" crossorigin="anonymous">
     <canvas id="canvas-{{id}}" style="height: 150px; width: 150px;"></canvas>