2 files changed, 28 insertions, 4 deletions

diff --git a/js/document/views/base.js b/js/document/views/base.js
index e771702d..18676d1f 100755
--- a/js/document/views/base.js
+++ b/js/document/views/base.js
@@ -64,6 +64,7 @@ exports.BaseDocumentView = Montage.create(Component, {
                 if (this.iframe) {
                         this.iframe.style.display = 'block';
                 this.iframe.style.opacity = 1;
+                this.toggleWebGlAnimation(true);
                 } else {
                         console.log('Error: View has no iframe to show!');
                 }
@@ -78,6 +79,8 @@ exports.BaseDocumentView = Montage.create(Component, {
                 if (this.iframe) {
                         this.iframe.style.display = 'none';
                 this.iframe.style.opacity = 0;
+                this.pauseVideos();
+                this.toggleWebGlAnimation(false);
                 } else {
                         console.log('Error: View has no iframe to hide!');
                 }
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44ed2c65..ed98b660 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -537,9 +537,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     //
     pauseVideos:{
         value:function(){
-                var i, videos = this.document.getElementsByTagName("video");
-            for(i = 0; i < videos.length; i++){
-                if(!videos[i].paused) videos[i].pause();
+            if(this.document) {
+                var i, videos = this.document.getElementsByTagName("video");
+                for(i = 0; i < videos.length; i++){
+                    if(!videos[i].paused) videos[i].pause();
+                }
             }
         }
     },
@@ -563,9 +565,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                 videos[i].src = "";
             }
         }
-    }
+    },
         ////////////////////////////////////////////////////////////////////
         ////////////////////////////////////////////////////////////////////
+    toggleWebGlAnimation: {
+        value: function(show) {
+            if(this.document) {
+                var glCanvases = this.document.querySelectorAll('[data-RDGE-id]'),
+                    glShapeModel;
+                if(glCanvases) {
+                    for(var i = 0, len = glCanvases.length; i<len; i++) {
+                        glShapeModel = glCanvases[i].elementModel.shapeModel;
+                        if(show) {
+                            glShapeModel.GLWorld.restartRenderLoop();
+                        } else {
+                            glShapeModel.GLWorld.stop();
+                        }
+                    }
+
+                }
+            }
+        }
+    }
 });
 ////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////