Expose the eventedCanvas to the application and tests through

manifest.js

js/src/manifests/manifest.js

@@ -92,8 +92,13 @@
       _this.request.resolve(manifestContent); // resolve immediately
     },
     buildCanvasesIndex: function(){
-      this.canvases = this.getCanvases().reduce(function(canvasesIndex, canvas) {
-        canvasesIndex[canvas['@id']] = canvas;
+      this.canvases = this.getCanvases().reduce(function(canvasesIndex, canvas, index) {
+        var eventedCanvas = new iiifEventedCanvas({
+          canvas: canvas,
+          index: index,
+          dispatcher: this.eventEmitter
+        });
+        canvasesIndex[canvas['@id']] = eventedCanvas;
         return canvasesIndex;
       }, {});
       // Now you can get canvases with manifest.canvases[CanvasID]

js/src/widgets/layersTab.js

@@ -2,6 +2,7 @@
 
   $.LayersTab = function(options) {
     jQuery.extend(true, this, {
+      windowId:          null,
       element:           null,
       appendTo:          null,
       manifest:          null,
@@ -91,10 +92,19 @@
     },
 
     render: function(state) {
-      console.log(state);
       var _this = this,
+          canvasModel = _this.state.getWindowObjectById(_this.windowId).currentCanvasModel,
           templateData = {
-            active: state.active ? '' : 'inactive'
+            active: state.active ? '' : 'inactive',
+            hasLayers: false, //canvasModel.images.length > 0,
+            // layers: canvasModel.images.map(function(imageResource){
+            //   return {
+            //     title: imageResource.label,
+            //     opacity: imageResource.getOpacity(),
+            //     loadingStatus: imageResource.getStatus(),
+            //     visibility: imageResource.getVisible()
+            //   };
+            // })
           };
 
       if (this.element) {
@@ -113,6 +123,21 @@
 
     template: Handlebars.compile([
       '<div class="layersPanel {{active}}">',
+      '<p>Manipulate images available on this canvas. Drag and Drop to adjust layering.</p>',
+      '{{#if hasLayers}}',
+      '<ul class="layers-listing">',
+      '{{#each layers}}',
+      '<li class="layers-list-item {{this.loadingStatus}}">',
+      '<input type=checkbox>',
+      '<img class="layer-thumb">',
+      '<h4>{{this.title}}</h4>',
+      '<input class="opacity-slider" type="range" min="0" max="100" step="2" value="{{this.opacity}}">',
+      '</li>',
+      '{{/each}}',
+      '</ul>',
+      '{{else}}',
+      '<h4>There are no image layers on this canvas</h4>',
+      '{{/if}}',
       '</div>',
     ].join(''))
   };

js/src/workspaces/window.js

@@ -763,12 +763,7 @@
 
     setCurrentCanvasID: function(canvasID) {
       var _this = this;
-      this.canvasID = canvasID;
-      this.currentCanvasModel = new iiifEventedCanvas({
-        canvas: _this.manifest.canvases[canvasID],
-        index: $.getImageIndexById(_this.imagesList, canvasID),
-        dispatcher: _this.eventEmitter
-      });
+      _this.canvasID = canvasID;
       _this.eventEmitter.publish('removeTooltips.' + _this.id);
       _this.eventEmitter.unsubscribe(('annotationListLoaded.' + _this.id));
       while(_this.annotationsList.length > 0) {

karma.conf.js

@@ -37,6 +37,7 @@ module.exports = function(config) {
       'js/lib/sanitize-html.min.js',
       'node_modules/sinon/pkg/sinon.js',
       'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+      'node_modules/iiif-evented-canvas/dist/iiif-evented-canvas.umd.min.js',
       // app
       'js/src/mirador.js', 
       'js/src/utils/handlebars.js',