<script src=http://CDN.JSDelivr.net/g/jquery></script>
<!-- <script src=loader.js></script> -->

<div class="cover flexbox-container" id=myContainer>
  <div id=loading><h2>Loading</h2></div>
  <div class=title>
    <ul>
      <li class=item-title></li>
      <li class=item-description></li>
    </ul>
    <ul>
      <li><a id=jsRefresh href=#><b>Run Another Random Sketch</b></a></li>
    </ul>
  </div>
</div>

/**
 * Random p5.js Loader (v3.0.2)
 * by  FedPep   (2016-Dec-13)
 * mod GoToLoop (2016-Dec-21)
 *
 * https://forum.Processing.org/two/discussion/19725/
 * browser-one-click-behind-when-loading-different-p5-sketches-on-click#Item_4
 *
 * https://CodiceInutile.GitHub.io/website-dev/
 * http://jsFiddle.net/fedpep/uf3ve3nc/
 *
 * http://CodePen.io/GoSubRoutine/pen/ZBPjdP/left/?editors=101
 */

"use strict";

$(document).ready(() => {
  const $loading = $('#loading'),
        $title = $('.item-title'),
        $descript = $('.item-description'),
        JSON_URL = 'https://CodiceInutile.GitHub.io/website-dev/homepage.json',
        actions = () => (pickAnotherItem(), loadScripts()),
        intRandom = (n = 2) => n * Math.random() | 0;

  let json, item, idx, scripts;

  $.getJSON(JSON_URL, data => {
    if (!data.length)  return $title.html('ERROR! Empty JSONArray!!!');

    $.ajaxSetup({ cache: true });
    window.mocha || (window.mocha = 'Hack to stop global auto run for p5.js');

    json = data, actions();
    $('#jsRefresh').click(actions);
  })
   .fail(() => $title.html('ERROR! JSON file loading failed!!!'));

  function pickAnotherItem() {
    if (json.length === 1)  return item = json[0];
    for (var rnd; (rnd = intRandom(json.length)) === idx; );
    return item = json[idx = rnd];
  }

  function loadScripts() {
    $loading.show();
    p5RemoveHack();

    scripts = [...item.includes, item.href];
    scripts.length && loadOrdered();
  }

  function loadOrdered() {
    $.getScript(scripts.shift(), scripts.length && loadOrdered || sketchLoaded);
  }

  function sketchLoaded() {
    $loading.hide('slow');
    $title.html(item.title + ' | ' + item.author);
    $descript.html(item.description);

    window.p5 && (window.setup || window.draw) && new p5;
  }

  function p5RemoveHack() {
    if (window.p5 && p5.instance) {
      p5.instance.remove();
      p5.instance = window.setup = window.draw = null;
    } else {
      const canv = document.querySelector('canvas');
      canv && canv.remove();
    }
  }
});