var doc = document;

doc.querySelector('.js-get-started-btn').addEventListener('click', function () {
  doc.querySelector('.js-sticky-form').classList.add('is-visible');
  doc.querySelector('.js-get-started-btn__inner').classList.toggle('show-me');

});

// scroll links
var anchorLinks = doc.querySelectorAll('.js-anchor-link');
if (anchorLinks) {
  for (var i = 0; i < anchorLinks.length; i++) {
    anchorLinks[i].addEventListener('click', function () {
      document.querySelector('#' + this.getAttribute('data-anchor')).scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });
    });
  }
}

// Sticky  Component
var Sticky = (function () {
  var CSS_CLASS_ACTIVE = 'is-fixed';

  var Sticky = {
    element: null,
    position: 0,
    addEvents: function () {
      window.addEventListener('scroll', this.onScroll.bind(this));
    },
    init: function (element) {
      this.btn = doc.querySelector('.js-get-started-btn__inner');
      this.element = element;
      this.child = element.children[0];
      this.addEvents();
      this.position = element.getBoundingClientRect().top;

      this.onScroll();
    },
    aboveScroll: function () {
      return this.element.getBoundingClientRect().top <= 100;
    },
    onScroll: function (event) {
      if (window.innerWidth > 768) {
        if (this.aboveScroll()) {
          this.setFixed();
        } else {
          this.setStatic();
        }
      }
    },
    setFixed: function () {
      var viewportOffset = this.btn.getBoundingClientRect();
      // these are relative to the viewport, i.e. the window

      var left = viewportOffset.left;
      console.log(left);
      this.btn.style.left = left + 'px';
      this.btn.classList.add(CSS_CLASS_ACTIVE);

    },
    setStatic: function () {
      this.btn.classList.remove(CSS_CLASS_ACTIVE);
      this.btn.style.left = 'auto';
    }
  };

  return Sticky;

})();

//  Init Sticky
var sticky = document.querySelector('.js-sticky');
if (sticky)
  Sticky.init(sticky);


// drawers
var drawerToggles = doc.querySelectorAll('.js-drawer-toggle');
var drawers = doc.querySelectorAll('.js-drawer');

for (var i = 0; i < drawers.length; i++) {
  drawerToggles[i].addEventListener('click', function () {
    var drawerName = this.getAttribute('data-drawer');
    targetDrawer = doc.querySelector('.js-drawer[data-drawer="' + drawerName + '"]');

    // remove current active classes
    if (!this.classList.contains('is-open')) {
      // var prevDrawer =  doc.querySelector('.js-drawer-toggle.is-open');
      /*
            if(prevDrawer) {
              prevDrawer.classList.remove('is-open');
              prevDrawer.nextElementSibling.classList.remove('is-open');
              prevDrawer.nextElementSibling.style.minHeight = 0;
            }*/

      // duplicate drawer so we can get its height
      // this will var us animate opening to the correct height

      var clonedDrawer = targetDrawer.cloneNode(true);
      var drawerHeight = '200px';

      clonedDrawer.classList.add('is-open');
      clonedDrawer.classList.add('cloned-drawer');


      doc.querySelector('.js-drawers').appendChild(clonedDrawer);

      drawerHeight = clonedDrawer.offsetHeight;

      clonedDrawer.parentNode.removeChild(clonedDrawer);


      targetDrawer.classList.add('is-open');

      targetDrawer.style.minHeight = drawerHeight + 'px';


      for (var i = 0; i < drawers.length; i++) {
        drawers[i].classList.add('is-inactive');
      }

      this.parentNode.classList.remove('is-inactive');

      var thisOffset = offset(this);

      var self = this;

      doc.querySelector('.js-tabs').classList.add('is-hidden');

      /*
       setTimeout(function () {
       //self.parentNode.scrollIntoView({block: 'end', behavior: 'smooth'});
       //window.scroll({ top: self.getBoundingClientRect().top + window.scrollY, behavior: 'smooth'});
       }, 401);
       */


    } else {
      this.classList.remove('is-open');

      targetDrawer.classList.remove('is-open');
      ttargetDrawer.style.minHeight = '0';

      for (var i = 0; i < drawers.length; i++) {
        drawers[i].classList.remove('is-inactive');
      }
    }
  });
}

/*----------------------
 Helper Functions
 ----------------------*/
function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function offset(elt) {
  var rect = elt.getBoundingClientRect(),
    bodyElt = document.body;

  return {
    top: rect.top + bodyElt.scrollTop,
    left: rect.left + bodyElt.scrollLeft
  }
}