console.clear();

// Init controller
var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    duration: $("section").height(),
    triggerHook: 0.025,
    reverse: true
  },
  vertical: false
});

var scenes = {
  scene1: {
    "section-1": "anchor1"
  },
  scene2: {
    "section-2": "anchor2"
  },
  scene3: {
    "section-3": "anchor3"
  },
  scene4: {
    "section-4": "anchor4"
  }
};

for (var key in scenes) {
  // skip loop if the property is from prototype
  if (!scenes.hasOwnProperty(key)) continue;

  var obj = scenes[key];

  var scene = new ScrollMagic.Scene({
    triggerElement: "#section-1",
    duration: 200,
    triggerHook: "onLeave"
  }).addTo(controller);

  for (var prop in obj) {
    // skip loop if the property is from prototype
    if (!obj.hasOwnProperty(prop)) continue;

    new ScrollMagic.Scene({ triggerElement: "#" + prop })
      .setClassToggle("#" + obj[prop], "active")
      .addTo(controller);

    var tween = TweenMax.fromTo(
      "#section-1 .title",
      1,
      { xPercent: 25, scale: 0.6 },
      { xPercent: 75, x: 0, scale: 1 }
    );
    new ScrollMagic.Scene({
      triggerElement: "#section-1",
      duration: $("#section-1").outerWidth(true)
    })
      .setTween(tween)
      .addTo(controller)
      .tweenChanges(false);

    new ScrollMagic.Scene({
      triggerElement: "#section-1",
      duration: $("#section-1").outerWidth(true)
    })
      .on("enter", function() {
        $("#anchor1").addClass("selected");
        $("#section-1").addClass("animated fadeInUp");
      })
      .on("leave", function() {
        $("#anchor1").removeClass("selected");
        $("#section-1").removeClass("animated fadeInUp");
      })
      .addTo(controller);

    //--------------
    //SECTION-2 -- IMAGE SHOULD GO TO CENTER ON SECTION 2
    //--------------
    var tween = TweenMax.fromTo(
      "#section-2 .animated-items",
      1,
      { xPercent: -100 },
      { xPercent: 0, x: 0 }
    );
    new ScrollMagic.Scene({
      triggerElement: "#section-2",
      offset: -750,
      duration: $("#section-2").outerWidth(true)
    })
      .setTween(tween)
      .addTo(controller)
      .tweenChanges(false);

    new ScrollMagic.Scene({
      triggerElement: "#section-2",
      duration: $("#section-2").outerWidth(true)
    })
      .on("enter", function() {
        $("#anchor2").addClass("selected");
        $("#section-2").addClass("animated slideIn");
      })
      .on("leave", function() {
        $("#anchor2").removeClass("selected");
        $("#section-2").removeClass("animated slideIn");
      })
      .addTo(controller)
      .tweenChanges(false);

    //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL

    var tween1 = new TimelineMax();
    tween1.to(".click-element", 0.3, {
      x: 500,
      className: "+=active"
    }, 0)
    .to('#section-2', 0.3,{
      className: "+=darkblue"
    }, 0)

    $(".click-element").on("click", function(e) { 
      e.preventDefault; 
      if($('.click-element').hasClass('active')){ 
        tween1.reverse(); 
      }else{  
        tween1.play();
      }
    });

    var scene1 = new ScrollMagic.Scene({
      triggerElement: "#section-2",
    })
      .setClassToggle("body", "darkblue")
      .setTween(tween1)
      .addTo(controller);

    scene1.addIndicators();
  }
}












// Change behaviour of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {
  TweenMax.to(window, 0.5, {
    scrollTo: {
      x: target,
      autoKill: true // Allow scroll position to change outside itself
    },
    ease: Cubic.easeInOut
  });
});

//  Bind scroll to anchor links using Vanilla JavaScript
var anchor_nav = document.querySelector(".anchor-nav");

anchor_nav.addEventListener("click", function(e) {
  var target = e.target,
    id = target.getAttribute("href");

  if (id !== null && id.length > 0) {
    e.preventDefault();
    controller.scrollTo(id);

    if (window.history && window.history.pushState) {
      history.pushState("", document.title, id);
    }
  }
});

window.addEventListener("wheel", onWheel);

function onWheel(event) {
  event.preventDefault();

  var normalized;
  var delta = event.wheelDelta;
  var scroll =
    (window.pageXOffset || document.scrollLeft) - (document.clientLeft || 0) ||
    0;

  if (delta) {
    normalized = delta % 120 == 0 ? delta / 120 : delta / 12;
  } else {
    delta = event.deltaY || event.detail || 0;
    normalized = -(delta % 3 ? delta * 10 : delta / 3);
  }

  normalized *= -1;

  TweenLite.to(window, 0.4, { scrollTo: { x: scroll + 200 * normalized } });
}