Change the visual when it is switched between chat and contact list.

bottom_toolbar.js

@@ -2,7 +2,11 @@ var BottomToolbar = (function (my) {
     my.toggleChat = function() {
         if (ContactList.isVisible()) {
             buttonClick("#contactListButton", "active");
-            ContactList.toggleContactList();
+            $('#contactlist').css('z-index', 4);
+            setTimeout(function() {
+                $('#contactlist').css('display', 'none');
+                $('#contactlist').css('z-index', 5);
+            }, 500);
         }
 
         buttonClick("#chatBottomButton", "active");
@@ -13,7 +17,9 @@ var BottomToolbar = (function (my) {
     my.toggleContactList = function() {
         if (Chat.isVisible()) {
             buttonClick("#chatBottomButton", "active");
-            Chat.toggleChat();
+            setTimeout(function() {
+                $('#chatspace').css('display', 'none');
+            }, 500);
         }
 
         buttonClick("#contactListButton", "active");

chat.js

@@ -143,7 +143,7 @@ var Chat = (function (my) {
         var chatspace = $('#chatspace');
         var videospace = $('#videospace');
 
-        var chatSize = (chatspace.is(":visible")) ? [0, 0] : Chat.getChatSize();
+        var chatSize = (Chat.isVisible()) ? [0, 0] : Chat.getChatSize();
         var videospaceWidth = window.innerWidth - chatSize[0];
         var videospaceHeight = window.innerHeight;
         var videoSize
@@ -160,97 +160,64 @@ var Chat = (function (my) {
         var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
         var thumbnailsWidth = thumbnailSize[0];
         var thumbnailsHeight = thumbnailSize[1];
-
-        if (chatspace.is(":visible")) {
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                                {queue: false,
-                                duration: 500});
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
+        var completeFunction = Chat.isVisible() ?
+            function() {} : function () {
+                                scrollChatToBottom();
+                                chatspace.trigger('shown');
+                            };
+
+        videospace.animate({right: chatSize[0],
+                            width: videospaceWidth,
+                            height: videospaceHeight},
+                            {queue: false,
+                            duration: 500,
+                            complete: completeFunction});
+
+        $('#remoteVideos').animate({height: thumbnailsHeight},
+                                    {queue: false,
+                                    duration: 500});
+
+        $('#remoteVideos>span').animate({height: thumbnailsHeight,
+                                        width: thumbnailsWidth},
                                         {queue: false,
-                                        duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                                            width: thumbnailsWidth},
+                                        duration: 500,
+                                        complete: function() {
+                                            $(document).trigger(
+                                                    "remotevideo.resized",
+                                                    [thumbnailsWidth,
+                                                     thumbnailsHeight]);
+                                        }});
+
+        $('#largeVideoContainer').animate({ width: videospaceWidth,
+                                            height: videospaceHeight},
                                             {queue: false,
-                                            duration: 500,
-                                            complete: function() {
-                                                $(document).trigger(
-                                                        "remotevideo.resized",
-                                                        [thumbnailsWidth,
-                                                         thumbnailsHeight]);
-                                            }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {   queue: false,
-                                            duration: 500
-                                        });
-
-            $('#chatspace').hide("slide", { direction: "right",
+                                             duration: 500
+                                            });
+
+        $('#largeVideo').animate({  width: videoWidth,
+                                    height: videoHeight,
+                                    top: verticalIndent,
+                                    bottom: verticalIndent,
+                                    left: horizontalIndent,
+                                    right: horizontalIndent},
+                                    {   queue: false,
+                                        duration: 500
+                                    }
+        );
+
+        if (Chat.isVisible()) {
+            chatspace.hide("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});
         }
         else {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
-            if (VideoLayout.isLargeVideoVisible())
+            if (VideoLayout.isLargeVideoVisible()) {
                 ToolbarToggler.dockToolbar(false);
+            }
 
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                               {queue: false,
-                                duration: 500,
-                                complete: function () {
-                                    scrollChatToBottom();
-                                    chatspace.trigger('shown');
-                                }
-                               });
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
-                    {queue: false,
-                    duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                        width: thumbnailsWidth},
-                        {queue: false,
-                        duration: 500,
-                        complete: function() {
-                            $(document).trigger(
-                                    "remotevideo.resized",
-                                    [thumbnailsWidth, thumbnailsHeight]);
-                        }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {queue: false,
-                                         duration: 500
-                                        });
-
-            $('#chatspace').show("slide", { direction: "right",
+            chatspace.show("slide", { direction: "right",
                                             queue: false,
                                             duration: 500,
                                             complete: function () {

contact_list.js

@@ -96,95 +96,58 @@ var ContactList = (function (my) {
         var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
         var thumbnailsWidth = thumbnailSize[0];
         var thumbnailsHeight = thumbnailSize[1];
-
-        if (ContactList.isVisible()) {
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                                {queue: false,
-                                duration: 500});
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
+        var completeFunction = ContactList.isVisible() ?
+            function() {} : function () { contactlist.trigger('shown');};
+
+        videospace.animate({right: chatSize[0],
+                            width: videospaceWidth,
+                            height: videospaceHeight},
+                            {queue: false,
+                            duration: 500,
+                            complete: completeFunction
+                            });
+
+        $('#remoteVideos').animate({height: thumbnailsHeight},
+                                    {queue: false,
+                                    duration: 500});
+
+        $('#remoteVideos>span').animate({height: thumbnailsHeight,
+                                        width: thumbnailsWidth},
                                         {queue: false,
-                                        duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                                            width: thumbnailsWidth},
+                                        duration: 500,
+                                        complete: function() {
+                                            $(document).trigger(
+                                                    "remotevideo.resized",
+                                                    [thumbnailsWidth,
+                                                     thumbnailsHeight]);
+                                        }});
+
+        $('#largeVideoContainer').animate({ width: videospaceWidth,
+                                            height: videospaceHeight},
                                             {queue: false,
-                                            duration: 500,
-                                            complete: function() {
-                                                $(document).trigger(
-                                                        "remotevideo.resized",
-                                                        [thumbnailsWidth,
-                                                         thumbnailsHeight]);
-                                            }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {   queue: false,
-                                            duration: 500
-                                        });
+                                             duration: 500
+                                            });
+
+        $('#largeVideo').animate({  width: videoWidth,
+                                    height: videoHeight,
+                                    top: verticalIndent,
+                                    bottom: verticalIndent,
+                                    left: horizontalIndent,
+                                    right: horizontalIndent},
+                                    {   queue: false,
+                                        duration: 500
+                                    });
 
+        if (ContactList.isVisible()) {
             $('#contactlist').hide("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});
-        }
-        else {
+        } else {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
             if (VideoLayout.isLargeVideoVisible())
                 ToolbarToggler.dockToolbar(false);
 
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                               {queue: false,
-                                duration: 500,
-                                complete: function () {
-                                    contactlist.trigger('shown');
-                                }
-                               });
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
-                    {queue: false,
-                    duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                        width: thumbnailsWidth},
-                        {queue: false,
-                        duration: 500,
-                        complete: function() {
-                            $(document).trigger(
-                                    "remotevideo.resized",
-                                    [thumbnailsWidth, thumbnailsHeight]);
-                        }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {queue: false,
-                                         duration: 500
-                                        });
-
             $('#contactlist').show("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});

css/contact_list.css

@@ -1,5 +1,5 @@
 #contactlist {
-    background-color:rgba(0,0,0,.65);
+    background-color: black;
 }
 
 #contactlist>ul {