From ca2f0a2671e35c45cba80e0ae0edde6e239add37 Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Tue, 6 Oct 2015 12:20:57 -0700
Subject: [PATCH] Add experiment affordances and fix double-playing animation

---
 Gemfile.lock              |  3 +++
 _includes/hero.html       |  3 +++
 _sass/_animated-hero.scss |  4 ++++
 index.html                |  6 +++---
 js/index.coffee           | 20 ++++++++++++++++++++
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 16e8d7b45..4d270a092 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -132,3 +132,6 @@ PLATFORMS
 DEPENDENCIES
   bourbon
   github-pages
+
+BUNDLED WITH
+   1.10.2
diff --git a/_includes/hero.html b/_includes/hero.html
index d3e594b01..b42ac6d38 100644
--- a/_includes/hero.html
+++ b/_includes/hero.html
@@ -172,5 +172,8 @@ function runPluginsSequence(callback, almostDone) {
   <h4>The extensible, open source mail&nbsp;client.</h4>
   <div class="cta" style="margin-top:40px;">
     <div id="play-intro"><div class="triangle"></div>Play Intro</div>
+    <a id="home-download-button" style="display: none;" class="btn btn-large btn-emphasis" href="https://invite.nylas.com/download">
+      Download
+    </a>
   </div>
 </div>
diff --git a/_sass/_animated-hero.scss b/_sass/_animated-hero.scss
index 35759d181..f95eea566 100644
--- a/_sass/_animated-hero.scss
+++ b/_sass/_animated-hero.scss
@@ -84,6 +84,10 @@ img {
   top: 50%;
   left: 50%;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   @include animation(fadeIn 2s $ease-in-out-cubic both);
 }
 
diff --git a/index.html b/index.html
index 3a20a2e71..3b1f5cef8 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@ overview: true
   </div>
   -->
 
-  <div class="grid feature" style="margin-top: 60px;">
+  <div id="beautiful-inside-and-out" class="grid feature" style="margin-top: 60px;">
     <div class="unit two-thirds" style="margin-top:60px;">
       <h3>Beautiful inside and out.</h3>
       <p style="max-width:530px;">N1 is designed to be friendly, with an emphasis on clean typography, subtle drop shadows, and delightful buttons. When you use N1, things feel familiar with nothing out of place. It's just the way things should be.</p>
@@ -47,7 +47,7 @@ overview: true
     </div>
   </div>
 
-  <div class="grid feature">
+  <div id="all-platforms" class="grid feature">
     <div class="unit one-third">
       <img src="{{ site.baseurl }}/images/watercolor_earth.png" style="width:300px;"/>
     </div>
@@ -58,7 +58,7 @@ overview: true
     </div>
   </div>
 
-  <div class="grid feature">
+  <div id="developers-welcome" class="grid feature">
     <div class="unit two-thirds">
       <h3>Developers welcome.</h3>
       <p style="max-width:530px;">
diff --git a/js/index.coffee b/js/index.coffee
index 76777c784..9c2018b4d 100644
--- a/js/index.coffee
+++ b/js/index.coffee
@@ -272,6 +272,11 @@ fixStaticClientImages = ->
   nominalComposer = 615
   innerWidth = $("#static-client-images").innerWidth() - padding - overhang
 
+  if window.experiments.disableAnimation
+    heroOverhangHeight = 200
+    $("#static-client-images").css
+      "margin-top": -1 * (heroOverhangHeight + $(window).height() * 0.2)
+
   scale = Math.min(1 - (nominalScreenshot - innerWidth) / nominalScreenshot, 1)
   $(".static-screenshot, #static-screenshot-wrap").width(nominalScreenshot * scale)
   $(".static-composer").width(nominalComposer * scale)
@@ -304,16 +309,26 @@ onResize = ->
   positionAnimationContainer()
   fixStaticClientImages()
 
+window.experiments = {}
+
 window.onresize = onResize
 $ ->
   onResize()
   $("body").addClass("initial")
 
+  animationPlaying = false
   $("#play-intro, .hero-text").on "click", _.debounce ->
+    return if window.experiments.disableAnimation
+    return if animationPlaying
+    animationPlaying = true
     ga?("track", "event", "N1", "intro", "start")
     fixHeroHeight()
     $("body").removeClass("finished").removeClass("start-animation")
 
+    $("#hero-text").on "animationend", ->
+      $("#hero-text").off "animationend"
+      $("#hero-text").hide()
+
     $wc = $("#window-container")
     if $wc.length > 0
       $wc.addClass("fade-out")
@@ -332,8 +347,10 @@ $ ->
       $wc.addClass("fade-out")
       $wc.on "animationend", -> $wc.remove()
       $("body").addClass("finished")
+      $("#hero-text").show()
       $("#static-client-images").css
         "margin-top": "-320px"
+      animationPlaying = false
 
       # $("#static-client-images").height($("#hero").height() - 250)
 
@@ -361,4 +378,7 @@ $ ->
       , 2200
   , 100
 
+window.onload = ->
+  onResize()
+
 console.log("%cWe love your curiosity! Let us know what other easter eggs you find. 😊 We're always looking for extraordinary people. Check out the jobs page or give me a ping at evan@nylas.com if you're interested in learning more about some of the big challenges we're tackling", "font-size: 16px;font-family:FaktPro, sans-serif;line-height:1.7")