Creates the etherpad iframe once the button is clicked. Tries to improve prezi stability by encreasing the init interval.

css/main.css

@@ -31,6 +31,10 @@ html, body{
     height: 100%;
 }
 
+#etherpad {
+    z-index: 0;
+}
+
 .videocontainer>span {
     display: none; /* enable when you want nicks to be shown */
     position: absolute;

etherpad.js

@@ -1,5 +1,8 @@
 var Etherpad = (function (my) {
     var etherpadName = null;
+    var etherpadIFrame = null;
+    var domain = null;
+    var options = "?showControls=true&showChat=false&showLineNumbers=true&useMonospaceFont=false";
 
     /**
      * Initializes the etherpad.
@@ -8,6 +11,8 @@ var Etherpad = (function (my) {
 
         if (config.etherpad_base && !etherpadName) {
 
+            domain = config.etherpad_base;
+
             if (!name) {
                 // In case we're the focus we generate the name.
                 etherpadName = Math.random().toString(36).substring(7) + '_' + (new Date().getTime()).toString();
@@ -15,21 +20,8 @@ var Etherpad = (function (my) {
             }
             else
                 etherpadName = name;
-                
-            this.domain = config.etherpad_base;
-            this.options = "?showControls=true&showChat=false&showLineNumbers=true&useMonospaceFont=false";
 
             createEtherpadButton();
-
-            this.iframe = document.createElement('iframe');
-            this.iframe.src = this.domain + etherpadName + this.options;
-            this.iframe.frameBorder = 0;
-            this.iframe.scrolling = "no";
-            this.iframe.width = $('#largeVideoContainer').width() || 640;
-            this.iframe.height = $('#largeVideoContainer').height() || 480;
-            this.iframe.setAttribute('style', 'visibility: hidden;');
-
-            document.getElementById('etherpad').appendChild(this.iframe);
         }
     }
 
@@ -37,6 +29,10 @@ var Etherpad = (function (my) {
      * Opens/hides the Etherpad.
      */
     my.toggleEtherpad = function (isPresentation) {
+        if (!etherpadIFrame)
+            createIFrame();
+
+        // TODO FIX large video and prezi toggling. Too many calls from different places.
         var largeVideo = null;
         if (isPresentationVisible())
             largeVideo = $('#presentation>iframe');
@@ -102,6 +98,22 @@ var Etherpad = (function (my) {
         toolbar.insertBefore(separator, button);
     }
 
+    /**
+     * Creates the IFrame for the etherpad.
+     */
+    function createIFrame() {
+        etherpadIFrame = document.createElement('iframe');
+        etherpadIFrame.src = domain + etherpadName + options;
+                console.log("ETHER PAD URL", etherpadIFrame.src);
+        etherpadIFrame.frameBorder = 0;
+        etherpadIFrame.scrolling = "no";
+        etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
+        etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
+        etherpadIFrame.setAttribute('style', 'visibility: hidden;');
+
+        document.getElementById('etherpad').appendChild(etherpadIFrame);
+    }
+
     /**
      * On Etherpad added to muc.
      */
@@ -128,7 +140,7 @@ var Etherpad = (function (my) {
         if (!config.etherpad_base)
             return;
 
-        if ($('#etherpad>iframe').css('visibility') != 'hidden')
+        if (etherpadIFrame && etherpadIFrame.style.visibility != 'hidden')
             Etherpad.toggleEtherpad(isPresentation);
     });
 

index.html

@@ -8,17 +8,17 @@
     <script src="muc.js?v=6"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
     <script src="app.js?v=20"></script><!-- application logic -->
-    <script src="etherpad.js?v=1"></script><!-- etherpad plugin -->
+    <script src="etherpad.js?v=2"></script><!-- etherpad plugin -->
     <script src="smileys.js?v=1"></script><!-- smiley images -->
     <script src="replacement.js?v=5"></script><!-- link and smiley replacement -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=16"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=17"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
     <script src="libs/jquery-impromptu.js"></script>
     <script src="libs/jquery.autosize.js"></script>
     <script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-    <script src="libs/prezi_player.js"></script>
+    <script src="libs/prezi_player.js?v=2"></script>
   </head>
   <body>
     <div id="header">

libs/prezi_player.js

@@ -94,7 +94,7 @@
 
             this.initPollInterval = setInterval(function(){
                 _this.sendMessage({'action': 'init'});
-            }, 200);
+            }, 500);
             PreziPlayer.players[id] = this;
         }