Detail on/off button (m2)

test/demo/m2/index.html

@@ -7,7 +7,7 @@
         <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
         <script src="js/main.js"></script>
         <script src="js/page.js"></script>
-        <!-- <script src="js/harvard-tilesources.js"></script> -->
+        <script src="js/harvard-tilesources.js"></script>
         <script src="js/openseadragon-svg-overlay.js"></script>
         <style type="text/css">
 
@@ -66,6 +66,7 @@
             <button class="scroll">Scroll</button>
             <button class="book">Book</button>
             <button class="page">Page</button>
+            <label><input class="details" type="checkbox">Show Detail Overlays</label>
             <div class="nav">
                 <button class="previous">Previous</button>
                 <button class="next">Next</button>

test/demo/m2/js/main.js

@@ -77,6 +77,16 @@
                 self.previous();
             });
 
+            this.$details = $('.details')
+                .prop('checked', true)
+                .change(function() {
+                    if (self.$details.prop('checked')) {
+                        self.showDetails();
+                    } else {
+                        self.hideDetails();
+                    }
+                });
+
             $(window).keyup(function(event) {
                 if (self.mode === 'thumbs') {
                     return;
@@ -178,6 +188,20 @@
             });
         },
 
+        // ----------
+        hideDetails: function() {
+            $.each(this.pages, function(i, v) {
+                v.removeDetails();
+            });
+        },
+
+        // ----------
+        showDetails: function() {
+            $.each(this.pages, function(i, v) {
+                v.addDetails();
+            });
+        },
+
         // ----------
         hitTest: function(pos) {
             var count = this.pages.length;

test/demo/m2/js/page.js

@@ -75,6 +75,10 @@
             }
 
             $.each(this.details, function(i, v) {
+                if (v.tiledImage) {
+                    return;
+                }
+
                 App.viewer.addTiledImage({
                     tileSource: v.tileSource,
                     success: function(event) {
@@ -85,6 +89,22 @@
             });
         },
 
+        // ----------
+        removeDetails: function() {
+            var self = this;
+
+            if (!this.details) {
+                return;
+            }
+
+            $.each(this.details, function(i, v) {
+                if (v.tiledImage) {
+                    App.viewer.world.removeItem(v.tiledImage);
+                    delete v.tiledImage;
+                }
+            });
+        },
+
         // ----------
         getBounds: function() {
             return this.bounds.clone();