Part 2 of previous commit. Makes the toolbar more visible. Moves toolbar and videolayout related code in separate classes.

chat.js

         if (unreadMessages) {
             unreadMsgElement.innerHTML = unreadMessages.toString();
 
-            showToolbar();
+            Toolbar.showToolbar();
 
             var chatButtonElement
                 = document.getElementById('chatButton').parentNode;

css/videolayout_default.css

     border: 2px solid #212425;
 }
 
-#remoteVideos .videocontainer:hover {
+#remoteVideos .videocontainer:hover,
+#remoteVideos .videocontainer.videoContainerFocused {
     width: 100%;
     height: 100%;
     content:"";
     z-index: 3;
 }
 
-#remoteVideos .videocontainer.videoContainerFocused {
-    border: 3px solid #388396;
-}
-
 #localVideoWrapper {
     display:inline-block;
     -webkit-mask-box-image: url(../images/videomask.svg);
     border: 0px !important;
 }
 
-#remoteVideos .videocontainer>video {
+#remoteVideos .videocontainer>video,
+#remoteVideos .videocontainer>canvas {
     border-radius:4px;
 }
 
 #etherpad,
 #localVideoWrapper>video,
 #localVideoWrapper,
-.videocontainer>video {
+.videocontainer>video,
+.videocontainer>canvas {
     position: absolute;
     left: 0;
     top: 0;
 
 .videocontainer>span.displayname,
 .videocontainer>input.displayname {
-    display: inline-block;
+    display: none;
     position: absolute;
-    background: -webkit-linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,0));
     color: #FFFFFF;
-    bottom: 0;
-    left: 0;
-    padding: 3px 5px;
-    width: 100%;
-    height: auto;
-    max-height: 18px;
-    font-size: 9pt;
-    text-align: left;
+    background: rgba(0,0,0,.7);
+    text-align: center;
     text-overflow: ellipsis;
+    width: 70%;
+    height: 20%;
+    left: 15%;
+    top: 40%;
+    padding: 5px;
+    font-size: 11pt;
     overflow: hidden;
     white-space: nowrap;
     z-index: 2;
-    box-sizing: border-box;
-    border-bottom-left-radius:4px;
-    border-bottom-right-radius:4px;
+    border-radius:20px;
 }
 
 #localVideoContainer>span.displayname:hover {
     pointer-events: none;
 }
 
+.videocontainer>input.displayname {
+    height: auto;
+}
+
 #localDisplayName {
     pointer-events: auto !important;
 }

data_channels.js

 
             var container  = document.getElementById(
                 'participant_' + endpointId);
+
             // Local video will not have container found, but that's ok
             // since we don't want to switch to local video
+
             if (container)
             {
                 var video = container.getElementsByTagName("video");
                 if (video.length)
                 {
-                    updateLargeVideo(video[0].src);
+                    VideoLayout.updateLargeVideo(video[0].src);
+                    VideoLayout.enableActiveSpeaker(endpointId, true);
                 }
             }
         }

desktopsharing.js

