function gteq (a,b) {
    return a >= b;
}

const escapeHTML = (str) =>
  str.replace(
    /[&<>'"]/g,
    (tag) =>
      ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "'": "&#39;",
        '"': "&quot;"
      }[tag])
  );
  const unescapeHTML = (str) =>
    str.replace(
      /(&gt;|&lt;|&amp;|&quot;|&apos;)/g,
      (tag) =>
        ({
          "&amp;"  : "&",
          "&lt;"   : "<",
          "&gt;"   : ">",
          "&#39;"  : "'",
          "&quot;" : '"'
        }[tag])
    );


/* see options at
 https://beautifier.io/
 */
let beautify_config = {
  "indent_size" : 2,
  "indent_char" : " ",
  "wrap_line_length" : "120",
  "brace_style" : "collapse",
  "max_preserve_newlines" : 1,
  "indent_empty_lines" : false
};

$(document).ready(function(){

  let myhost = location.host;
  let mypath = location.pathname;
  /* turn off things that make sense only for local running */
  if (myhost.match(/localhost/)) {
    /* */
  }
  /* adjust header for localhost and slides > 1 */
  let slidenum = $('head meta[name=slide]').attr('content');
  if (myhost.match(/localhost/) && slidenum > 1) {
    $('#header').addClass('presentation');
    $('body').addClass('presentation');
  }
  /* === end === */

  $('body').keydown(function (e) {
      if (e.which == 37) {
          // Left Arrow Pushed
          let href = document.querySelector('nav a.previous').getAttribute('href');
          if(href) {
            window.location = href;
          }
      } else if (e.which == 39) {
          // Right Arrow Pushed
          let href = document.querySelector('nav a.next').getAttribute('href');
          if(href) {
            window.location = href;
          }
      }
  });


  /* add prism class to prism-styled pre and code blocks
      main reason is so we can style code blocks not handled by prism!
  */
  $('pre[class*="language-"]').addClass('prism');
  $('pre[class*="language-"] code').addClass('prism');
  $('code[class*="language-"]').addClass('prism');
  /* === end === */

  /* beautify code examples for display
      Note that this does spacing, indentation, and line returns
      only.
      the syntax highlighting and colorizing is done through prismjs
      */
  htmlexamples = $("pre[class ~= 'language-html'] code");
  markupexamples = $("pre[class ~= 'language-markup'] code");
  cssexamples  = $("pre[class ~= 'language-css'] code");
  jsexamples   = $("pre[class ~= 'language-javascript'] code");

  for (ex of htmlexamples) {
    markuptxt = ex.textContent;
    let result = html_beautify(markuptxt, beautify_config);
    ex.innerHTML = escapeHTML(result);
  }
  for (ex of markupexamples) {
    markuptxt = ex.textContent;
    let result = html_beautify(markuptxt, beautify_config);
    ex.innerHTML = escapeHTML(result);
  }
  for (ex of cssexamples) {
    csstxt = ex.textContent;
    console.log(csstxt);
    let result = css_beautify(csstxt, beautify_config);
    ex.innerHTML = result;
  }

  for (ex of jsexamples) {
    jstxt = ex.textContent;
    console.log(jstxt);
    let result = js_beautify(jstxt, beautify_config);
    console.log(result);
    ex.innerHTML = result;
  }
  /* === end === */

  /* implement jquery ui tabs for the code blocks
      html, css, js, screenshots
      */
  $('*[id^=example-container]').each(function(index,elem){
    $(elem).tabs({selected: $(elem).attr("data-tabselected")});
  });
  /* === end === */

  /* create "See Example in JSFiddle" */
  /* try modifying existing */
  for (ex of $("textarea[name='html']")) {
    markuptxt = ex.textContent;
    let result = html_beautify(markuptxt, beautify_config);
    ex.textContent = result;
  }
  for (ex of $("textarea[name='css']")) {
    txt = ex.textContent;
    let result = css_beautify(txt, beautify_config);
    ex.textContent = result;
  }
  for (ex of $("textarea[name='js']")) {
    markuptxt = ex.textContent;
    let result = js_beautify(markuptxt, beautify_config);
    ex.textContent = result;
  }


  /* build out codepen example form */
  document.querySelectorAll('.exampleheader').forEach(ex => {
    console.log(ex);
    let html = ex.querySelector('textarea[name=html]');
    let css = ex.querySelector('textarea[name=css]');
    let js = ex.querySelector('textarea[name=js]');
    let title = ex.querySelector('.exampletitle')
    let codepenData = {
      title: '',
      html: '',
      css: '',
      js: ''
    };
    if (title) { codepenData.title = title.textContent.replace(/[\r\n\s]+/gm,' ') }
    if (html) { codepenData.html = unescapeHTML(html.innerHTML) }
    if (css) { codepenData.css = unescapeHTML(css.innerHTML) }
    if (js) { codepenData.js = unescapeHTML(js.innerHTML) }

    ex.querySelector('form.codepen input[name=data]').setAttribute('value', JSON.stringify(codepenData));


    console.log(codepenData);
    console.log(JSON.stringify(codepenData));
  });


    /* Invoke prism manually */
    Prism.highlightAll();
});



document.addEventListener("DOMContentLoaded", function () {
  if ($('h2').length == 1) {
    $('h2#thankyou').parents('main').addClass('thankyou');
  }
});

function fitIframe() {
    let iframes = document.querySelectorAll("iframe.example-preview")
    for(let id = 0; id < iframes.length; id++) {
        let win = iframes[id].contentWindow
        let doc = win.document
        let html = doc.documentElement
        let body = doc.body
        let ifrm = iframes[id] // or win.frameElement

        if(body) {
            body.style.overflowX = "scroll" // scrollbar-jitter fix
            body.style.overflowY = "hidden"
        }
        if(html) {
            html.style.overflowX = "scroll" // scrollbar-jitter fix
            html.style.overflowY = "hidden"
            let style = win.getComputedStyle(html)
            ifrm.width = parseInt(style.getPropertyValue("width")) // round value
            ifrm.height = parseInt(style.getPropertyValue("height"))
        }
    }
    requestAnimationFrame(fitIframe)
}

document.addEventListener("DOMContentLoaded", requestAnimationFrame.bind(this, fitIframe))
