<div id='{{ plot_id }}' style="position: relative; width:{{ width }}; height:{{ height }};">
  <div class='loading' style="position: absolute;top: 50%;left: 50%;margin-left: -229px; margin-top: -59px; z-index: 10000;height:118px;width:458px;padding:0px"><img src='{{ base_url }}/img/emperor.png' alt='Emperor resources missing. Expected them to be found in {{ base_url }}'></div>
</div>
</div>

<script type="text/javascript">
// When running in the Jupyter notebook we've encountered version conflicts
// with some dependencies. So instead of polluting the global require context,
// we define a new context.
var emperorRequire = require.config({
'context': 'emperor',
// the left side is the module name, and the right side is the path
// relative to the baseUrl attribute, do NOT include the .js extension
'paths': {
  /* jQuery */
  'jquery': '{{ base_url }}/vendor/js/jquery-2.1.4.min',
  'jqueryui': '{{ base_url }}/vendor/js/jquery-ui.min',
  'jquery_drag': '{{ base_url }}/vendor/js/jquery.event.drag-2.2.min',

  /* jQuery plugins */
  'chosen': '{{ base_url }}/vendor/js/chosen.jquery.min',
  'spectrum': '{{ base_url }}/vendor/js/spectrum.min',
  'position': '{{ base_url }}/vendor/js/jquery.ui.position.min',
  'contextmenu': '{{ base_url }}/vendor/js/jquery.contextMenu.min',

  /* other libraries */
  'underscore': '{{ base_url }}/vendor/js/underscore-min',
  'chroma': '{{ base_url }}/vendor/js/chroma.min',
  'filesaver': '{{ base_url }}/vendor/js/FileSaver.min',
  'blob': '{{ base_url }}/vendor/js/Blob',
  'canvastoblob': '{{ base_url }}/vendor/js/canvas-toBlob',
  'd3': '{{ base_url }}/vendor/js/d3.min',

  /* THREE.js and plugins */
  'three': '{{ base_url }}/vendor/js/three.min',
  'orbitcontrols': '{{ base_url }}/vendor/js/three.js-plugins/OrbitControls',
  'projector': '{{ base_url }}/vendor/js/three.js-plugins/Projector',
  'svgrenderer': '{{ base_url }}/vendor/js/three.js-plugins/SVGRenderer',
  'canvasrenderer': '{{ base_url }}/vendor/js/three.js-plugins/CanvasRenderer',
  'selectionbox': '{{ base_url }}/vendor/js/three.js-plugins/SelectionBox',
  'selectionhelper': '{{ base_url }}/vendor/js/three.js-plugins/SelectionHelper',

  /* SlickGrid */
  'slickcore': '{{ base_url }}/vendor/js/slick.core.min',
  'slickgrid': '{{ base_url }}/vendor/js/slick.grid.min',
  'slickformatters': '{{ base_url }}/vendor/js/slick.editors.min',
  'slickeditors': '{{ base_url }}/vendor/js/slick.formatters.min',
  'slickdataview': '{{ base_url }}/vendor/js/slick.dataview.min',

  /* Emperor's objects */
  'util': '{{ base_url }}/js/util',
  'model': '{{ base_url }}/js/model',
  'multi-model': '{{ base_url }}/js/multi-model',
  'view': '{{ base_url }}/js/view',
  'controller': '{{ base_url }}/js/controller',
  'draw': '{{ base_url }}/js/draw',
  'scene3d': '{{ base_url }}/js/sceneplotview3d',
  'shapes': '{{ base_url }}/js/shapes',
  'animationdirector': '{{ base_url }}/js/animate',
  'trajectory': '{{ base_url }}/js/trajectory',
  'uistate': '{{ base_url }}/js/ui-state',

  /* controllers */
  'abcviewcontroller': '{{ base_url }}/js/abc-view-controller',
  'viewcontroller': '{{ base_url }}/js/view-controller',
  'colorviewcontroller': '{{ base_url }}/js/color-view-controller',
  'visibilitycontroller': '{{ base_url }}/js/visibility-controller',
  'opacityviewcontroller': '{{ base_url }}/js/opacity-view-controller',
  'scaleviewcontroller': '{{ base_url }}/js/scale-view-controller',
  'shapecontroller': '{{ base_url }}/js/shape-controller',
  'axescontroller': '{{ base_url }}/js/axes-controller',
  'animationscontroller': '{{ base_url }}/js/animations-controller',

  /* editors */
  'shape-editor': '{{ base_url }}/js/shape-editor',
  'color-editor': '{{ base_url }}/js/color-editor',
  'scale-editor': '{{ base_url }}/js/scale-editor'

},
/*
   Libraries that are not AMD compatible need shim to declare their
   dependencies.
 */
'shim': {
  'jquery_drag': {
    'deps': ['jquery', 'jqueryui']
  },
  'chosen': {
    'deps': ['jquery'],
    'exports': 'jQuery.fn.chosen'
  },
  'contextmenu' : {
    'deps': ['jquery', 'jqueryui', 'position']
  },
  'filesaver' : {
    'deps': ['blob']
  },
  'canvastoblob' : {
    'deps': ['blob']
  },
  'slickcore': ['jqueryui'],
  'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters', 'slickeditors',
                'slickdataview']
}
});

emperorRequire(
["jquery", "model", "controller"],
function($, model, EmperorController) {
  var DecompositionModel = model.DecompositionModel;

  var div = $('#{{ plot_id }}');

  var data = {{ data | tojson }};

  var plot, biplot = null, ec;

  function init() {
    // Initialize the DecompositionModel for the scatter plot, and optionally
    // add one for the biplot arrows
    plot = new DecompositionModel(data.plot.decomposition,
                                  data.plot.metadata_headers,
                                  data.plot.metadata,
                                  data.plot.type);

    if (data.biplot) {
      biplot = new DecompositionModel(data.biplot.decomposition,
                                      data.biplot.metadata_headers,
                                      data.biplot.metadata,
                                      data.biplot.type);
    }

    ec = new EmperorController(plot, biplot, {{ plot_id | tojson }});
  }

  function animate() {
    requestAnimationFrame(animate);
    ec.render();
  }
  $(window).resize(function() {
    ec.resize(div.innerWidth(), div.innerHeight());
  });

  $(function(){
    init();
    animate();

    ec.ready = function () {
      // any other code that needs to be executed when emperor is loaded should
      // go here
      ec.loadConfig(data.plot.settings);

      // sets up generic callbacks for 3rd party consumers
      var plotView = ec.sceneViews[0];
      plotView.on('click', function(sampleName){
        /*__click_callback__*/
      });
      plotView.on('dblclick', function(sampleName){
        /*__dblclick_callback__*/
      });
      plotView.on('select', function(samples, view){
        /*__select_callback__*/
      });

      /*__custom_on_ready_code__*/
    }
  });

}); // END REQUIRE.JS block
</script>
