Merge pull request #118 from fouksf/hide-filmstrip

Hide film strip

app.js

@@ -601,7 +601,7 @@ $(document).bind('joined.muc', function (event, jid, info) {
     ContactList.addContact(jid);
 
     // Once we've joined the muc show the toolbar
-    Toolbar.showToolbar();
+    ToolbarToggler.showToolbar();
 
     if (info.displayName)
         $(document).trigger('displaynamechanged',

bottom_toolbar.js

@@ -21,6 +21,10 @@ var BottomToolbar = (function (my) {
         ContactList.toggleContactList();
     };
 
+    my.toggleFilmStrip = function() {
+        $("#remoteVideos").toggle("slide", { direction: "down", duration: 700});
+    };
+
 
     $(document).bind("remotevideo.resized", function (event, width, height) {
         var bottom = (height - $('#bottomToolbar').outerHeight())/2 + 18;

chat.js

@@ -207,7 +207,7 @@ var Chat = (function (my) {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
             if (VideoLayout.isLargeVideoVisible())
-                Toolbar.dockToolbar(false);
+                ToolbarToggler.dockToolbar(false);
 
             videospace.animate({right: chatSize[0],
                                 width: videospaceWidth,
@@ -333,7 +333,7 @@ var Chat = (function (my) {
         if (unreadMessages) {
             unreadMsgElement.innerHTML = unreadMessages.toString();
 
-            Toolbar.dockToolbar(true);
+            ToolbarToggler.dockToolbar(true);
 
             var chatButtonElement
                 = document.getElementById('chatButton').parentNode;

contact_list.js

@@ -143,7 +143,7 @@ var ContactList = (function (my) {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
             if (VideoLayout.isLargeVideoVisible())
-                Toolbar.dockToolbar(false);
+                ToolbarToggler.dockToolbar(false);
 
             videospace.animate({right: chatSize[0],
                                 width: videospaceWidth,

css/font.css

@@ -103,3 +103,6 @@
 .icon-reload:before {
     content: "\e618";
 }
+.icon-filmstrip:before {
+    content: "\e619";
+}

etherpad.js

@@ -46,7 +46,7 @@ var Etherpad = (function (my) {
                     largeVideo.css({opacity: '0'});
                 } else {
                     VideoLayout.setLargeVideoVisible(false);
-                    Toolbar.dockToolbar(true);
+                    ToolbarToggler.dockToolbar(true);
                 }
 
                 $('#etherpad>iframe').fadeIn(300, function () {
@@ -64,7 +64,7 @@ var Etherpad = (function (my) {
                 if (!isPresentation) {
                     $('#largeVideo').fadeIn(300, function () {
                         VideoLayout.setLargeVideoVisible(true);
-                        Toolbar.dockToolbar(false);
+                        ToolbarToggler.dockToolbar(false);
                     });
                 }
             });

fonts/jitsi.svg

@@ -32,4 +32,5 @@
 <glyph unicode="&#xe616;" d="M513.087 224.534c0-141.673-114.855-256.526-256.554-256.526-141.674 0-256.534 114.851-256.534 256.526 0 141.692 114.861 256.553 256.534 256.553 141.7 0 256.554-114.861 256.554-256.553zM256.534-31.993c67.863 0 129.556 26.356 175.437 69.37-4.858 5.825-11.276 10.557-19.557 14.171-29.467 12.873-58.313 27.128-87.267 41.128-20.935 10.161-19.702 33.293-12.82 43.029 4.471 6.346 8.402 12.999 8.864 21.373 0.166 3.084 3.12 7.142 5.945 8.761 9.802 5.652 14.349 14.873 18.802 24.43 1.17 2.515 2.777 4.945 4.615 7.038 3.185 3.622 4.612 7.218 2.286 11.971-0.543 1.104 0.502 3.12 1.053 4.637 1.619 4.534 3.866 8.901 4.93 13.558 1.335 5.774 2.029 11.74 2.351 17.661 0.14 2.451-2.272 5.092-2.017 7.493 1.31 12.011-5.471 21.136-9.299 31.579-4.688 12.857-13.885 20.91-22.002 30.485-1.529 1.812-1.964 4.919-2.094 7.476-0.269 5.49-2.53 8.207-8.272 7.462-2.299-0.3-4.805-0.943-6.921-0.378-1.864 0.494-4.663 2.362-4.767 3.802-0.577 7.269-3.106 8.465-10.533 7.238-4.648-0.772-10.697 3.429-15.257 6.601-3.816 2.646-7.104 3.777-11.534 2.69-1.849-0.45-4.341-0.373-5.908 0.547-1.671 0.988-3.303 1.592-4.933 1.919v0.276c-0.36-0.007-0.745-0.065-1.104-0.108-0.361 0.044-0.72 0.103-1.078 0.108v-0.276c-1.645-0.327-3.287-0.931-4.945-1.919-1.556-0.918-4.046-0.996-5.899-0.547-4.443 1.087-7.724-0.044-11.532-2.69-4.578-3.173-10.611-7.373-15.259-6.601-7.431 1.226-9.97 0.031-10.547-7.238-0.109-1.439-2.897-3.308-4.758-3.802-2.139-0.565-4.624 0.077-6.944 0.378-5.728 0.745-7.994-1.971-8.258-7.462-0.131-2.555-0.565-5.665-2.095-7.476-8.111-9.575-17.308-17.629-22.009-30.485-3.814-10.443-10.602-19.568-9.285-31.579 0.256-2.401-2.152-5.042-2.023-7.493 0.327-5.923 1.020-11.888 2.351-17.661 1.065-4.656 3.313-9.024 4.945-13.558 0.547-1.516 1.587-3.531 1.041-4.637-2.325-4.754-0.894-8.351 2.291-11.971 1.837-2.094 3.437-4.523 4.612-7.038 4.45-9.555 8.996-18.779 18.798-24.43 2.827-1.619 5.78-5.676 5.952-8.761 0.457-8.374 4.387-15.027 8.869-21.373 6.873-9.735 7.951-32.623-12.837-43.029-28.76-14.386-57.8-28.255-87.251-41.128-8.285-3.615-14.704-8.347-19.561-14.169 45.88-43.015 107.569-69.372 175.422-69.372z" horiz-adv-x="513" />
 <glyph unicode="&#xe617;" d="M32.887 258.374c5.026 4.679 12.994 10.886 21.642 16.349 25.668 16.31 54.057 25.449 83.415 32.066 24.381 5.475 49.123 8.444 74.033 10.101 27.877 1.877 55.779 1.89 83.696 0.399 19.972-1.092 39.843-3.251 59.56-6.606 21.978-3.753 43.519-8.997 64.392-16.875 12.209-4.587 24.086-10.053 35.267-16.786 14.858-8.946 28.276-19.612 38.61-33.674 10.409-14.151 15.861-30.204 16.914-47.696 0.873-13.701 0.358-27.349-2.828-40.794-1.438-6.041-4.113-11.567-8.277-16.193-5.709-6.324-13.212-8.51-21.386-8.818-10.231-0.334-20.205 2.057-30.18 4.113-19.456 3.985-38.918 8.123-58.349 12.364-7.069 1.517-14.344 2.546-20.825 6.298-11.154 6.478-17.223 15.887-17.017 28.892 0.129 8.435 1.108 16.891 1.235 25.348 0.156 12.505-4.962 22.581-15.449 29.521-7.197 4.769-15.347 7.456-23.726 9.333-20.206 4.523-40.693 5.089-61.281 5.025-14.411-0.063-28.791-0.834-43.047-3.071-9.974-1.581-19.781-3.906-28.866-8.507-12.159-6.182-19.677-15.732-20.036-29.676-0.22-8.175 0.487-16.401 0.964-24.575 0.321-5.911-0.040-11.723-2.648-17.144-4.63-9.692-12.468-15.836-22.685-18.482-11.323-2.933-22.802-5.27-34.252-7.611-19.051-3.882-38.108-7.684-57.208-11.259-7.263-1.387-14.627-0.976-21.567 1.801-9.371 3.728-14.462 11.387-17.069 20.668-3.548 12.699-3.921 25.757-3.483 38.865 0.45 13.52 2.942 26.618 9.202 38.803 4.897 9.532 11.246 17.977 21.246 27.821z" horiz-adv-x="513" />
 <glyph unicode="&#xe618;" d="M398.543 56.151c-0.029 0.082-0.060 0.164-0.080 0.243-35.7-22.819-75.891-34.966-117.012-34.966-0.007 0-0.010 0-0.014 0-61.26 0-118.75 26.386-157.734 72.37-49.889 58.849-67.126 164.977-36.511 213.894 2.002-0.831 3.938-1.616 5.84-2.387 6.793-2.756 13.207-5.358 21.153-9.548 3.031-1.601 6.169-2.406 9.337-2.406 5.857 0 11.3 2.824 14.924 7.743 3.907 5.309 5.156 12.389 3.269 18.476l-1.762 5.705c-5.344 17.295-10.862 35.177-17.106 52.539-4.992 13.882-11.2 31.163-29.613 31.163-6.028 0-13.019-1.828-23.365-6.102-22.147-9.159-35.529-14.981-57.267-24.905-7.551-3.444-12.617-11.349-12.601-19.672 0.014-7.921 4.496-14.668 11.988-18.058 9.104-4.128 15.268-6.858 21.734-9.723l5.343-2.377c-50.969-129.551 12.401-263.229 105.657-319.606 41.749-25.237 89.25-38.57 137.385-38.57h0.021c51.36 0 102.781 15.55 142.25 42.599-15.865 14.401-22.783 34.584-25.836 43.586zM549.101 105.045c-9.057 4.288-15.178 7.129-21.611 10.122l-5.248 2.446c53.224 128.634-7.784 263.401-100.034 321.394-42.68 26.832-91.562 41.016-141.358 41.016-52.424 0-103.205-15.297-142.983-43.083l-2.692-1.882c15.798-13.782 22.93-33.394 26.459-43.205 36.463 23.97 77.838 36.704 119.947 36.704 62.704 0 121.071-27.392 160.147-75.158 48.841-59.724 64.219-166.128 32.749-214.508-1.995 0.868-3.908 1.692-5.812 2.499-6.736 2.88-13.102 5.59-20.977 9.911-3.101 1.712-6.322 2.577-9.606 2.577-5.793 0-11.2-2.779-14.845-7.634-3.906-5.217-5.239-12.216-3.483-18.257l1.639-5.651c5.048-17.423 10.265-35.428 16.206-52.921 4.794-14.119 10.757-31.691 29.589-31.691 5.921 0 12.788 1.712 22.94 5.7 22.175 8.719 35.66 14.3 57.704 23.889 7.595 3.312 12.801 11.126 12.929 19.447 0.14 7.911-4.222 14.75-11.663 18.284z" horiz-adv-x="561" />
+<glyph unicode="&#xe619;" d="M23.497 480.85c230.617 0 276.897 0 507.512 0 17.96 0 26.678-12.98 26.678-28.98-0.29-151.63-0.163-303.244-0.225-454.904 0-21.992-6.601-28.529-28.851-28.529-221.536-0.063-278.226-0.063-499.776 0-22.267 0-28.899 6.505-28.899 28.529-0.049 151.629 0.242 304.036-0.046 455.664-0.017 13.105 5.651 26.88 23.608 28.219zM155.702 225.149c0-59.522-0.036-86.084 0.029-145.625 0.018-25.022 5.604-30.525 31.060-30.525 116.676 0 68.537 0 185.261 0 23.538 0 29.625 5.991 29.625 29.048 0.063 119.555 0.063 173.169 0 292.695 0 24.069-5.344 29.495-28.884 29.495-117.661 0.050-70.422 0.050-188.078 0-23.522 0-28.965-5.522-28.983-29.445-0.065-59.554-0.029-86.105-0.029-145.643zM76.972 419.283c-37.465-0.031-33.343 2.979-33.422-33.343-0.1-31.975-3.527-31.767 31.264-31.686 36.499 0.097 33.6-1.882 33.651 33.777 0 33.861 2.043 31.298-31.493 31.251zM481.822 419.283c-35.579-0.017-32.78 3.092-32.875-32.682-0.065-33.651-2.254-32.346 32.264-32.346 36.544 0 32.649-1.015 32.649 33.119-0.001 34.323 3.478 31.955-32.038 31.909zM108.414 61.204c0.18 36.547 2.32 33.457-33.679 33.585-34.052 0.096-31.285 1.382-31.203-31.655 0.065-36.738-3.477-33.26 33.537-33.325 33.021-0.033 31.571-3.028 31.346 31.394zM513.859 62.2c0.067 34.167 3.221 32.652-31.649 32.589-35.066-0.066-33.328 2.897-33.264-32.652 0.065-35.322-2.192-32.361 31.878-32.329 35.998 0.066 33.101-3.349 33.034 32.392zM513.859 171.038c0 35.275 3.61 33.421-33.743 33.261-0.449 0-0.937 0-1.419 0-29.688 0-29.688 0-29.688-29.012 0-38.961-3.221-34.968 34.647-35.098 33.038-0.193 30.269-1.546 30.202 30.849zM75.653 244.936c34.147-0.082 32.907-2.784 32.812 31.491-0.097 35.564 2.448 32.459-33.007 32.505-34.953 0.050-31.907 2.352-31.942-31.989-0.031-33.715-2.85-32.231 32.138-32.007zM480.632 244.936c36.256-0.129 33.295-2.302 33.228 32.247 0 34.279 3.092 31.769-32.134 31.749-35.098-0.014-32.843 3.026-32.749-32.747 0.066-31.25 0.034-31.25 31.655-31.25zM75.2 140.19c35.502 0 33.329-3.284 33.233 32.264-0.082 31.847-0.018 31.75-32.507 31.878-35.403 0.129-32.411 1.337-32.411-31.878 0.018-34.584-2.959-32.394 31.684-32.264z" horiz-adv-x="558" />
 </font></defs></svg>

fonts/selection.json

@@ -1,6 +1,34 @@
 {
 	"IcoMoonType": "selection",
 	"icons": [
+		{
+			"icon": {
+				"paths": [
+					"M46.993-1.7c461.234 0 553.793 0 1015.024 0 35.919 0 53.356 25.959 53.356 57.959-0.581 303.259-0.325 606.488-0.449 909.809 0 43.984-13.203 57.058-57.703 57.058-443.072 0.126-556.453 0.126-999.553 0-44.534 0-57.799-13.009-57.799-57.058-0.098-303.257 0.485-608.072-0.093-911.329-0.034-26.21 11.301-53.761 47.217-56.439zM311.405 509.702c0 119.045-0.072 172.168 0.057 291.249 0.036 50.043 11.208 61.050 62.12 61.050 233.352 0 137.075 0 370.522 0 47.075 0 59.249-11.982 59.249-58.095 0.126-239.111 0.126-346.338 0-585.389 0-48.138-10.687-58.991-57.768-58.991-235.323-0.101-140.844-0.101-376.157 0-47.044 0-57.93 11.043-57.966 58.89-0.129 119.109-0.057 172.209-0.057 291.287zM153.944 121.434c-74.929 0.062-66.687-5.958-66.845 66.685-0.201 63.95-7.054 63.534 62.528 63.372 72.999-0.194 67.201 3.764 67.302-67.554 0-67.722 4.087-62.595-62.985-62.502zM963.644 121.434c-71.159 0.034-65.56-6.185-65.751 65.364-0.129 67.302-4.508 64.693 64.528 64.693 73.089 0 65.299 2.031 65.299-66.238-0.003-68.646 6.956-63.911-64.076-63.818zM216.828 837.592c0.359-73.094 4.639-66.914-67.358-67.17-68.104-0.191-62.569-2.763-62.407 63.31 0.129 73.476-6.954 66.52 67.074 66.649 66.042 0.065 63.142 6.056 62.691-62.789zM1027.718 835.6c0.134-68.334 6.443-65.304-63.297-65.178-70.132 0.132-66.656-5.793-66.527 65.304 0.129 70.645-4.384 64.721 63.756 64.657 71.995-0.132 66.202 6.698 66.068-64.783zM1027.718 617.923c0-70.55 7.219-66.842-67.485-66.522-0.898 0-1.873 0-2.838 0-59.375 0-59.375 0-59.375 58.023 0 77.922-6.443 69.936 69.293 70.196 66.076 0.387 60.539 3.091 60.405-61.697zM151.307 470.127c68.295 0.163 65.815 5.568 65.624-62.982-0.194-71.128 4.895-64.917-66.014-65.010-69.905-0.101-63.813-4.704-63.885 63.978-0.062 67.431-5.7 64.463 64.275 64.014zM961.263 470.127c72.511 0.258 66.589 4.603 66.455-64.494 0-68.558 6.185-63.537-64.267-63.498-70.196 0.028-65.686-6.053-65.498 65.493 0.132 62.5 0.067 62.5 63.31 62.5zM150.399 679.62c71.004 0 66.659 6.567 66.466-64.528-0.163-63.694-0.036-63.501-65.013-63.756-70.805-0.258-64.822-2.673-64.822 63.756 0.036 69.167-5.919 64.788 63.369 64.528z"
+				],
+				"attrs": [
+					{}
+				],
+				"width": 1115,
+				"grid": 0,
+				"tags": [
+					"filmstrip"
+				]
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 26,
+				"id": 29,
+				"prevSize": 32,
+				"code": 58905,
+				"name": "filmstrip",
+				"ligatures": ""
+			},
+			"setIdx": 0,
+			"iconIdx": 0
+		},
 		{
 			"icon": {
 				"paths": [
@@ -33,7 +61,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 0
+			"iconIdx": 1
 		},
 		{
 			"icon": {
@@ -61,7 +89,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 1
+			"iconIdx": 2
 		},
 		{
 			"icon": {
@@ -89,7 +117,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 2
+			"iconIdx": 3
 		},
 		{
 			"icon": {
@@ -128,7 +156,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 3
+			"iconIdx": 4
 		},
 		{
 			"icon": {
@@ -151,7 +179,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 4
+			"iconIdx": 5
 		},
 		{
 			"icon": {
@@ -174,7 +202,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 5
+			"iconIdx": 6
 		},
 		{
 			"icon": {
@@ -198,7 +226,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 6
+			"iconIdx": 7
 		},
 		{
 			"icon": {
@@ -223,7 +251,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 7
+			"iconIdx": 8
 		},
 		{
 			"icon": {
@@ -246,7 +274,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 8
+			"iconIdx": 9
 		},
 		{
 			"icon": {
@@ -270,7 +298,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 9
+			"iconIdx": 10
 		},
 		{
 			"icon": {
@@ -294,7 +322,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 10
+			"iconIdx": 11
 		},
 		{
 			"icon": {
@@ -316,7 +344,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 11
+			"iconIdx": 12
 		},
 		{
 			"icon": {
@@ -340,7 +368,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 12
+			"iconIdx": 13
 		},
 		{
 			"icon": {
@@ -364,7 +392,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 13
+			"iconIdx": 14
 		},
 		{
 			"icon": {
@@ -391,7 +419,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 14
+			"iconIdx": 15
 		},
 		{
 			"icon": {
@@ -415,7 +443,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 15
+			"iconIdx": 16
 		},
 		{
 			"icon": {
@@ -439,7 +467,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 16
+			"iconIdx": 17
 		},
 		{
 			"icon": {
@@ -464,7 +492,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 17
+			"iconIdx": 18
 		},
 		{
 			"icon": {
@@ -486,7 +514,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 18
+			"iconIdx": 19
 		},
 		{
 			"icon": {
@@ -509,7 +537,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 19
+			"iconIdx": 20
 		},
 		{
 			"icon": {
@@ -531,7 +559,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 20
+			"iconIdx": 21
 		},
 		{
 			"icon": {
@@ -554,7 +582,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 21
+			"iconIdx": 22
 		},
 		{
 			"icon": {
@@ -577,7 +605,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 22
+			"iconIdx": 23
 		},
 		{
 			"icon": {
@@ -601,7 +629,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 23
+			"iconIdx": 24
 		},
 		{
 			"icon": {
@@ -624,7 +652,7 @@
 				"ligatures": ""
 			},
 			"setIdx": 0,
-			"iconIdx": 24
+			"iconIdx": 25
 		}
 	],
 	"height": 1024,
@@ -637,7 +665,9 @@
 		"fontPref": {
 			"prefix": "icon-",
 			"metadata": {
-				"fontFamily": "jitsi"
+				"fontFamily": "jitsi",
+				"majorVersion": 1,
+				"minorVersion": 0
 			},
 			"metrics": {
 				"emSize": 512,

index.html

@@ -44,6 +44,7 @@
     <script src="local_sts.js?v=1"></script><!-- Local stats processing -->
     <script src="videolayout.js?v=8"></script><!-- video ui -->
     <script src="toolbar.js?v=4"></script><!-- toolbar ui -->
+    <script src="toolbar_toggler.js"></script>
     <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
     <script src="audio_levels.js?v=1"></script><!-- audio levels plugin -->
     <script src="media_stream.js?v=1"></script><!-- media stream -->
@@ -228,7 +229,7 @@
           </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="Toolbar.showToolbar();">
+        <div id="videospace" onmousemove="ToolbarToggler.showToolbar();">
             <div id="largeVideoContainer" class="videocontainer">
                 <div id="presentation"></div>
                 <div id="etherpad"></div>
@@ -253,13 +254,16 @@
                     <a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
                         <i id="chatBottomButton" class="icon-chat-simple"></i>
                     </a>
-                    <span id="unreadMessages"></span>
                 </span>
                 <span class="bottomToolbar_span">
                     <a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Open / close contact list" onclick='BottomToolbar.toggleContactList();'>
                         <i id="contactListButton" class="icon-contactList"></i>
                     </a>
-                    <span id="unreadMessages"></span>
+                </span>
+                <span class="bottomToolbar_span">
+                    <a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Show / hide film strip" onclick='BottomToolbar.toggleFilmStrip()'>
+                        <i id="filmStripButton" class="icon-filmstrip"></i>
+                    </a>
                 </span>
             </span>
         </div>

prezi.js

@@ -22,7 +22,7 @@ var Prezi = (function (my) {
                 VideoLayout.setLargeVideoVisible(false);
                 $('#presentation>iframe').fadeIn(300, function() {
                     $('#presentation>iframe').css({opacity:'1'});
-                    Toolbar.dockToolbar(true);
+                    ToolbarToggler.dockToolbar(true);
                 });
             });
         }
@@ -33,7 +33,7 @@ var Prezi = (function (my) {
                     $('#reloadPresentation').css({display:'none'});
                     $('#largeVideo').fadeIn(300, function() {
                         VideoLayout.setLargeVideoVisible(true);
-                        Toolbar.dockToolbar(false);
+                        ToolbarToggler.dockToolbar(false);
                     });
                 });
             }

toolbar.js

@@ -1,6 +1,4 @@
 var Toolbar = (function (my) {
-    var INITIAL_TOOLBAR_TIMEOUT = 20000;
-    var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
 
     /**
      * Opens the lock room dialog.
@@ -199,61 +197,6 @@ var Toolbar = (function (my) {
             }
         }
     };
-
-    /**
-     * Shows the main toolbar.
-     */
-    my.showToolbar = function() {
-        if (!$('#header').is(':visible')) {
-            $('#header').show("slide", { direction: "up", duration: 300});
-            $('#subject').animate({top: "+=40"}, 300);
-
-            if (toolbarTimeout) {
-                clearTimeout(toolbarTimeout);
-                toolbarTimeout = null;
-            }
-            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-            TOOLBAR_TIMEOUT = 4000;
-        }
-
-        if (focus != null)
-        {
-//            TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
-//            $('#settingsButton').css({visibility:"visible"});
-        }
-
-        // Show/hide desktop sharing button
-        showDesktopSharingButton();
-    };
-
-    /**
-     * Docks/undocks the toolbar.
-     *
-     * @param isDock indicates what operation to perform
-     */
-    my.dockToolbar = function(isDock) {
-        if (isDock) {
-            // First make sure the toolbar is shown.
-            if (!$('#header').is(':visible')) {
-                Toolbar.showToolbar();
-            }
-
-            // Then clear the time out, to dock the toolbar.
-            if (toolbarTimeout) {
-                clearTimeout(toolbarTimeout);
-                toolbarTimeout = null;
-            }
-        }
-        else {
-            if (!$('#header').is(':visible')) {
-                Toolbar.showToolbar();
-            }
-            else {
-                toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-            }
-        }
-    };
-
     /**
      * Updates the lock button state.
      */
@@ -261,30 +204,6 @@ var Toolbar = (function (my) {
         buttonClick("#lockIcon", "icon-security icon-security-locked");
     };
 
-    /**
-     * Hides the toolbar.
-     */
-    var hideToolbar = function () {
-        var isToolbarHover = false;
-        $('#header').find('*').each(function () {
-            var id = $(this).attr('id');
-            if ($("#" + id + ":hover").length > 0) {
-                isToolbarHover = true;
-            }
-        });
-
-        clearTimeout(toolbarTimeout);
-        toolbarTimeout = null;
-
-        if (!isToolbarHover) {
-            $('#header').hide("slide", { direction: "up", duration: 300});
-            $('#subject').animate({top: "-=40"}, 300);
-        }
-        else {
-            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-        }
-    };
-
     // Shows or hides the 'recording' button.
     my.showRecordingButton = function (show) {
         if (!config.enableRecording) {

toolbar_toggler.js

@@ -0,0 +1,100 @@
+var ToolbarToggler = (function(my) {
+    var INITIAL_TOOLBAR_TIMEOUT = 20000;
+    var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
+    var toolbarTimeout;
+
+    /**
+     * Shows the main toolbar.
+     */
+    my.showToolbar = function() {
+        var header = $("#header"),
+            bottomToolbar = $("#bottomToolbar");
+        if (!header.is(':visible') || !bottomToolbar.is(":visible")) {
+            header.show("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "+=40"}, 300);
+            if(!bottomToolbar.is(":visible")) {
+                bottomToolbar.show("slide", {direction: "right",cduration: 300});
+            }
+
+            if (toolbarTimeout) {
+                clearTimeout(toolbarTimeout);
+                toolbarTimeout = null;
+            }
+            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+            TOOLBAR_TIMEOUT = 4000;
+        }
+
+        if (focus != null)
+        {
+//            TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
+//            $('#settingsButton').css({visibility:"visible"});
+        }
+
+        // Show/hide desktop sharing button
+        showDesktopSharingButton();
+    };
+
+    /**
+     * Hides the toolbar.
+     */
+    var hideToolbar = function () {
+        var header = $("#header"),
+            bottomToolbar = $("#bottomToolbar");
+        var isToolbarHover = false;
+        header.find('*').each(function () {
+            var id = $(this).attr('id');
+            if ($("#" + id + ":hover").length > 0) {
+                isToolbarHover = true;
+            }
+        });
+        if($("#bottomToolbar:hover").length > 0) {
+                isToolbarHover = true;
+        }
+
+        clearTimeout(toolbarTimeout);
+        toolbarTimeout = null;
+
+        if (!isToolbarHover) {
+            header.hide("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "-=40"}, 300);
+            if(!$("#remoteVideos").is(":visible")) {
+                bottomToolbar.hide("slide", {direction: "right", cduration: 300});
+            }
+        }
+        else {
+            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+        }
+    };
+
+
+    /**
+     * Docks/undocks the toolbar.
+     *
+     * @param isDock indicates what operation to perform
+     */
+    my.dockToolbar = function(isDock) {
+        if (isDock) {
+            // First make sure the toolbar is shown.
+            if (!$('#header').is(':visible')) {
+                ToolbarToggler.showToolbar();
+            }
+
+            // Then clear the time out, to dock the toolbar.
+            if (toolbarTimeout) {
+                clearTimeout(toolbarTimeout);
+                toolbarTimeout = null;
+            }
+        }
+        else {
+            if (!$('#header').is(':visible')) {
+                ToolbarToggler.showToolbar();
+            }
+            else {
+                toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+            }
+        }
+    };
+
+
+    return my;
+}(ToolbarToggler || {}));