{% if wrapper %}{% extends 'standalone.html' %}{% endif %}

{% block head %}
  <!-- These are not generally used within the notebook. -->
  <script src="{{jquery}}"></script>
  <script src="{{boot_js}}"></script>

  <link rel="stylesheet" href="{{boot_css}}"/>
  <link rel="stylesheet" href="{{escher_css}}"/>
{% endblock %}

{% block content %}
  <div style="height: {{height}}; width: 100%;" id="{{id}}"></div>

  <script>
   {{ initialize_js }}
  </script>
  <script>
   function escher_load_lib(url, callback){
       var s = document.createElement('script');
       s.src = url;
       s.async = true;
       s.onreadystatechange = s.onload = callback;
       s.onerror = function() { console.warn("failed to load library " + url); };
       document.getElementsByTagName("head")[0].appendChild(s);
   }

   if (typeof define === "function" && define.amd) {
       // require.js is available: use it to load d3 and escher
       {% if dev %}
       requirejs.config({
           baseUrl: '{{host}}escher/js/src',
           paths: {
               lib: '../../lib',
               d3: "../../../{{ d3_rel[:-3] }}"
           }
       });
       require(["d3", "Builder", "utils"], function(d3, Builder, utils) {
           window.d3 = d3;
           {{ draw_js }}
       });
       {% else %}
       require.config({paths: { d3: "{{ d3[:-3] }}",
                                escher: "{{ escher[:-3] }}" }});
       require(["d3", "escher"], function(d3, escher) {
           window.d3 = d3;
           {{ draw_js }}
       });
       {% endif %}
   } else {
       if (window.escher !== undefined && window.d3 !== undefined) {
           // already loaded: just create the figure
           !function(escher, d3) {
               {{ draw_js }}
           }(window.escher, window.d3);
       } else {
           // require.js not available: dynamically load d3 & escher
           escher_load_lib("{{ d3 }}", function() {
               escher_load_lib("{{ escher }}", function() {
                   {{ draw_js }}
               })
           });
       }
   }
  </script>
{% endblock %}