-/* global $, config, connection, chrome, alert, getUserMediaWithConstraints, change_local_video, getConferenceHandler */
+/* global $, config, connection, chrome, alert, getUserMediaWithConstraints, changeLocalVideo, getConferenceHandler */
 /**
  * Indicates that desktop stream is currently in use(for toggle purpose).
  * @type {boolean}
 
     var oldStream = connection.jingle.localVideo;
 
-    change_local_video(stream, !isUsingScreenStream);
+    connection.jingle.localVideo = stream;
+
+    VideoLayout.changeLocalVideo(stream, !isUsingScreenStream);
 
     var conferenceHandler = getConferenceHandler();
     if (conferenceHandler) {

etherpad.js

                 if (Prezi.isPresentationVisible()) {
                     largeVideo.css({opacity: '0'});
                 } else {
-                    setLargeVideoVisible(false);
-                    dockToolbar(true);
+                    VideoLayout.setLargeVideoVisible(false);
+                    Toolbar.dockToolbar(true);
                 }
 
                 $('#etherpad>iframe').fadeIn(300, function () {
                 document.body.style.background = 'black';
                 if (!isPresentation) {
                     $('#largeVideo').fadeIn(300, function () {
-                        setLargeVideoVisible(true);
-                        dockToolbar(false);
+                        VideoLayout.setLargeVideoVisible(true);
+                        Toolbar.dockToolbar(false);
                     });
                 }
             });

index.html

     <script src="moderatemuc.js?v=1"></script><!-- moderator plugin -->
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_stats.js?v=1"></script><!-- RTP stats processing -->
+    <script src="videolayout.js?v=1"></script><!-- video ui -->
+    <script src="toolbar.js?v=1"></script><!-- toolbar ui -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=20"/>
                 <a class="button" onclick="toggleScreenSharing();" title="Share screen"><i class="icon-share-desktop"></i></a>
                 <div class="header_button_separator"></div>
             </span>
-            <a class="button" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");toggleFullScreen();'><i id="fullScreen" title="Enter / Exit Full Screen" class="icon-full-screen"></i></a>
+            <a class="button" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'><i id="fullScreen" title="Enter / Exit Full Screen" class="icon-full-screen"></i></a>
         </span>
     </div>
     <div id="settings">
       </form>
     </div>
     <div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
-    <div id="videospace" onmousemove="showToolbar();">
+    <div id="videospace" onmousemove="Toolbar.showToolbar();">
         <div id="largeVideoContainer" class="videocontainer">
             <div id="presentation"></div>
             <div id="etherpad"></div>

prezi.js

             $(document).trigger("video.selected", [true]);
 
             $('#largeVideo').fadeOut(300, function () {
-                setLargeVideoVisible(false);
+                VideoLayout.setLargeVideoVisible(false);
                 $('#presentation>iframe').fadeIn(300, function() {
                     $('#presentation>iframe').css({opacity:'1'});
-                    dockToolbar(true);
+                    Toolbar.dockToolbar(true);
                 });
             });
         }
                     $('#presentation>iframe').css({opacity:'0'});
                     $('#reloadPresentation').css({display:'none'});
                     $('#largeVideo').fadeIn(300, function() {
-                        setLargeVideoVisible(true);
-                        dockToolbar(false);
+                        VideoLayout.setLargeVideoVisible(true);
+                        Toolbar.dockToolbar(false);
                     });
                 });
             }
         // We explicitly don't specify the peer jid here, because we don't want
         // this video to be dealt with as a peer related one (for example we
         // don't want to show a mute/kick menu for this one, etc.).
-        addRemoteVideoContainer(null, elementId);
-        resizeThumbnails();
+        VideoLayout.addRemoteVideoContainer(null, elementId);
+        VideoLayout.resizeThumbnails();
 
         var controlsEnabled = false;
         if (jid === connection.emuc.myroomjid)

util.js

      * Returns the available video width.
      */
     my.getAvailableVideoWidth = function () {
-        var chatspaceWidth = $('#chatspace').is(":visible") ? $('#chatspace').width() : 0;
+        var chatspaceWidth
+            = $('#chatspace').is(":visible") ? $('#chatspace').width() : 0;
 
         return window.innerWidth - chatspaceWidth;
     };
 
+    my.imageToGrayScale = function(canvas) {
+        var context = canvas.getContext('2d');
+        var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+        var pixels  = imgData.data;
+
+        for (var i = 0, n = pixels.length; i < n; i += 4) {
+            var grayscale
+                = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
+            pixels[i  ] = grayscale;        // red
+            pixels[i+1] = grayscale;        // green
+            pixels[i+2] = grayscale;        // blue
+            // pixels[i+3]              is alpha
+        }
+        // redraw the image in black & white
+        context.putImageData(imgData, 0, 0);
+    };
+
     return my;
 }(Util || {}));