Load the etherpad iframe only when clicking on the button

Work arround a problem in FF where the pad wasn't loaded properly
Also reload the iFrame if we changed our color so it's being synced

public/js/vroom.js

@@ -318,7 +318,8 @@ function initVroom(room) {
   var mainVid = false,
       chatHistory = {},
       chatIndex = 0,
-      maxVol = -100;
+      maxVol = -100,
+      colorChanged = false;
 
   $('#name_local').css('background-color', peers.local.color);
 
@@ -1830,6 +1831,7 @@ function initVroom(room) {
   // Choose another color. Useful if two peers have the same
   $('#changeColorButton').click(function(){
     peers.local.color = chooseColor();
+    colorChanged = true;
     webrtc.sendToAll('peer_color', {color: peers.local.color});
     updateDisplayName('local');
   });
@@ -1932,18 +1934,22 @@ function initVroom(room) {
   });
 
   if (etherpad.enabled){
+    $('#etherpadButton').change(function(){
+      var action = ($(this).is(':checked')) ? 'show':'hide';
+      if (action == 'show'){
+        // If not already loaded, or our color changed, load etherpad in the iFrame
+        if ($('#etherpadContainer').html() == '' || colorChanged){
           $('#etherpadContainer').pad({
             host: etherpad.uri,
             padId: etherpad.group + '$' + room,
             showControls: true,
-      showLineNumbers: true,
+            showLineNumbers: false,
             height: maxHeight()-7 + 'px',
             border: 2,
             userColor: peers.local.color
           });
-    $('#etherpadButton').change(function(){
+          colorChanged = false;
-      var action = ($(this).is(':checked')) ? 'show':'hide';
+        }
-      if (action == 'show'){
         $('#etherpadLabel').addClass('btn-danger');
         $('#etherpadContainer').slideDown('200');
       }