index.html: Avoid OpenSeadragon timer leak when switching images

Closes #5.

Author: bgilbert

examples/deepzoom/templates/index.html

@@ -6,15 +6,26 @@
 <script type="text/javascript">
 $(document).ready(function() {
     var dzi_data = {{ dzi_data|default('{}')|safe }};
-    var viewer = new Seadragon.Viewer("view");
-    viewer.openDzi("{{ slide_url }}", dzi_data["{{ slide_url }}"]);
-    viewer.config.animationTime = 0.5;
-    viewer.config.blendTime = 0.1;
+    var viewer;
+
+    function open_slide(url) {
+        if (viewer) {
+            // Never reuse an existing viewer to avoid a timer leak
+            // (OpenSeadragon issue #14)
+            viewer.close();
+            $("#view").text("");
+        }
+        viewer = new Seadragon.Viewer("view");
+        viewer.config.animationTime = 0.5;
+        viewer.config.blendTime = 0.1;
+        viewer.openDzi(url, dzi_data[url]);
+    }
+
+    open_slide("{{ slide_url }}");
     $(".load-slide").click(function(ev) {
         $(".current-slide").removeClass("current-slide");
         $(this).parent().addClass("current-slide");
-        var url = $(this).attr('data-url');
-        viewer.openDzi(url, dzi_data[url]);
+        open_slide($(this).attr('data-url'));
         ev.preventDefault();
     });
 });