$(document).ready(function() {

  set_heights();

  overall_h = $('#main-title').height();
  console.log(overall_h);

  var mainWrapper = document.getElementsByTagName('main')[0],
    banner = document.getElementById('banner'),

    // set the duration in pixels
    duration = wh + $('#main-title').height(),

    // define the main controller for ScrollMagic
    // (we can have multiple controllers if needed)
    controller = new ScrollMagic.Controller({
      loglevel: 0,
      globalSceneOptions: {
        // set trigger hook to top of viewport
        triggerHook: 0
      }
    });

  // start a new ScrollMagic scene by calling the
  // provided method from the ScrollMagic Class
  var bannerScene = new ScrollMagic.Scene({
    triggerElement: mainWrapper,
    duration: lower_height
  })

  // start our tween/animation
  bannerScene.setTween(new TimelineMax().add([
    TweenMax.to(banner, 1, {
      height: wh/2
    }),
    TweenMax.to('h1#header_title', 1, {
      opacity: 1,
      y: -100
    }),
  ]))

  // set hero block fixed for duration of wrapper
  bannerScene.setPin('#banner', {
    pushFollowers: false
  })

  // add helpful indicators to help with setting up animations right
  bannerScene.addIndicators()

  // finally, we add the animation to the
  // main controller we defined in the beginning
  bannerScene.addTo(controller);

  bannerScene.on("end", function(event) {
    console.log("End banner scene");
  });

  // start a new ScrollMagic scene by calling the
  // provided method from the ScrollMagic Class
  var revealScene = new ScrollMagic.Scene({
    triggerElement: mainWrapper,
    duration: upper_height
  })

  // start our tween/animation
  revealScene.setTween(new TimelineMax().add([
    TweenMax.to('#reveal', 1, {
      opacity: 1,
      y: -100
    }),
  ]))

  // add helpful indicators to help with setting up animations right
  revealScene.addIndicators()

  // finally, we add the animation to the
  // main controller we defined in the beginning
  revealScene.addTo(controller);

  revealScene.on("end", function(event) {
    console.log("End reveal scene");
  });

});

$(window).resize(function() {
  set_heights();
});

function set_heights() {
  wh = window.innerHeight;
  upper_height = 70 * wh / 100;
  lower_height = 30 * wh / 100;
  h1_pad = lower_height / 2 - $('h1#header_title').height() / 2;
  $('h1#header_title').css('padding-top', h1_pad + 'px');
  $('h1#header_title').css('padding-bottom', h1_pad + 'px');
  $('#banner').css('height', upper_height + 'px');
}