$(window).on("load", function() {
  
  var tween;
 
  // size of viewport with hidden overflow
  var $landingWrapper = $(".landing-wrapper");
  
  // wraps slides, larger than viewport; coral background for visualization 
  var $landingInnerContent = $(".landing-inner-content");
  
  
  // AUTO-SCROLL 
  var xMove, yMove; 
  
  var isHovered = false;
  
  // detect scroll direction
  $landingInnerContent.on("mousemove touchmove", function(e) {
  	xMove = "+=0", yMove = "+=0";
    if (e.clientX > $landingWrapper.width() / 2) {
      xMove = "+=500";
    } else {
      xMove = "-=500";
    }
    if (e.clientY > $landingWrapper.height() / 2) {
      yMove = "+=500";
    } else {
      yMove = "-=500";
    }
    
    // one tween per mouse call 
    if(!isHovered) {
      tween = TweenMax.to($landingWrapper, 2, {
        scrollTo: {
          x: xMove,
          y: yMove
        },
        ease: Power0.easeNone,
        overwrite:"all" // added by ZachSaucier from GreenSock forum to stop conflict with previous tweens
      });
    }
  });
  
  /* HELP NEEDED HERE - HOW TO IMPLEMENT? 
  
  when a div is hovered, using .three as an example, trying to make the tween 'pause'... this will be a slider on real website, and i need the user to be able to click through the slides without the mouse movement triggering the animation?
  */
  $(".three").on("mouseenter",function(){
    isHovered = true;
    tween.kill();
  }).on("mouseleave",function(){
    isHovered = false;
  });

});

// --------------------------
// code in question ends here 

/* PARALLAX EFFECTS - COMMENTED OUT FOR CLARITY

// retrieve container position relative to viewport
var rect = $('.landing-wrapper')[0].getBoundingClientRect();
// create mouse object to keep track of mouse coordinates
var mouse = {x: 0, y: 0, moved: false};

$(".landing-wrapper").mousemove(function(e) {
  // set moved property to true when the mouse moves 
  mouse.moved = true;
  // calculate mouse coordinates
  mouse.x = e.clientX - rect.left; // e = event 
  mouse.y = e.clientY - rect.top;
});
 
// ticker event will be called on every frame
TweenLite.ticker.addEventListener('tick', function(){
  // if mouse is moved call parallax function
  if (mouse.moved) {    
    // parallaxIt takes two parameters
    // first is the target element
    // Second is how much the element should move
    // Movement is relative to height and width of parent, in this case the container
    // insert all your parallax calls here
    // you can insert more parameters to change duration etc for each element
    parallaxIt(".two", 1, -75);
    parallaxIt(".one", 1, -100);
    parallaxIt(".three", 1, 100);
  }
  // set moved property to false on each frame so parallax function won't be called more than once
  mouse.moved = false;
});

//parallaxIt(".landing-wrapper", 1, 10);

// Simplest part, take mouse coordinates and container dimensions and animate elements
function parallaxIt(target, duration, movement) {
  TweenMax.to(target, duration, {
    x: (mouse.x - rect.width / 2) / rect.width * movement,
    y: (mouse.y - rect.height / 2) / rect.height * movement, ease:Sine.easeOut}); //SlowMo.ease});
  
}
*/

// Recaclulate container dimensions on resize and scroll

$(window).on('resize scroll', function(){
  rect = $('.landing-wrapper')[0].getBoundingClientRect();
})