update gifs for tour

Author: Kevin Meyer

images/tour/f1.gif

@@ -50,8 +50,9 @@ var HomeView = View.extend({
   },
   render: function() {
     this.renderWithTemplate(this);
-    if (app.isFeatureEnabled('First Run Tour')) {
+    if (typeof localStorage.tourHasRun === 'undefined') {
       this.renderSubview(new TourView(), this.queryByHook('tour-container'));
+      localStorage.tourHasRun = 'true';
     }
   },
   onInstanceFetched: function() {

images/tour/f2.gif

@@ -1,23 +1,22 @@
+var $ = require('jquery');
 var View = require('ampersand-view');
 
 var TourView = View.extend({
   props: {
-    tourCount: {
-      type: 'number',
-      default: 0
-    },
-    tourImages: {
-      type: 'array',
-      default: function() {
-        return ['f1.gif', 'f2.gif', 'f3.gif', 'f4.gif', 'f5.gif'];
-      }
-    },
-    tourImagesFolder: {
-      type: 'string',
-      default: './images/tour/'
+    isAnimating: { type: 'boolean', default: true },
+    tourCount: { type: 'number', default: 0 },
+    tourImages: { type: 'array', default: function() {
+      return [
+        { file: 'f1.gif', duration: 4000 },
+        { file: 'f2.gif', duration: 9000 },
+        { file: 'f3.gif', duration: 9000 },
+        { file: 'f4.gif', duration: 6000 },
+        { file: 'f5.gif', duration: 9000 }
+      ];
     }
+    },
+    tourImagesFolder: { type: 'string', default: './images/tour/' }
   },
-
   template: require('./index.jade'),
   events: {
     'click #features ul': 'showFeature',
@@ -27,39 +26,44 @@ var TourView = View.extend({
   render: function() {
     var that = this;
     this.renderWithTemplate(this);
-
     this.$featuresUL = this.query('#features ul');
     this.$featuresLI = this.queryAll('#features li');
     this.$animationGIF = this.query('#animation-gif');
     this.$tourRemove = this.query('#tour-remove');
-
-    this.playAuto = setInterval(function() {
-      that.$featuresLI[that.tourCount].className = '';
-
+    function showAnimation() {
+      var duration = that.tourImages[that.tourCount].duration;
+      // deselect old
+      $('#features li.selected').removeClass('selected');
+      // select new
+      that.$featuresLI[that.tourCount].className = 'selected';
+      that.$animationGIF.src = that.tourImagesFolder + that.tourImages[that.tourCount].file;
       if (that.tourCount === 4) {
         that.tourCount = 0;
       } else {
         that.tourCount++;
       }
-      that.$featuresLI[that.tourCount].className = 'selected';
-      that.$animationGIF.src = that.tourImagesFolder + that.tourImages[that.tourCount];
-    }, 1000 * 7);
+      if (that.isAnimating) {
+        setTimeout(showAnimation, duration);
+      }
+    }
+    showAnimation();
   },
-
   showFeature: function(ev) {
+    this.isAnimating = false;
     var nCLick = ev.target.getAttribute('data-n');
-    if (!nCLick) {
+    if (nCLick === null) {
       return false;
     }
     var nFeature = parseInt(nCLick, 10);
-    this.$featuresLI[this.tourCount].className = '';
+    // deselect old
+    $('#features li.selected').removeClass('selected');
+    // select new
     ev.target.className = 'selected';
     this.$animationGIF.src = this.tourImagesFolder + ev.target.id + '.gif';
     this.tourCount = nFeature;
-    clearInterval(this.playAuto);
   },
   tourRemove: function() {
-    clearInterval(this.playAuto);
+    this.isAnimating = false;
     this.remove();
   }
 });

images/tour/f3.gif

@@ -21,27 +21,26 @@
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
 
-  width: 80%;
-  max-width: 925px;
+  width: 90%;
+  max-width: 1200px;
   position: absolute;
   background-color: white;
-  border-radius: 9px;
 
   #animation, #features {
     float: left;
   }
   #animation {
-    width: 66%;
+    width: 70%;
 
     img {
-      width: 80%;
+      width: 83%;
       margin: 60px auto;
       display: block;
       border: 1px lightgrey solid;
     }
   }
   #features {
-    width: 33%;
+    width: 30%;
 
     h2 {
       margin: 60px 0 0;