Uses roomjid to distinguish the local participant in the chat. Defines etherpad button in the html instead of dynamically adding it through js. Disables chat icon scaling on new message (keeps the glow).

app.js

@@ -182,7 +182,6 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
         container = document.createElement('span');
         container.className = 'videocontainer';
         remotes.appendChild(container);
-        console.log("PLAY USER JOINEDDDDDDDD");
         Util.playSoundNotification('userJoined');
     }
     var vid = document.createElement('video');

chat.js

@@ -61,10 +61,10 @@ var Chat = (function (my) {
     /**
      * Appends the given message to the chat conversation.
      */
-    my.updateChatConversation = function (nick, message) {
+    my.updateChatConversation = function (from, displayName, message) {
         var divClassName = '';
 
-        if (nickname == nick) {
+        if (connection.emuc.myroomjid == from) {
             divClassName = "localuser";
         }
         else {
@@ -81,7 +81,8 @@ var Chat = (function (my) {
         message = processReplacements(message);
 
         $('#chatconversation').append('<div class="' + divClassName + '"><b>'
-                                        + nick + ': </b>' + message + '</div>');
+                                        + displayName + ': </b>'
+                                        + message + '</div>');
         $('#chatconversation').animate(
                 { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
     };
@@ -188,8 +189,8 @@ var Chat = (function (my) {
 
             unreadMsgElement.setAttribute(
                     'style',
-                    'top:' + Util.toInteger(topIndent)
-                     + '; left:' + Util.toInteger(leftIndent) +';');
+                    'top:' + topIndent
+                     + '; left:' + leftIndent +';');
         }
         else
             unreadMsgElement.innerHTML = '';

css/main.css

@@ -35,6 +35,10 @@ html, body{
     z-index: 0;
 }
 
+#etherpadButton {
+    display: none;
+}
+
 .videocontainer>span {
     display: none; /* enable when you want nicks to be shown */
     position: absolute;
@@ -261,7 +265,7 @@ html, body{
     -webkit-text-shadow: 0 0 10px #ffffff;
     -moz-text-shadow: 0 0 10px #ffffff;
     text-shadow: 0 0 10px #ffffff;
-    -webkit-transform: scale(1.1);
+    /* -webkit-transform: scale(1.1); */
 }
 
 a.button:hover {

etherpad.js

@@ -22,9 +22,9 @@ var Etherpad = (function (my) {
             else
                 etherpadName = name;
 
-            createEtherpadButton();
+            enableEtherpadButton();
         }
-    }
+    };
 
     /**
      * Opens/hides the Etherpad.
@@ -77,27 +77,9 @@ var Etherpad = (function (my) {
     /**
      * Creates the Etherpad button and adds it to the toolbar.
      */
-    function createEtherpadButton() {
-        //<div class="header_button_separator"></div>
-        //<a class="button" onclick='Etherpad.openEtherpad("teeest");'>
-        //<i title="Open shared document" class="fa fa-file-text fa-lg"></i></a>
-        var separator = document.createElement('div');
-        separator.className = 'header_button_separator';
-
-        var button = document.createElement('a');
-        button.className = 'button';
-        button.setAttribute('onclick', 'Etherpad.toggleEtherpad(0);');
-        
-        var buttonImage = document.createElement('i');
-        buttonImage.setAttribute('title', 'Open shared document');
-        buttonImage.className = 'fa fa-file-text fa-lg';
-
-        button.appendChild(buttonImage);
-
-        var toolbar = document.getElementById('toolbar');
-        toolbar.insertBefore(button,
-                toolbar.childNodes[toolbar.childNodes.length - 4]);
-        toolbar.insertBefore(separator, button);
+    function enableEtherpadButton() {
+        if (!$('#etherpadButton').is(":visible"))
+            $('#etherpadButton').css({display:'inline-block'});
     }
 
     /**

index.html

@@ -43,6 +43,10 @@
             </span>
             <div class="header_button_separator"></div>
             <a class="button" onclick='openPreziDialog();'><i title="Share prezi" class="fa fa-picture-o fa-lg"></i></a>
+            <span id="etherpadButton">
+                <div class="header_button_separator"></div>
+                <a class="button" onclick='Etherpad.toggleEtherpad(0);'><i title="Open shared document" class="fa fa-file-text fa-lg"></i></a>
+            </span>
             <div class="header_button_separator"></div>
             <a class="button" onclick='toggleFullScreen();'><i title="Enter / Exit Full Screen" class="fa fa-arrows-alt fa-lg"></i></a>
         </span>

muc.js

@@ -139,11 +139,12 @@ Strophe.addConnectionPlugin('emuc', {
         var txt = $(msg).find('>body').text();
         // TODO: <subject/>
         // FIXME: this is a hack. but jingle on muc makes nickchanges hard
-        var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid(msg.getAttribute('from'));
+        var from = msg.getAttribute('from');
+        var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid(from);
         if (txt) {
             console.log('chat', nick, txt);
 
-            Chat.updateChatConversation(nick, txt);
+            Chat.updateChatConversation(from, nick, txt);
         }
         return true;
     },