Fixes Issue #36

src/js/level/index.js

@@ -134,8 +134,6 @@ var Level = Sandbox.extend({
       el: options.el || this.getDefaultVisEl(),
       treeString: options.level.startTree
     });
-
-    this.initGoalVisualization();
   },
 
   initGoalVisualization: function() {
@@ -153,6 +151,12 @@ var Level = Sandbox.extend({
     });
   },
 
+  onGoalVisualizationClick: function() {
+    // we need to destory this entire view whenever it is hidden so the scroll bar
+    // still works. unfortunately this
+    delete this.goalCanvasHolder;
+  },
+
   showSolution: function(command, deferred) {
     var toIssue = this.level.solutionCommand;
     var issueFunc = function() {
@@ -197,6 +201,9 @@ var Level = Sandbox.extend({
   },
 
   showGoal: function(command, defer) {
+    if (!this.goalCanvasHolder || !this.goalCanvasHolder.inDom) {
+      this.initGoalVisualization();
+    }
     this.goalCanvasHolder.slideIn();
 
     if (!command || !defer) { return; }
@@ -206,7 +213,7 @@ var Level = Sandbox.extend({
   },
 
   hideGoal: function(command, defer) {
-    this.goalCanvasHolder.slideOut();
+    this.goalCanvasHolder.die();
     if (!command || !defer) { return; }
 
     setTimeout(function() {

src/js/views/index.js

@@ -593,6 +593,7 @@ var CanvasTerminalHolder = BaseView.extend({
     };
 
     this.render();
+    this.inDom = true;
 
     if (options.additionalClass) {
       this.$el.addClass(options.additionalClass);
@@ -602,14 +603,16 @@ var CanvasTerminalHolder = BaseView.extend({
   getAnimationTime: function() { return 700; },
 
   onClick: function() {
-    this.slideOut();
+    this.die();
   },
 
   die: function() {
     this.slideOut();
+    this.inDom = false;
+
     setTimeout(_.bind(function() {
       this.tearDown();
-    }, this));
+    }, this), this.getAnimationTime());
   },
 
   slideOut: function() {