Home Page Infinite Scroll

/*

home.js
--

This script takes the JSON data from the home page for posts and tweets and
randomly displays them into a randomly selected template which is then


Variables from Home HTML:

var TWEETS (json)
var POSTS (json)

These arrays will hold the "id"s of feed.used Tweets/Instagrams/Posts so we don't
repeat content until we're out of unfeed.used content, then we reset.
*/

/* Breakpoints
-------------------------- */
var bp = {
  xl: 1600.0,
  l: 1200.0,
  m: 880.0,
  s: 700.0,
  xs: 420.0
};


// Wrap it all in a jQuery style closure
(function($){
  // Make sure we can push to GA

  $(document).ready(function(){

    // Hide monster crossing
    if(Modernizr.touch || $(window).width() < bp.s) {
      $('.monster-scare').remove();
    }

    // Speed for firefox
    if(navigator.userAgent.match(/firefox/i)) {
      $('body').addClass('firefox');
      var osDisplace = 5;
    }

    // Speed for ios things
    if(navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
      $('body').addClass('ios');
      var osDisplace = 10;
      var skierSpeed = 1;
    }

    if($('body').hasClass('home')) {


      /*===================================================

          + PAGE

      ===================================================*/

      var page = {
        goingDown: false,
        stopScrolling: false,
        startScrollTimer: null,
        prevScroll: null,
        newScroll: null,
        scrollSpeed: 1,
        scrollInterval: 30
      };

      page.autoScroll = function() {
        if (!page.stopScrolling && $(window).width() > bp.l) {
          if (page.goingDown) {
            window.scrollBy(0, -page.scrollSpeed);
          } else {
            window.scrollBy(0, page.scrollSpeed);
          }
        }
      };

      page.watchScroll = function() {
        var scrollTop = $(window).scrollTop();

        page.autoScroll();
        // Stop automatic scroll when user is scrolling, and change direction if need be.
        // Adding/subtracting an extra 2 pixels for padding to prevent false positive on scroll.
        if (page.prevScroll + 2 < scrollTop || page.prevScroll - 2 > scrollTop) {
          page.stopScrolling = true;
          clearTimeout(page.startScrollTimer);
          page.startScrollTimer = setTimeout(function() {
            page.stopScrolling = false;
          }, 50);
          if (page.prevScroll + 30 < scrollTop) {
            page.goingDown = false;
          }
          if (page.prevScroll - 30 > scrollTop) {
            page.goingDown = true;
          }
        }
        page.prevScroll = scrollTop;
      };

      /*===================================================

          + FEED

      ===================================================*/

      var feed = {
        sectionCount: 10,
        appendCount: 0,
        currentName: 'curated',
        isLoadingSection: false
      };

      // DOM elements
      feed.el = {
        feed: $("#feed"),
        sections: $("#feed .sections"),
        firstSection: null,
        lastSection: null,
        toggle: $('.feed-toggle')
      };

      // Source of single templates
      feed.source = {
        curated: $(".section-curated-template").html(),
        work: $(".work-template").html(),
        instagram: $(".instagram-template").html(),
        twitter: $(".tweet-template").html()
      };

      // Compiled templates
      /*
      feed.templates = {
        instagram: Handlebars.compile(feed.source.instagram),
        twitter: Handlebars.compile(feed.source.twitter),
        work: Handlebars.compile(feed.source.work)
      };
      */

      // Track used data
      feed.used = {
        instagram: [],
        twitter: [],
        work: []
      };

      // Setup
      feed.setup = function() {
        if($(window).width() > bp.s) {
          var offCenter = 140;
        } else {
          var offCenter = 80;
        }
        // Set initial scroll position to middle.
        var $theSections = feed.el.sections.find("section"),
          initialOffset = 0;
        initialOffset = $theSections.eq(Math.floor($theSections.length / 2)).offset().top - offCenter;
        page.prevScroll = initialOffset;
        $(window).scrollTop(initialOffset);
        page.goingDown = false;
      };

      // Add a new section
      feed.newSection = function(feedName) {
        feed.isLoadingSection = true;
        if (feedName === 'curated') {
          // Prep Curated Source
          var $newSection = $(feed.source.curated);
        } else {
          // Prep Dynamic Source
          var sectionSource = $(".section-all-template").html();
          var sectionTemplate = Handlebars.compile(sectionSource),
            numberOfPosts = 7,
            numberOfTweets = 3,
            numberOfInstagrams = 2;
          // Data source that we'll put post items and tweets into.
          var data = {};

          // GET POSTS
          for (var i = 0; i < numberOfPosts; i++) {
            var randomIndex, post = null;
            // If this is the last post that isn't in feed.usedPosts, reset feed.usedPosts.
            if (feed.used.work.length + 1 == POSTS.length) { feed.used.work = [] };
            // Get a random post until it finds one that's not already been feed.used.
            while (!post) {
              randomIndex = Math.floor(Math.random() * (POSTS.length - 1)),
                post = POSTS[randomIndex];
              if (feed.used.work.indexOf(post.id) > -1) {
                post = null;
              }
            }
            feed.used.work.push(post.id);
            // Compile the handlebars template using the post data.
            data["work-" + (i + 1)] = templates.work(post);
          }

          // GET TWEETS
          for (var i = 0; i < numberOfTweets; i++) {
            var randomIndex, tweet = null;
            // If this is the last post that isn't in feed.usedPosts, reset feed.usedPosts.
            if (feed.used.twitter.length + 1 == TWEETS.length) feed.used.twitter = [];
            // Get a random post until it finds one that's not already been feed.used.
            while (!tweet) {
              randomIndex = Math.floor(Math.random() * (TWEETS.length - 1)),
                tweet = TWEETS[randomIndex];
              if (feed.used.twitter.indexOf(tweet.id) > -1) {
                tweet = null;
              }
            }
            feed.used.twitter.push(tweet.id);
            // Compile the handlebars template using the post data.
            data["tweet-" + (i + 1)] = templates.twitter(tweet);
          }

          // GET INSTAGRAMS
          for (var i = 0; i < numberOfInstagrams; i++) {
            var randomIndex, instagram = null;
            // If this is the last post that isn't in feed.usedPosts, reset feed.usedPosts.
            if (feed.used.instagram.length + 1 == INSTAGRAMS.length) feed.used.instagram = [];
            // Get a random post until it finds one that's not already been feed.used.
            while (!instagram) {
              randomIndex = Math.floor(Math.random() * (INSTAGRAMS.length - 1)),
                instagram = INSTAGRAMS[randomIndex];
              if (feed.used.instagram.indexOf(instagram.id) > -1) {
                instagram = null;
              }
            }
            feed.used.instagram.push(instagram.id);
            // Compile the handlebars template using the post data.
            data["instagram-" + (i + 1)] = templates.instagram(instagram);
          }
          var $newSection = $(sectionTemplate(data));
        }
        feed.isLoadingSection = false;
        return $newSection;
      };

      feed.loadImages = function() {
        $('.grid-item').each(function() {
          var gridItem = $(this);
          var $imgs = gridItem.find('img');
          if($imgs.length) {
            $imgs.each(function() {
              var $img = $(this);
              var src = $img.data('src');
              var hdsrc = $img.data('src-hd');

              // If there's an img src
              if(src) {
                if($(window).width() > bp.s) {
                  if(hdsrc) {
                    src = hdsrc;
                  }
                }
                var tmpImg = new Image();
                tmpImg.src = src;
                tmpImg.onload = function() {
                  $img.attr('src', src);
                  if(feed.appendCount === feed.sectionCount) {
                    // Fade in first batch of images
                    $img.fadeIn(200).css({display: 'block'});
                  } else {
                    // Show additional batches immediately
                    $img.show().css({display: 'block'});
                  }
                }
              }
            });
          }
        });
      };

      feed.showFeed = function(feedName) {
        feed.el.feed.fadeOut(500, function() {
          feed.el.sections.html('');
          for (var i = 0; i < feed.sectionCount; i++) {
            var $newSection = feed.newSection(feedName);
            feed.el.sections.append($newSection);
            feed.appendCount ++;
          }
          feed.el.firstSection = feed.el.sections.find("section:first");
          feed.el.lastSection = feed.el.sections.find("section:last");

          // Image lazy loading
          feed.loadImages();

          // Set initial scroll position to middle.
          var $theSections = feed.el.sections.find("section"),
            initialOffset = $theSections.eq(Math.floor($theSections.length / 2)).offset().top;
          page.prevScroll = initialOffset;
          $(window).scrollTop(initialOffset);
          // Fade in active feed
          feed.el.feed.fadeIn(500);

        });
      };

      // Toggle between feeds (everything on / off)
      feed.el.toggle.click(function(e) {
        e.preventDefault();
        if (feed.currentName == 'curated') {
          feed.showFeed('dynamic');
        } else {
          feed.showFeed('curated');
        }
      });


      feed.watchScroll = function() {
        var scrollTop = $(window).scrollTop();
        /*------------------------------------------------------
            Check for Top/Bottom of Page and Load New Section
        ------------------------------------------------------*/
        if (!feed.isLoadingSection) {
          var topReloadPoint = feed.el.firstSection.height();
          var bottomReloadPoint = feed.el.feed.outerHeight() - $(window).height() - feed.el.lastSection.height();
          // Add section to TOP of current feed
          if (scrollTop <= topReloadPoint) {
            $newSection = feed.newSection(feed.currentName);
            feed.el.sections.prepend($newSection);
            feed.appendCount ++;
            feed.loadImages();
            feed.el.lastSection.remove();
            feed.el.lastSection = feed.el.sections.find("section:last");
            feed.el.firstSection = feed.el.sections.find("section:first");
            page.newScroll = scrollTop + feed.el.firstSection.height();
            // Set page.prevScroll to the new scroll so our "page.stopScrolling" check doesn't get conffeed.used.
            page.prevScroll = page.newScroll;
            // Set the scroll.
            $(window).scrollTop(page.newScroll);
          }
          // Add section to BOTTOM of current feed
          if (scrollTop >= bottomReloadPoint) {
            $newSection = feed.newSection(feed.currentName);
            feed.el.firstSection.remove();
            feed.el.sections.append($newSection);
            feed.appendCount ++;
            feed.loadImages();
            feed.el.lastSection = feed.el.sections.find("section:last");
            feed.el.firstSection = feed.el.sections.find("section:first");
            page.newScroll = scrollTop - feed.el.firstSection.height();
            // Set page.prevScroll to the new scroll so our "page.stopScrolling" check doesn't get conffeed.used.
            page.prevScroll = page.newScroll;
            // Set the scroll.
            $(window).scrollTop(page.newScroll);
          }
        }
      };


      /*===================================================

          + SKI FREE

      ===================================================*/

      function getRandomArbitrary (min, max) {
        return Math.random() * (max - min) + min;
      }

      var game = {
        el: {
          canvas: $('.ski-free'),
          monsterCanvas: $('.monster-canvas'),
          start: $('.ski-start'),
          end: $('.ski-end'),
          poles: $('.ski-free .poles').clone().remove(),
          tree: $('.ski-free .tree').clone().remove(),
          rock: $('.ski-free .rock').clone().remove(),
          skier: $('.ski-free .skier'),
          monster: $('.monster'),
          score: $('.ski-free-score'),
        },
        scrollSpeed: 1,
        scrollDelay: 1,
        scrollDisplacement: osDisplace || 2,
        polesCompleted: 0,
        timer: 6 + 2, // in seconds + 2 to balance things out
        state: 'loading',
        score: {
          passed: 0,
          missed: 0
        },
        gutter: 25,
        gateSpace: 600,
        skier: {
          speed: skierSpeed || 2,
          mode: 0,
          width: 60,
          left: 0,
          right: 0,
          top: 0,
          down: false
        },
        monster: {
          speed: skierSpeed || 2,
          mode: 0,
          width: 60,
          left: 0,
          right: 0,
          top: 0,
          interval: null
        },
        poles: [],
        trees: [],
        rocks: []
      }

      game.scrollPage = function() {
        window.scrollBy(0, game.scrollDisplacement);
        game.moveSkier();
      }

      game.monsterAttack = function() {
        if(game.state === 'attack' || game.state === 'playing') {
          if((game.skier.top <= game.monster.top)) {
            game.over();
          }
        }
      }

      /*
       * This is the timer fn()
       * If we missed a pole, start the countdown at 10 seconds
       *
       * start an interval at 1 second
       *   if timer >= 0 ? game over;
       *   else: timer--;
       *
       * If we pass a pole, timer += 2;
       * If we miss a pole, timer -= 2;
       *
       *
       */

      game.countdown = function() {
        if(game.state === 'playing' & game.score.missed > 0) {
          game.timer--;
          // If time is up
          if(game.timer <= 0) {
            game.el.monster.removeClass('chillin');
            game.monster.speed = 2;
            game.skier.speed = 1.5;
            game.monsterInterval = setInterval(game.monsterAttack, page.scrollInterval);
            game.state = 'attack';
            $('.monster-scare').hide();
          }
        }
      }

      game.over = function() {
        // Track game play
        ga('send', 'event', 'Games', 'Ended', 'Ski Free');

        game.state = 'over';
        game.el.canvas.hide();
        $('.monster-scare').hide();
        var message = 'Nice try...';
        var accuracy = Math.floor(game.score.passed/game.poles.length*100) + '%';

        if(game.score.missed === 0) {
          message = 'Not bad... You cleared all ' + game.score.passed + ' gates. But can you do it again!?';
        } else if(game.score.passed === 0) {
          message = 'Nom nom nom! You couldn\'t make it thru a gate!? Just give up.';
        } else {
          if(game.score.passed === 1) {
            message = 'Nom nom nom! Is ' + game.score.passed + ' gate really the best you can do?!';
          } else {
            message = 'Nom nom nom! Is ' + game.score.passed + ' gates really the best you can do?!';
          }
        }
        $('.scoreCard').text(message);

        game.el.skier.hide();

        // Make the monster eat
        game.el.monster.attr('class', 'monster monster-mode-eating');

        cancelAnimationFrame(game.goTime);

        // Show the cheering monster
        // and the speach bubble
        setTimeout(function() {
          game.el.monster.attr('class', 'monster monster-mode-cheering');
          game.el.monster.find('.bubble').text(message).show();
          game.el.end.remove();
          game.el.start.remove();
          $('.poles').remove();
          $('.tree').remove();
          $('.rock').remove();
        }, 400 );

        // Restart the scroll
        feed.interval = setInterval(page.watchScroll, page.scrollInterval);
        page.interval = setInterval(feed.watchScroll, page.scrollInterval);
      }

      game.updatedScore = function(passedOrMissed) {
        game.polesCompleted++;
        var scoreEl = game.el.score;
        if (passedOrMissed == 'passed') {
          game.score.passed += 1;
          if(game.score.missed >= 1) {
            game.timer += 2;
          }
          scoreEl.html(game.score.passed);
        } else if (passedOrMissed == 'missed') {

          // Start the countdown
          game.timer -= 1;


          // Keep score
          game.score.missed += 1;
          scoreEl.html('x');
        }
        scoreEl.addClass('animate');
        setTimeout(function() {
          scoreEl.removeClass('animate');
        }, 300);
      }

      game.ouch = function() {
        // Clear Intervals
        var mode = Math.floor(getRandomArbitrary(1, 2));
        cancelAnimationFrame(game.goTime);
        game.el.skier.attr('class', 'skier skier-mode-crash-' + mode);
        game.skier.down = true;
        setTimeout(function() {
          game.skier.down = false;
          game.el.skier.attr('class', 'skier skier-mode-center');
          game.go();
        }, 1000 );
      }

      game.collisionCheck = function(objects, painful) {
        // Listen for over state here
        if(game.state !== "attack") {
          if((game.skier.top > game.endTop) && game.state !== "over") {
            game.el.monster.removeClass('chillin');
            game.monster.speed = 2;
            game.skier.speed = 1.5;
            game.monsterInterval = setInterval(game.monsterAttack, page.scrollInterval);
            game.state = 'attack';
            $('.monster-scare').hide();
          } else {
            for (i = 0; i < objects.length; i++) {
              var object = objects[i];
              if((game.skier.top > object.top) && !object.passed) {
                object.passed = true;
                if(!painful) {
                  if(game.skier.left > (object.leftBound) && game.skier.right < (object.rightBound)) {
                    game.updatedScore('passed');
                  } else {
                    game.updatedScore('missed');
                  }
                } else {
                  if(game.skier.left < (object.leftBound) && game.skier.right > (object.rightBound)) {
                    game.ouch();
                  }
                }
              }
            }
          }
        }
      }

      game.createStartButton = function() {
        if(!feed.isLoading) {
          var randTop = Math.floor(getRandomArbitrary(1, 25) * 10) + 250;
          var randLeft = Math.floor(getRandomArbitrary(1, 40) * 10);
          $('.sections').find('section:nth-child(6) .row:nth-child(3) .layout-col:nth-child(2)').append('<a href="#" class="starter" />');
          clearInterval(game.checkReady);
        }
      }

      // Kill this
      game.checkReady = setInterval(game.createStartButton, page.scrollInterval);

      game.skier.update = function() {
        if(!game.skier.down) {
          var theMode = game.skier.mode;
          var theClass = "skier-mode-"
          if(theMode < 0) {
            theClass += "left-" + Math.abs(theMode);
          } else if(theMode == 0) {
            theClass += "center";
          } else {
            theClass += "right-" + Math.abs(theMode);
          }
          game.el.skier.attr('class', 'skier ' + theClass);
        }
      }

      // This is now getting called by the
      // new move page interval
      game.moveSkier = function() {
        var elTop = parseInt(game.el.skier.css('top'));
        elTop += (game.scrollDisplacement * game.skier.speed);

        // Check if we're on the boundry
        var elLeft = parseInt(game.el.skier.css('left'));
        var boundLeft = game.gutter - 15;
        var boundRight = $(window).width()-(game.gutter * 2);

        // Point him down if we've reached the bounds
        if(elLeft <= boundLeft && elLeft >= 0) {
          elLeft += 1;
          game.skier.mode = 0
        } else if (elLeft >= boundRight && elLeft <= $(window).width()) {
          elLeft -= 1;
          game.skier.mode = 0
        }
        game.skier.update();

        elLeft += (game.skier.mode * 2.5);
        game.el.skier.css({top: elTop, left: elLeft});


        game.skier.top = elTop;
        game.skier.left = elLeft;
        game.skier.right = game.skier.left + game.skier.width;

        // This is a copy of the move skier fn()
        // new move page interval
        var monsterTop = parseInt(game.el.monster.css('top'));
        monsterTop += (game.scrollDisplacement * game.monster.speed);
        game.el.monster.css({top: monsterTop, left: elLeft});
        game.monster.top = monsterTop;
        game.monster.left = elLeft;
        game.monster.right = game.monster.left + game.monster.width;

        game.collisionCheck(game.poles, false);
        game.collisionCheck(game.trees, true);
        game.collisionCheck(game.rocks, true);

        if(game.monster.left > ($(window).width() / 2)) {
          $('.bubble').addClass('right');
        } else {
          $('.bubble').removeClass('right');
        }
      }

      game.clearIntervals = function() {
        clearInterval(game.interval);
        clearInterval(page.interval);
        clearInterval(feed.interval);
        clearInterval(game.monsterInterval);
        clearInterval(game.timerInterval);
        cancelAnimationFrame(game.goTime);
      }

      // Disable page scrolling
      $(document).bind('mousewheel DOMMouseScroll',function(){
        if(game.state === 'playing') {
          game.stopWheel();
        }
      });


      game.stopWheel = function(e){
        if(!e){ /* IE7, IE8, Chrome, Safari */
          e = window.event;
        }
        if(e.preventDefault) { /* Chrome, Safari, Firefox */
          e.preventDefault();
        }
        e.returnValue = false; /* IE7, IE8 */
      }

      $('body, html').on('keyup', function(e){
        if(game.state === 'playing') {
          if(e.keyCode === 27) {
            game.timer = -10;
          }
        }
      });

      game.go = function(){
        //game.interval = setInterval(game.scrollPage, game.scrollDelay);
        game.goTime = requestAnimationFrame(game.go);
        game.scrollPage();
      }
      game.setup = function() {
        // Track play event
        ga('send', 'event', 'Games', 'Started', 'Ski Free');

        // Speed up scroll
        page.scrollSpeed = game.scrollSpeed;

        // Reset game
        game.el.canvas.hide();
        game.el.monsterCanvas.hide();
        game.el.score.html(0);
        game.score.passed = 0;
        game.score.missed = 0;
        game.polesCompleted = 0;
        game.scrollDisplacement = osDisplace || 5;
        game.skier.mode = 0;
        game.timer = 10;
        game.skier.update();
        $('.ski-free .poles').remove();
        $('.ski-free .tree').remove();
        $('.ski-free .rock').remove();
        game.poles = [];
        game.trees = [];
        game.rocks = [];
        game.state = 'ready';

        // Clear timers
        game.clearIntervals();

        $('.starter').hide();
        $('.monster-scare').show();

        // Setup DOM elements
        var startPos = $(window).scrollTop();
        var sectionHeight = $('#feed section').first().height();
        var gameHeight = sectionHeight*2;
        game.el.canvas.css({top: startPos, height: gameHeight + 1000});
        game.el.canvas.show();

        game.el.monsterCanvas.css({top: startPos, height: gameHeight});
        game.el.monsterCanvas.show();

        // Monster
        var monsterStartLeft = $(window).width()/2 - game.monster.width/2;
        game.el.monster.css({left: monsterStartLeft, top: -100});
        game.monster.speed = 1;
        game.el.monster.attr('class', 'monster chillin monster-mode-running');
        game.el.monster.find('.bubble').hide();

        // Skier
        var skierStartLeft = ($(window).width() / 2) - (game.skier.width / 2);
        game.el.skier.css({left: skierStartLeft, top: 200});
        game.skier.speed = 1;
        game.el.skier.show();

        game.go();
        game.timerInterval = setInterval(game.countdown, 1000);

        // Documented at placeObject instantiation
        game.objectFactory(game.el.poles, game.poles, 1, 26, 160);
        game.objectFactory(game.el.tree, game.trees, 3.925, 26);
        game.objectFactory(game.el.rock, game.rocks, 2.35, 16);

        game.state = 'playing';
      }


      /*
       * @object: A jquery object representing
       * the dom element to reference/duplicate
       * @objArray: The array to store the objects
       * @count: The multiplier which sets the amount of objects to place
       *
       * @width: The objects with
       * @wrapWidth: (optional) Total width (id poles)
       *
       */

      game.objectFactory = function(object, objArray, count,  width, wrapWidth) {
        var sectionHeight = $('#feed section').first().height();
        var gameHeight = sectionHeight*2;
        var maxWidth = $(window).width() - (wrapWidth || 0);

        // Start and end markers
        game.endTop = gameHeight;
        game.el.end.css({top: gameHeight - 200});

        // Set up gates
        var gateCount = Math.floor((gameHeight/game.gateSpace) * count);

        for (var i = 1; i < gateCount; i++) {
          var posTop = ((game.gateSpace * i) / count) + 300;
          var posLeft = $(window).width() * getRandomArbitrary(0.2, 0.8);
          if(posLeft > (maxWidth)) {
            posLeft = maxWidth - 20;
            console.log('whoa', game.gateSpace);
          }

          var $newObject = object.clone();
          var wrap = wrapWidth || 0;
          var rand = Math.floor(getRandomArbitrary(1, 10));
          if(i % rand === 0) {
            $newObject.addClass('small');
          }
          if(i % rand === 1) {
            $newObject.addClass('dead');
          }
          $newObject.appendTo('.ski-free').css({top: posTop, left: posLeft});

          var objects = {
            el: $newObject,
            top: posTop,
            leftBound: Math.round(posLeft),
            rightBound: Math.round(posLeft + (wrap + width))
          }
          objArray.push(objects);
        };
      }

      // Start Game
      // ----------------
      var keys = [],
          body = $('body');

      // Listen if they just start madly typing
      body.on('keyup', function(e){
        if ($(e.target).is('body')) {
          if(e.keyCode !== 27) {
            keys.push(e.keyCode);
            check();
          } else {
            bail();
          }
        }
      });

      // See what they wrote
      function check () {
        if (keys.length < 3) {
          return;
        }
        if (keys[0] === 83 && keys[1] === 75 && keys[2] === 73) {
          if(game.state !== 'over') {
            game.setup();
          }
          bail();
        } else {
          bail();
        }
      }

      // Forget about it
      function bail() {
        keys = [];
      }

      // Start Game
      // ----------------
      $('body').on('click', '.starter', function(e) {
        e.preventDefault();
        game.setup();
      });

      $('body').on('click', '.monster-scare', function(e) {
        e.preventDefault();
        game.setup();
      });

      $('body').on('click', '.monster', function(e) {
        e.preventDefault();
        game.setup();
      });

      // Key Controls
      var gameKeyDown = false;
      $(document).keydown(function(e) {
        if(!gameKeyDown) {
          gameKeyDown = true;
          if(e.which === 40) {
            // Right
            e.preventDefault();
            game.skier.mode = 0;
            game.skier.update();
          } else if(e.which === 39) {
            // Right
            e.preventDefault();
            if(game.skier.mode < 3) {
              game.skier.mode += 1;
              game.skier.update();
            }
          } else if(e.which === 37) {
            // Left
            e.preventDefault();
            if(game.skier.mode > -3) {
              game.skier.mode -= 1;
              game.skier.update();
            }
          }
        }
      }).keyup(function(e) {
        e.preventDefault();
        gameKeyDown = false;
      });


      // IOS Controls
      window.ondeviceorientation = function(event) {
        // Left/Right
        var gamma = Math.round(event.gamma);
        // Up/Down
        var beta = Math.round(event.beta);

        // As long as our skier is not on the ground...
        if(!game.skier.down) {

          // Move the skier left and right
          // ------------

          // Make him straight
          if (gamma <= 5 && gamma >= -5) {
            game.skier.mode = 0;
          }

          // Move the skier left
          if(gamma <= -5 && gamma > -10) {
            game.skier.mode = -1;
          }
          if(gamma <= -10 && gamma > -15) {
            game.skier.mode = -2;
          }
          if(gamma <= -15) {
            game.skier.mode = -3;
          }

          // Move the skier right
          if(gamma >= 5 && gamma < 10) {
            game.skier.mode = 1;
          }
          if(gamma >= 10 && gamma < 15) {
            game.skier.mode = 2;
          }
          if(gamma >= 15) {
            game.skier.mode = 3;
          }


          //// Move the skier up and down
          //// -----------

          //// If it's not over
          //if(game.state !== 'attack') {
            //// Make him chill
            //if (beta <= 30 && beta >= 25) {
              //game.skier.speed = 0.5;
              //game.monster.speed = 0.5;
            //}

            //// Move the skier up
            //if(beta <= 25 && beta > 15) {
              //game.skier.speed = 0.25;
              //game.monster.speed = 0.25;
            //}
            //if(beta <= 15 && beta > 5) {
              //game.skier.speed = 0.125;
              //game.monster.speed = 0.125;
            //}
            //if(beta <= -5) {
              //game.skier.speed = 0.0125;
              //game.monster.speed = 0.0125;
            //}

            //// Move the skier down
            //if(beta >= 30 && beta < 35) {
              //game.skier.speed = 1.25;
              //game.monster.speed = 1.25;
            //}
            //if(beta >= 35 && beta < 40) {
              //game.skier.speed = 1.5;
              //game.monster.speed = 1.5;
            //}
            //if(beta >= 40) {
              //game.skier.speed = 1.75;
              //game.monster.speed = 1.75;
            //}
          //}
        }

        // Update the skier
        // ----------------
        game.skier.update();
      }

      /*===================================================

          + INIT

      ===================================================*/

      // Show curated feed initially
      feed.showFeed('curated');

      // Set scrollTop after 1ms to prevent browser from remembering previous scroll position
      setTimeout(function() {
        feed.setup();
        feed.interval = setInterval(page.watchScroll, page.scrollInterval);
        page.interval = setInterval(feed.watchScroll, page.scrollInterval);
      }, 1);

    }

  });
})(jQuery);