doctype html
html
  head
    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
    meta charset="utf-8"
    meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"

    link href="/favicon.png" rel="icon" type="image/png"
    link href="/favicon.ico" rel="icon"

    title = current_page.data.title || "Chef InSpec"
    meta name= "description" content = current_page.data.description

    link rel='stylesheet' type='text/css' href='/css/inspec_tutorial.css'
    link rel='stylesheet' type='text/css' href='/stylesheets/vendor/fontawesome.min.css'

    == stylesheet_link_tag :site

  body class="#{page_classes}"
    = partial "layouts/global-message"

    .container
      = partial "layouts/nav"

      main#main-content
        == yield

    = partial "layouts/footer"

    script src='https://buttons.github.io/buttons.js'
    script src='/scripts/inspec_tutorial.js'
    script src='/dist/inspec_tutorial.js'
    script src='/javascripts/vendor/jquery.min.js'
    script src='https://s3.amazonaws.com/menumaker/menumaker.min.js'
    div inspec-tutorial="true" class="inspec-tutorial" hidden="true"
      = "Loading"

    == javascript_include_tag "all"

    javascript:

      function initSlideGroup(group) {
        var prev = -1;
        var links = $(group).find('a')

        links.click(function(e) {
          e.stopPropagation()

          links.removeClass('selected')
          $(this).addClass('selected')

          var idx = $(this).index();
          if(prev == idx) return;
          prev = idx;

          $('.slider .view.slide-in').removeClass('slide-in').addClass('slide-out')
          var el = $('.slider .view')[idx]
          if(el == null) {
            console.log("No element for slider index "+idx)
            return
          }

          $(el).removeClass('slide-out').removeClass('hidden').addClass('slide-in')
        })

        if(links[0] != null) links[0].click();
      }

      function initSliders() {
        $('.slider .view').addClass('hidden')
        var groups = $('.slider .selectors')
        groups.each(function(idx){
          initSlideGroup(this)
        })
      }

      //run code colors

      $(document).ready(function() {
        initSliders()
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });

      //copy to clipboard

      function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
      }

      $('#copy').hover(function() {
         $('#install').toggleClass("text-focus");
      });

      $('#copy').click(function() {
         $(this).removeClass("fa-copy");
         $(this).addClass("fa-check");

       setTimeout(() => {
         $(this).removeClass('fa-check').addClass('fa-copy');
        }, 1500);
      });

      // homepage content slider

      $(function() {
        $("#expand").hide();
        $("#expandBtn").html("Show all new InSpec 4 features");

         $('#expandBtn').click(function() {
            $('#expand').slideToggle("fast");
            $(this).html($(this).html() == 'Collapse new InSpec 4 features' ? 'Show all new InSpec 4 features' : 'Collapse new InSpec 4 features');
         });
      });

      // tutorial content slider

      $(function() {
        $(".collapseContent").hide();
        $(".collapsebtn").addClass("fa-plus-square");

         $('.collapseToggle').click(function() {
            var el = $(this).parent().find('.collapseContent')
            el.slideToggle("fast")
            // $('.collapseContent').slideToggle("fast");
            var btn = $(this).find('.collapsebtn')
            if(btn.hasClass('fa-minus-square')) {
              btn.addClass('fa-plus-square')
              btn.removeClass('fa-minus-square')
            } else {
              btn.addClass('fa-minus-square')
              btn.removeClass('fa-plus-square')
            }
         });
      });



      // scroll spy animations

      var $slide_left = $('.slide-left');
      var $slide_right = $('.slide-right');
      var $slide_up = $('.slide-up');
      var $slide_up_slow = $('.slide-up-slow');
      var $window = $(window);

      function check_if_in_view() {
        var window_height = $window.height();
        var window_top_position = $window.scrollTop();
        var window_bottom_position = (window_top_position + window_height);

        $.each($slide_left, function() {
          var $element = $(this);
          var element_height = $element.outerHeight();
          var element_top_position = $element.offset().top;
          var element_bottom_position = (element_top_position + element_height);

          //check to see if this current container is within viewport
          if ((element_bottom_position >= window_top_position) &&
              (element_top_position <= window_bottom_position)) {
            $element.addClass('in-view');
          } else {
            $element.removeClass('in-view');
          }
        });

        $.each($slide_right, function() {
          var $element = $(this);
          var element_height = $element.outerHeight();
          var element_top_position = $element.offset().top;
          var element_bottom_position = (element_top_position + element_height);

          //check to see if this current container is within viewport
          if ((element_bottom_position >= window_top_position) &&
              (element_top_position <= window_bottom_position)) {
            $element.addClass('in-view');
          } else {
            $element.removeClass('in-view');
          }
        });

        $.each($slide_up, function() {
          var $element = $(this);
          var element_height = $element.outerHeight();
          var element_top_position = $element.offset().top;
          var element_bottom_position = (element_top_position + element_height);

          //check to see if this current container is within viewport
          if ((element_bottom_position >= window_top_position) &&
              (element_top_position <= window_bottom_position)) {
            $element.addClass('in-view');
          } else {
            $element.removeClass('in-view');
          }
        });

        $.each($slide_up_slow, function() {
          var $element = $(this);
          var element_height = $element.outerHeight();
          var element_top_position = $element.offset().top;
          var element_bottom_position = (element_top_position + element_height);

          //check to see if this current container is within viewport
          if ((element_bottom_position >= window_top_position) &&
              (element_top_position <= window_bottom_position)) {
            $element.addClass('in-view');
          } else {
            $element.removeClass('in-view');
          }
        });
      }

      $window.on('scroll resize', check_if_in_view);
      $window.trigger('scroll');

      //scroll to top
      $(document).ready(function(){

        $(window).scroll(function(){
          if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
          } else {
            $('.scrollToTop').fadeOut();
          }
        });

        $('.scrollToTop').click(function(){
          $('html, body').animate({scrollTop : 0},800);
          return false;
        });

        // scrolling to resource sections
        $(".resources-button").click(function() {
          var dst = $(this).attr("href")
          $(".resources-button").removeClass("btn-purple").addClass("btn-purple-o")
          $(this).addClass("btn-purple").removeClass("btn-purple-o")
          $("html, body").animate({
              scrollTop: $(dst).offset().top - 105
          }, 1000);
        });

      });

      //scrolling code box

      var div = $('#scrolled');
         setInterval(function(){
          var pos = div.scrollTop();
          div.scrollTop(pos + 2);
      }, 200);

      //Animating progress bar for header

      $(document).ready(function(){

      var getMax = function(){
          return $(document).height() - $(window).height();
      }

      var getValue = function(){
          return $(window).scrollTop();
      }

      if('max' in document.createElement('progress')){
          // Browser supports progress element
          var progressBar = $('progress');

          // Set the Max attr for the first time
          progressBar.attr({ max: getMax() });

          $(document).on('scroll', function(){
              // On scroll only Value attr needs to be calculated
              progressBar.attr({ value: getValue() });
          });

          $(window).resize(function(){
              // On resize, both Max/Value attr needs to be calculated
              progressBar.attr({ max: getMax(), value: getValue() });
          });
      }
      else {
          var progressBar = $('.progress-bar'),
              max = getMax(),
              value, width;

          var getWidth = function(){
              // Calculate width in percentage
              value = getValue();
              width = (value/max) * 100;
              width = width + '%';
              return width;
          }

          var setWidth = function(){
              progressBar.css({ width: getWidth() });
          }

          $(document).on('scroll', setWidth);
          $(window).on('resize', function(){
              // Need to reset the Max attr
              max = getMax();
              setWidth();
          });
          }
        });


    javascript:

      $(document).foundation();
      $('.try-demo').click(function(event){
        event.stopPropagation();
        $('.inspec-tutorial').show()
        window.dispatchEvent(new Event('resizeTerminal'));
        $('.quit-inspec-tutorial').click(function(event){
          event.stopPropagation();
          $('.inspec-tutorial').hide()
        })
      });

    == javascript_include_tag "segment"