Add option to enter channel key on server selection screen
[KiwiIRC.git] / client / assets / dev / view.js
index 93050f5862380546a19af75ff2887cbcd2e4890f..e6e5c8d15ab7e991b31e560f5d19dad041e939b7 100644 (file)
@@ -14,19 +14,54 @@ _kiwi.view.MemberList = Backbone.View.extend({
         var $this = $(this.el);\r
         $this.empty();\r
         this.model.forEach(function (member) {\r
-            $('<li><a class="nick"><span class="prefix">' + member.get("prefix") + '</span>' + member.get("nick") + '</a></li>')\r
+            var prefix_css_class = (member.get('modes') || []).join(' ');\r
+            $('<li class="mode ' + prefix_css_class + '"><a class="nick"><span class="prefix">' + member.get("prefix") + '</span>' + member.get("nick") + '</a></li>')\r
                 .appendTo($this)\r
                 .data('member', member);\r
         });\r
     },\r
-    nickClick: function (x) {\r
-        var target = $(x.currentTarget).parent('li'),\r
-            member = target.data('member'),\r
-            userbox = new _kiwi.view.UserBox();\r
+    nickClick: function (event) {\r
+        var $target = $(event.currentTarget).parent('li'),\r
+            member = $target.data('member'),\r
+            userbox;\r
         \r
+        event.stopPropagation();\r
+\r
+        // If the userbox already exists here, hide it\r
+        if ($target.find('.userbox').length > 0) {\r
+            $('.userbox', this.$el).remove();\r
+            return;\r
+        }\r
+\r
+        userbox = new _kiwi.view.UserBox();\r
         userbox.member = member;\r
-        $('.userbox', this.$el).remove();\r
-        target.append(userbox.$el);\r
+        userbox.channel = this.model.channel;\r
+\r
+        if (!this.model.getByNick(_kiwi.gateway.get('nick')).get('is_op')) {\r
+            userbox.$el.children('.if_op').remove();\r
+        }\r
+\r
+        var menu = new _kiwi.view.MenuBox(member.get('nick') || 'User');\r
+        menu.addItem('userbox', userbox.$el);\r
+        menu.show();\r
+\r
+        // Position the userbox + menubox\r
+        (function() {\r
+            var t = event.pageY,\r
+                m_bottom = t + menu.$el.outerHeight(),  // Where the bottom of menu will be\r
+                memberlist_bottom = this.$el.parent().offset().top + this.$el.parent().outerHeight();\r
+\r
+            // If the bottom of the userbox is going to be too low.. raise it\r
+            if (m_bottom > memberlist_bottom){\r
+                t = memberlist_bottom - menu.$el.outerHeight();\r
+            }\r
+\r
+            // Set the new positon\r
+            menu.$el.offset({\r
+                left: _kiwi.app.view.$el.width() - menu.$el.outerWidth() - 20,\r
+                top: t\r
+            });\r
+        }).call(this);\r
     },\r
     show: function () {\r
         $('#memberlists').children().removeClass('active');\r
@@ -40,7 +75,13 @@ _kiwi.view.UserBox = Backbone.View.extend({
     events: {\r
         'click .query': 'queryClick',\r
         'click .info': 'infoClick',\r
-        'click .slap': 'slapClick'\r
+        'click .slap': 'slapClick',\r
+        'click .op': 'opClick',\r
+        'click .deop': 'deopClick',\r
+        'click .voice': 'voiceClick',\r
+        'click .devoice': 'devoiceClick',\r
+        'click .kick': 'kickClick',\r
+        'click .ban': 'banClick'\r
     },\r
 \r
     initialize: function () {\r
@@ -59,6 +100,32 @@ _kiwi.view.UserBox = Backbone.View.extend({
 \r
     slapClick: function (event) {\r
         _kiwi.app.controlbox.processInput('/slap ' + this.member.get('nick'));\r
+    },\r
+\r
+    opClick: function (event) {\r
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' +o ' + this.member.get('nick'));\r
+    },\r
+\r
+    deopClick: function (event) {\r
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' -o ' + this.member.get('nick'));\r
+    },\r
+\r
+    voiceClick: function (event) {\r
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' +v ' + this.member.get('nick'));\r
+    },\r
+\r
+    devoiceClick: function (event) {\r
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' -v ' + this.member.get('nick'));\r
+    },\r
+\r
+    kickClick: function (event) {\r
+        // TODO: Enable the use of a custom kick message\r
+        _kiwi.app.controlbox.processInput('/kick ' + this.member.get('nick') + ' Bye!');\r
+    },\r
+\r
+    banClick: function (event) {\r
+        // TODO: Set ban on host, not just on nick\r
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' +b ' + this.member.get('nick') + '!*');\r
     }\r
 });\r
 \r
@@ -102,10 +169,13 @@ _kiwi.view.ServerSelect = function () {
         events: {\r
             'submit form': 'submitForm',\r
             'click .show_more': 'showMore',\r
-            'change .have_pass input': 'showPass'\r
+            'change .have_pass input': 'showPass',\r
+            'change .have_key input': 'showKey'\r
         },\r
 \r
         initialize: function () {\r
+            var that = this;\r
+\r
             this.$el = $($('#tmpl_server_select').html());\r
 \r
             // Remove the 'more' link if the server has disabled server changing\r
@@ -127,10 +197,25 @@ _kiwi.view.ServerSelect = function () {
                     this.setStatus('Nickname already taken');\r
                     this.show('nick_change');\r
                 }\r
+\r
+                if (data.error == 'password_mismatch') {\r
+                    this.setStatus('Incorrect Password');\r
+                    this.show('nick_change');\r
+                    that.$el.find('.password').select();\r
+                }\r
             }, this);\r
         },\r
 \r
         submitForm: function (event) {\r
+            event.preventDefault();\r
+\r
+            // Make sure a nick is chosen\r
+            if (!$('input.nick', this.$el).val().trim()) {\r
+                this.setStatus('Select a nickname first!');\r
+                $('input.nick', this.$el).select();\r
+                return;\r
+            }\r
+\r
             if (state === 'nick_change') {\r
                 this.submitNickChange(event);\r
             } else {\r
@@ -138,7 +223,7 @@ _kiwi.view.ServerSelect = function () {
             }\r
 \r
             $('button', this.$el).attr('disabled', 1);\r
-            return false;\r
+            return;\r
         },\r
 \r
         submitLogin: function (event) {\r
@@ -171,6 +256,14 @@ _kiwi.view.ServerSelect = function () {
             }\r
         },\r
 \r
+        showKey: function (event) {\r
+            if (this.$el.find('tr.have_key input').is(':checked')) {\r
+                this.$el.find('tr.key').show().find('input').focus();\r
+            } else {\r
+                this.$el.find('tr.key').hide().find('input').val('');\r
+            }\r
+        },\r
+\r
         showMore: function (event) {\r
             $('.more', this.$el).slideDown('fast');\r
             $('input.server', this.$el).select();\r
@@ -193,9 +286,17 @@ _kiwi.view.ServerSelect = function () {
             $('input.server', this.$el).val(server);\r
             $('input.port', this.$el).val(port);\r
             $('input.ssl', this.$el).prop('checked', ssl);\r
+            $('input#server_select_show_pass', this.$el).prop('checked', !(!password));\r
             $('input.password', this.$el).val(password);\r
+            if (!(!password)) {\r
+                $('tr.pass', this.$el).show();\r
+            }\r
             $('input.channel', this.$el).val(channel);\r
+            $('input#server_select_show_channel_key', this.$el).prop('checked', !(!channel_key));\r
             $('input.channel_key', this.$el).val(channel_key);\r
+            if (!(!channel_key)) {\r
+                $('tr.key', this.$el).show();\r
+            }\r
         },\r
 \r
         hide: function () {\r
@@ -226,7 +327,7 @@ _kiwi.view.ServerSelect = function () {
             $('.status', this.$el)\r
                 .text(text)\r
                 .attr('class', 'status')\r
-                .addClass(class_name)\r
+                .addClass(class_name||'')\r
                 .show();\r
         },\r
         clearStatus: function () {\r
@@ -290,11 +391,15 @@ _kiwi.view.Panel = Backbone.View.extend({
     },\r
 \r
     render: function () {\r
+        var that = this;\r
+\r
         this.$el.empty();\r
-        this.model.get("backscroll").forEach(this.newMsg);\r
+        _.each(this.model.get('scrollback'), function (msg) {\r
+            that.newMsg(msg);\r
+        });\r
     },\r
+\r
     newMsg: function (msg) {\r
-        // TODO: make sure that the message pane is scrolled to the bottom (Or do we? ~Darren)\r
         var re, line_msg, $this = this.$el,\r
             nick_colour_hex, nick_hex, is_highlight, msg_css_classes = '';\r
 \r
@@ -315,8 +420,9 @@ _kiwi.view.Panel = Backbone.View.extend({
 \r
 \r
         // Parse any links found\r
-        msg.msg = msg.msg.replace(/(([A-Za-z0-9\-]+\:\/\/)|(www\.))([\w.]+)([a-zA-Z]{2,6})(:[0-9]+)?(\/[\w#!:.?$'()[\]*,;~+=&%@!\-\/]*)?/gi, function (url) {\r
-            var nice, extra_html = '';\r
+        msg.msg = msg.msg.replace(/(([A-Za-z0-9\-]+\:\/\/)|(www\.))([\w.\-]+)([a-zA-Z]{2,6})(:[0-9]+)?(\/[\w#!:.?$'()[\]*,;~+=&%@!\-\/]*)?/gi, function (url) {\r
+            var nice = url,\r
+                extra_html = '';\r
 \r
             // Add the http if no protoocol was found\r
             if (url.match(/^www\./)) {\r
@@ -324,7 +430,6 @@ _kiwi.view.Panel = Backbone.View.extend({
             }\r
 \r
             // Shorten the displayed URL if it's going to be too long\r
-            nice = url;\r
             if (nice.length > 100) {\r
                 nice = nice.substr(0, 100) + '...';\r
             }\r
@@ -371,9 +476,12 @@ _kiwi.view.Panel = Backbone.View.extend({
         // Activity/alerts based on the type of new message\r
         if (msg.type.match(/^action /)) {\r
             this.alert('action');\r
+\r
         } else if (is_highlight) {\r
             _kiwi.app.view.alertWindow('* People are talking!');\r
+            _kiwi.app.view.playSound('highlight');\r
             this.alert('highlight');\r
+\r
         } else {\r
             // If this is the active panel, send an alert out\r
             if (this.model.isActive()) {\r
@@ -382,6 +490,25 @@ _kiwi.view.Panel = Backbone.View.extend({
             this.alert('activity');\r
         }\r
 \r
+        if (this.model.isQuery() && !this.model.isActive()) {\r
+            _kiwi.app.view.alertWindow('* People are talking!');\r
+            _kiwi.app.view.playSound('highlight');\r
+        }\r
+\r
+        // Update the activity counters\r
+        (function () {\r
+            // Only inrement the counters if we're not the active panel\r
+            if (this.model.isActive()) return;\r
+\r
+            var $act = this.model.tab.find('.activity');\r
+            $act.text((parseInt($act.text(), 10) || 0) + 1);\r
+            if ($act.text() === '0') {\r
+                $act.addClass('zero');\r
+            } else {\r
+                $act.removeClass('zero');\r
+            }\r
+        }).apply(this);\r
+\r
         this.scrollToBottom();\r
 \r
         // Make sure our DOM isn't getting too large (Acts as scrollback)\r
@@ -416,6 +543,7 @@ _kiwi.view.Panel = Backbone.View.extend({
         media_message.open();\r
     },\r
 \r
+    // Cursor hovers over a message\r
     msgEnter: function (event) {\r
         var nick_class;\r
 \r
@@ -432,6 +560,7 @@ _kiwi.view.Panel = Backbone.View.extend({
         $('.'+nick_class).addClass('global_nick_highlight');\r
     },\r
 \r
+    // Cursor leaves message\r
     msgLeave: function (event) {\r
         var nick_class;\r
 \r
@@ -466,10 +595,13 @@ _kiwi.view.Panel = Backbone.View.extend({
         }\r
 \r
         _kiwi.app.view.doLayout();\r
+\r
+        // Remove any alerts and activity counters for this panel\r
         this.alert('none');\r
+        this.model.tab.find('.activity').text('0').addClass('zero');\r
 \r
         this.trigger('active', this.model);\r
-        _kiwi.app.panels.trigger('active', this.model);\r
+        _kiwi.app.panels.trigger('active', this.model, _kiwi.app.panels.active);\r
 \r
         this.scrollToBottom(true);\r
     },\r
@@ -534,6 +666,20 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({
     initialize: function (options) {\r
         this.initializePanel(options);\r
         this.model.bind('change:topic', this.topic, this);\r
+\r
+        // Only show the loader if this is a channel (ie. not a query)\r
+        if (this.model.isChannel()) {\r
+            this.$el.append('<div class="initial_loader" style="margin:1em;text-align:center;">Joining channel.. <span class="loader"></span></div>');\r
+        }\r
+    },\r
+\r
+    // Override the existing newMsg() method to remove the joining channel loader\r
+    newMsg: function () {\r
+        this.$el.find('.initial_loader').slideUp(function () {\r
+            $(this).remove();\r
+        });\r
+\r
+        return this.constructor.__super__.newMsg.apply(this, arguments);\r
     },\r
 \r
     topic: function (topic) {\r
@@ -600,10 +746,11 @@ _kiwi.view.Tabs = Backbone.View.extend({
 \r
     panelAdded: function (panel) {\r
         // Add a tab to the panel\r
-        panel.tab = $('<li><span>' + (panel.get('title') || panel.get('name')) + '</span></li>');\r
+        panel.tab = $('<li><span>' + (panel.get('title') || panel.get('name')) + '</span><div class="activity"></div></li>');\r
 \r
         if (panel.isServer()) {\r
             panel.tab.addClass('server');\r
+            panel.tab.addClass('icon-nonexistant');\r
         }\r
 \r
         panel.tab.data('panel_id', panel.cid)\r
@@ -619,7 +766,7 @@ _kiwi.view.Tabs = Backbone.View.extend({
         _kiwi.app.view.doLayout();\r
     },\r
 \r
-    panelActive: function (panel) {\r
+    panelActive: function (panel, previously_active_panel) {\r
         // Remove any existing tabs or part images\r
         $('.part', this.$el).remove();\r
         this.tabs_applets.children().removeClass('active');\r
@@ -629,7 +776,7 @@ _kiwi.view.Tabs = Backbone.View.extend({
 \r
         // Only show the part image on non-server tabs\r
         if (!panel.isServer()) {\r
-            panel.tab.append('<span class="part"></span>');\r
+            panel.tab.append('<span class="part icon-nonexistant"></span>');\r
         }\r
     },\r
 \r
@@ -754,7 +901,7 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             meta;\r
 \r
         if (navigator.appVersion.indexOf("Mac") !== -1) {\r
-            meta = ev.ctrlKey;\r
+            meta = ev.metaKey;\r
         } else {\r
             meta = ev.altKey;\r
         }\r
@@ -798,11 +945,11 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             }\r
             break;\r
 \r
-        case (ev.keyCode === 37 && meta):            // left\r
+        case (ev.keyCode === 219 && meta):            // [ + meta\r
             _kiwi.app.panels.view.prev();\r
             return false;\r
 \r
-        case (ev.keyCode === 39 && meta):            // right\r
+        case (ev.keyCode === 221 && meta):            // ] + meta\r
             _kiwi.app.panels.view.next();\r
             return false;\r
 \r
@@ -826,12 +973,20 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             }\r
             \r
             (function () {\r
-                var tokens = inp_val.substring(0, inp[0].selectionStart).split(' '),\r
-                    val,\r
-                    p1,\r
-                    newnick,\r
-                    range,\r
-                    nick = tokens[tokens.length - 1];\r
+                var tokens,              // Words before the cursor position\r
+                    val,                 // New value being built up\r
+                    p1,                  // Position in the value just before the nick \r
+                    newnick,             // New nick to be displayed (cycles through)\r
+                    range,               // TextRange for setting new text cursor position\r
+                    nick,                // Current nick in the value\r
+                    trailing = ': ';     // Text to be inserted after a tabbed nick\r
+\r
+                tokens = inp_val.substring(0, inp[0].selectionStart).split(' ');\r
+                if (tokens[tokens.length-1] == ':')\r
+                    tokens.pop();\r
+\r
+                nick  = tokens[tokens.length - 1];\r
+\r
                 if (this.tabcomplete.prefix === '') {\r
                     this.tabcomplete.prefix = nick;\r
                 }\r
@@ -841,21 +996,31 @@ _kiwi.view.ControlBox = Backbone.View.extend({
                 });\r
 \r
                 if (this.tabcomplete.data.length > 0) {\r
+                    // Get the current value before cursor position\r
                     p1 = inp[0].selectionStart - (nick.length);\r
                     val = inp_val.substr(0, p1);\r
+\r
+                    // Include the current selected nick\r
                     newnick = this.tabcomplete.data.shift();\r
                     this.tabcomplete.data.push(newnick);\r
                     val += newnick;\r
+\r
+                    if (inp_val.substr(inp[0].selectionStart, 2) !== trailing)\r
+                        val += trailing;\r
+\r
+                    // Now include the rest of the current value\r
                     val += inp_val.substr(inp[0].selectionStart);\r
+\r
                     inp.val(val);\r
 \r
+                    // Move the cursor position to the end of the nick\r
                     if (inp[0].setSelectionRange) {\r
-                        inp[0].setSelectionRange(p1 + newnick.length, p1 + newnick.length);\r
+                        inp[0].setSelectionRange(p1 + newnick.length + trailing.length, p1 + newnick.length + trailing.length);\r
                     } else if (inp[0].createTextRange) { // not sure if this bit is actually needed....\r
                         range = inp[0].createTextRange();\r
                         range.collapse(true);\r
-                        range.moveEnd('character', p1 + newnick.length);\r
-                        range.moveStart('character', p1 + newnick.length);\r
+                        range.moveEnd('character', p1 + newnick.length + trailing.length);\r
+                        range.moveStart('character', p1 + newnick.length + trailing.length);\r
                         range.select();\r
                     }\r
                 }\r
@@ -897,13 +1062,20 @@ _kiwi.view.ControlBox = Backbone.View.extend({
 \r
         // Trigger the command events\r
         this.trigger('command', {command: command, params: params});\r
-        this.trigger('command_' + command, {command: command, params: params});\r
+        this.trigger('command:' + command, {command: command, params: params});\r
 \r
         // If we didn't have any listeners for this event, fire a special case\r
         // TODO: This feels dirty. Should this really be done..?\r
-        if (!this._callbacks['command_' + command]) {\r
+        if (!this._callbacks['command:' + command]) {\r
             this.trigger('unknown_command', {command: command, params: params});\r
         }\r
+    },\r
+\r
+\r
+    addPluginIcon: function ($icon) {\r
+        var $tool = $('<div class="tool"></div>').append($icon);\r
+        this.$el.find('.input_tools').append($tool);\r
+        _kiwi.app.view.doLayout();\r
     }\r
 });\r
 \r
@@ -925,7 +1097,7 @@ _kiwi.view.StatusMessage = Backbone.View.extend({
         opt.timeout = opt.timeout || 5000;\r
 \r
         this.$el.text(text).attr('class', opt.type);\r
-        this.$el.slideDown(_kiwi.app.view.doLayout);\r
+        this.$el.slideDown($.proxy(_kiwi.app.view.doLayout, this));\r
 \r
         if (opt.timeout) this.doTimeout(opt.timeout);\r
     },\r
@@ -943,7 +1115,7 @@ _kiwi.view.StatusMessage = Backbone.View.extend({
     },\r
 \r
     hide: function () {\r
-        this.$el.slideUp(_kiwi.app.view.doLayout);\r
+        this.$el.slideUp($.proxy(_kiwi.app.view.doLayout, this));\r
     },\r
 \r
     doTimeout: function (length) {\r
@@ -1005,14 +1177,22 @@ _kiwi.view.AppToolbar = Backbone.View.extend({
 \r
 _kiwi.view.Application = Backbone.View.extend({\r
     initialize: function () {\r
-        $(window).resize(this.doLayout);\r
-        $('#toolbar').resize(this.doLayout);\r
-        $('#controlbox').resize(this.doLayout);\r
+        var that = this;\r
+\r
+        $(window).resize(function() { that.doLayout.apply(that); });\r
+        $('#toolbar').resize(function() { that.doLayout.apply(that); });\r
+        $('#controlbox').resize(function() { that.doLayout.apply(that); });\r
 \r
         // Change the theme when the config is changed\r
         _kiwi.global.settings.on('change:theme', this.updateTheme, this);\r
         this.updateTheme(getQueryVariable('theme'));\r
 \r
+        _kiwi.global.settings.on('change:channel_list_style', this.setTabLayout, this);\r
+        this.setTabLayout(_kiwi.global.settings.get('channel_list_style'));\r
+\r
+        _kiwi.global.settings.on('change:show_timestamps', this.displayTimestamps, this);\r
+        this.displayTimestamps(_kiwi.global.settings.get('show_timestamps'));\r
+\r
         this.doLayout();\r
 \r
         $(document).keydown(this.setKeyFocus);\r
@@ -1023,6 +1203,8 @@ _kiwi.view.Application = Backbone.View.extend({
                 return 'This will close all KiwiIRC conversations. Are you sure you want to close this window?';\r
             }\r
         };\r
+\r
+        this.initSound();\r
     },\r
 \r
 \r
@@ -1046,6 +1228,36 @@ _kiwi.view.Application = Backbone.View.extend({
     },\r
 \r
 \r
+    setTabLayout: function (layout_style) {\r
+        // If called by the settings callback, get the correct new_value\r
+        if (layout_style === _kiwi.global.settings) {\r
+            layout_style = arguments[1];\r
+        }\r
+        \r
+        if (layout_style == 'list') {\r
+            this.$el.addClass('chanlist_treeview');\r
+        } else {\r
+            this.$el.removeClass('chanlist_treeview');\r
+        }\r
+        \r
+        this.doLayout();\r
+    },\r
+\r
+\r
+    displayTimestamps: function (show_timestamps) {\r
+        // If called by the settings callback, get the correct new_value\r
+        if (show_timestamps === _kiwi.global.settings) {\r
+            show_timestamps = arguments[1];\r
+        }\r
+\r
+        if (show_timestamps) {\r
+            this.$el.addClass('timestamps');\r
+        } else {\r
+            this.$el.removeClass('timestamps');\r
+        }\r
+    },\r
+\r
+\r
     // Globally shift focus to the command input box on a keypress\r
     setKeyFocus: function (ev) {\r
         // If we're copying text, don't shift focus\r
@@ -1054,7 +1266,7 @@ _kiwi.view.Application = Backbone.View.extend({
         }\r
 \r
         // If we're typing into an input box somewhere, ignore\r
-        if ((ev.target.tagName.toLowerCase() === 'input') || $(ev.target).attr('contenteditable')) {\r
+        if ((ev.target.tagName.toLowerCase() === 'input') || (ev.target.tagName.toLowerCase() === 'textarea') || $(ev.target).attr('contenteditable')) {\r
             return;\r
         }\r
 \r
@@ -1063,12 +1275,12 @@ _kiwi.view.Application = Backbone.View.extend({
 \r
 \r
     doLayout: function () {\r
-        var el_kiwi = $('#kiwi');\r
-        var el_panels = $('#panels');\r
-        var el_memberlists = $('#memberlists');\r
-        var el_toolbar = $('#toolbar');\r
-        var el_controlbox = $('#controlbox');\r
-        var el_resize_handle = $('#memberlists_resize_handle');\r
+        var el_kiwi = this.$el;\r
+        var el_panels = $('#kiwi #panels');\r
+        var el_memberlists = $('#kiwi #memberlists');\r
+        var el_toolbar = $('#kiwi #toolbar');\r
+        var el_controlbox = $('#kiwi #controlbox');\r
+        var el_resize_handle = $('#kiwi #memberlists_resize_handle');\r
 \r
         var css_heights = {\r
             top: el_toolbar.outerHeight(true),\r
@@ -1090,6 +1302,11 @@ _kiwi.view.Application = Backbone.View.extend({
         el_memberlists.css(css_heights);\r
         el_resize_handle.css(css_heights);\r
 \r
+        // If we have channel tabs on the side, adjust the height\r
+        if (el_kiwi.hasClass('chanlist_treeview')) {\r
+            $('#tabs', el_kiwi).css(css_heights);\r
+        }\r
+\r
         // Determine if we have a narrow window (mobile/tablet/or even small desktop window)\r
         if (el_kiwi.outerWidth() < 400) {\r
             el_kiwi.addClass('narrow');\r
@@ -1109,6 +1326,9 @@ _kiwi.view.Application = Backbone.View.extend({
             // And move the handle just out of sight to the right\r
             el_resize_handle.css('left', el_panels.outerWidth(true));\r
         }\r
+\r
+        var input_wrap_width = parseInt($('#kiwi #controlbox .input_tools').outerWidth());\r
+        el_controlbox.find('.input_wrap').css('right', input_wrap_width + 7);\r
     },\r
 \r
 \r
@@ -1187,8 +1407,8 @@ _kiwi.view.Application = Backbone.View.extend({
         var that = this;\r
 \r
         if (!instant) {\r
-            $('#toolbar').slideUp({queue: false, duration: 400, step: this.doLayout});\r
-            $('#controlbox').slideUp({queue: false, duration: 400, step: this.doLayout});\r
+            $('#toolbar').slideUp({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});\r
+            $('#controlbox').slideUp({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});\r
         } else {\r
             $('#toolbar').slideUp(0);\r
             $('#controlbox').slideUp(0);\r
@@ -1200,13 +1420,47 @@ _kiwi.view.Application = Backbone.View.extend({
         var that = this;\r
 \r
         if (!instant) {\r
-            $('#toolbar').slideDown({queue: false, duration: 400, step: this.doLayout});\r
-            $('#controlbox').slideDown({queue: false, duration: 400, step: this.doLayout});\r
+            $('#toolbar').slideDown({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});\r
+            $('#controlbox').slideDown({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});\r
         } else {\r
             $('#toolbar').slideDown(0);\r
             $('#controlbox').slideDown(0);\r
             this.doLayout();\r
         }\r
+    },\r
+\r
+\r
+    initSound: function () {\r
+        var that = this,\r
+            base_path = this.model.get('base_path');\r
+\r
+        $script(base_path + '/assets/libs/soundmanager2/soundmanager2-nodebug-jsmin.js', function() {\r
+            if (typeof soundManager === 'undefined')\r
+                return;\r
+\r
+            soundManager.setup({\r
+                url: base_path + '/assets/libs/soundmanager2/',\r
+                flashVersion: 9, // optional: shiny features (default = 8)// optional: ignore Flash where possible, use 100% HTML5 mode\r
+                preferFlash: true,\r
+\r
+                onready: function() {\r
+                    that.sound_object = soundManager.createSound({\r
+                        id: 'highlight',\r
+                        url: base_path + '/assets/sound/highlight.mp3'\r
+                    });\r
+                }\r
+            });\r
+        });\r
+    },\r
+\r
+\r
+    playSound: function (sound_id) {\r
+        if (!this.sound_object) return;\r
+\r
+        if (_kiwi.global.settings.get('mute_sounds'))\r
+            return;\r
+        \r
+        soundManager.play(sound_id);\r
     }\r
 });\r
 \r
@@ -1337,4 +1591,96 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
 \r
         return html;\r
     }\r
-});
\ No newline at end of file
+});\r
+\r
+\r
+\r
+_kiwi.view.MenuBox = Backbone.View.extend({\r
+    events: {\r
+        'click .ui_menu_foot .close': 'dispose'\r
+    },\r
+\r
+    initialize: function(title) {\r
+        var that = this;\r
+\r
+        this.$el = $('<div class="ui_menu"></div>');\r
+\r
+        this._title = title || '';\r
+        this._items = {};\r
+        this._display_footer = true;\r
+\r
+        this._close_proxy = function(event) {\r
+            that.onDocumentClick(event);\r
+        };\r
+        $(document).on('click', this._close_proxy);\r
+    },\r
+\r
+\r
+    render: function() {\r
+        var that = this;\r
+\r
+        this.$el.find('*').remove();\r
+\r
+        if (this._title) {\r
+            $('<div class="ui_menu_title"></div>')\r
+                .text(this._title)\r
+                .appendTo(this.$el);\r
+        }\r
+\r
+\r
+        _.each(this._items, function(item) {\r
+            var $item = $('<div class="ui_menu_content hover"></div>')\r
+                .append(item);\r
+\r
+            that.$el.append($item);\r
+        });\r
+\r
+        if (this._display_footer)\r
+            this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>');\r
+    },\r
+\r
+\r
+    onDocumentClick: function(event) {\r
+        var $target = $(event.target);\r
+\r
+        // If this is not itself AND we don't contain this element, dispose $el\r
+        if ($target[0] != this.$el[0] && this.$el.has($target).length === 0)\r
+            this.dispose();\r
+    },\r
+\r
+\r
+    dispose: function() {\r
+        _.each(this._items, function(item) {\r
+            item.dispose && item.dispose();\r
+            item.remove && item.remove();\r
+        });\r
+\r
+        this._items = null;\r
+        this.remove();\r
+\r
+        $(document).off('click', this._close_proxy);\r
+    },\r
+\r
+\r
+    addItem: function(item_name, $item) {\r
+        $item = $($item);\r
+        if ($item.is('a')) $item.addClass('icon-chevron-right');\r
+        this._items[item_name] = $item;\r
+    },\r
+\r
+\r
+    removeItem: function(item_name) {\r
+        delete this._items[item_name];\r
+    },\r
+\r
+\r
+    showFooter: function(show) {\r
+        this._show_footer = show;\r
+    },\r
+\r
+\r
+    show: function() {\r
+        this.render();\r
+        this.$el.appendTo(_kiwi.app.view.$el);\r
+    }\r
+});\r