X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=client%2Fassets%2Fdev%2Fview.js;h=b104c7c002b47a805fd840d0b1985538fdefd7e4;hb=0e546dd4622fbb302b822dbc247f639d51a94c97;hp=6a09edd259964a1763d7a942931242ae7bb84d9e;hpb=9d5e7df8af6461308ba87bba2286753eab356246;p=KiwiIRC.git

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 6a09edd..b104c7c 100644
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -20,14 +20,48 @@ _kiwi.view.MemberList = Backbone.View.extend({
                 .data('member', member);
         });
     },
-    nickClick: function (x) {
-        var target = $(x.currentTarget).parent('li'),
-            member = target.data('member'),
-            userbox = new _kiwi.view.UserBox();
+    nickClick: function (event) {
+        var $target = $(event.currentTarget).parent('li'),
+            member = $target.data('member'),
+            userbox;
         
+        event.stopPropagation();
+
+        // If the userbox already exists here, hide it
+        if ($target.find('.userbox').length > 0) {
+            $('.userbox', this.$el).remove();
+            return;
+        }
+
+        userbox = new _kiwi.view.UserBox();
         userbox.member = member;
-        $('.userbox', this.$el).remove();
-        target.append(userbox.$el);
+        userbox.channel = this.model.channel;
+
+        if (!this.model.getByNick(_kiwi.gateway.get('nick')).get('is_op')) {
+            userbox.$el.children('.if_op').remove();
+        }
+
+        var menu = new _kiwi.view.MenuBox(member.get('nick') || 'User');
+        menu.addItem('userbox', userbox.$el);
+        menu.show();
+
+        // Position the userbox + menubox
+        (function() {
+            var t = event.pageY,
+                m_bottom = t + menu.$el.outerHeight(),  // Where the bottom of menu will be
+                memberlist_bottom = this.$el.parent().offset().top + this.$el.parent().outerHeight();
+
+            // If the bottom of the userbox is going to be too low.. raise it
+            if (m_bottom > memberlist_bottom){
+                t = memberlist_bottom - menu.$el.outerHeight();
+            }
+
+            // Set the new positon
+            menu.$el.offset({
+                left: _kiwi.app.view.$el.width() - menu.$el.outerWidth() - 20,
+                top: t
+            });
+        }).call(this);
     },
     show: function () {
         $('#memberlists').children().removeClass('active');
@@ -41,7 +75,13 @@ _kiwi.view.UserBox = Backbone.View.extend({
     events: {
         'click .query': 'queryClick',
         'click .info': 'infoClick',
-        'click .slap': 'slapClick'
+        'click .slap': 'slapClick',
+        'click .op': 'opClick',
+        'click .deop': 'deopClick',
+        'click .voice': 'voiceClick',
+        'click .devoice': 'devoiceClick',
+        'click .kick': 'kickClick',
+        'click .ban': 'banClick'
     },
 
     initialize: function () {
@@ -60,6 +100,32 @@ _kiwi.view.UserBox = Backbone.View.extend({
 
     slapClick: function (event) {
         _kiwi.app.controlbox.processInput('/slap ' + this.member.get('nick'));
+    },
+
+    opClick: function (event) {
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' +o ' + this.member.get('nick'));
+    },
+
+    deopClick: function (event) {
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' -o ' + this.member.get('nick'));
+    },
+
+    voiceClick: function (event) {
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' +v ' + this.member.get('nick'));
+    },
+
+    devoiceClick: function (event) {
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' -v ' + this.member.get('nick'));
+    },
+
+    kickClick: function (event) {
+        // TODO: Enable the use of a custom kick message
+        _kiwi.app.controlbox.processInput('/kick ' + this.member.get('nick') + ' Bye!');
+    },
+
+    banClick: function (event) {
+        // TODO: Set ban on host, not just on nick
+        _kiwi.app.controlbox.processInput('/mode ' + this.channel.get('name') + ' +b ' + this.member.get('nick') + '!*');
     }
 });
 
@@ -107,6 +173,8 @@ _kiwi.view.ServerSelect = function () {
         },
 
         initialize: function () {
+            var that = this;
+
             this.$el = $($('#tmpl_server_select').html());
 
             // Remove the 'more' link if the server has disabled server changing
@@ -128,10 +196,25 @@ _kiwi.view.ServerSelect = function () {
                     this.setStatus('Nickname already taken');
                     this.show('nick_change');
                 }
+
+                if (data.error == 'password_mismatch') {
+                    this.setStatus('Incorrect Password');
+                    this.show('nick_change');
+                    that.$el.find('.password').select();
+                }
             }, this);
         },
 
         submitForm: function (event) {
+            event.preventDefault();
+
+            // Make sure a nick is chosen
+            if (!$('input.nick', this.$el).val().trim()) {
+                this.setStatus('Select a nickname first!');
+                $('input.nick', this.$el).select();
+                return;
+            }
+
             if (state === 'nick_change') {
                 this.submitNickChange(event);
             } else {
@@ -139,7 +222,7 @@ _kiwi.view.ServerSelect = function () {
             }
 
             $('button', this.$el).attr('disabled', 1);
-            return false;
+            return;
         },
 
         submitLogin: function (event) {
@@ -227,7 +310,7 @@ _kiwi.view.ServerSelect = function () {
             $('.status', this.$el)
                 .text(text)
                 .attr('class', 'status')
-                .addClass(class_name)
+                .addClass(class_name||'')
                 .show();
         },
         clearStatus: function () {
@@ -291,11 +374,15 @@ _kiwi.view.Panel = Backbone.View.extend({
     },
 
     render: function () {
+        var that = this;
+
         this.$el.empty();
-        this.model.get("backscroll").forEach(this.newMsg);
+        _.each(this.model.get('scrollback'), function (msg) {
+            that.newMsg(msg);
+        });
     },
+
     newMsg: function (msg) {
-        // TODO: make sure that the message pane is scrolled to the bottom (Or do we? ~Darren)
         var re, line_msg, $this = this.$el,
             nick_colour_hex, nick_hex, is_highlight, msg_css_classes = '';
 
@@ -372,9 +459,12 @@ _kiwi.view.Panel = Backbone.View.extend({
         // Activity/alerts based on the type of new message
         if (msg.type.match(/^action /)) {
             this.alert('action');
+
         } else if (is_highlight) {
             _kiwi.app.view.alertWindow('* People are talking!');
+            _kiwi.app.view.playSound('highlight');
             this.alert('highlight');
+
         } else {
             // If this is the active panel, send an alert out
             if (this.model.isActive()) {
@@ -383,6 +473,25 @@ _kiwi.view.Panel = Backbone.View.extend({
             this.alert('activity');
         }
 
+        if (this.model.isQuery() && !this.model.isActive()) {
+            _kiwi.app.view.alertWindow('* People are talking!');
+            _kiwi.app.view.playSound('highlight');
+        }
+
+        // Update the activity counters
+        (function () {
+            // Only inrement the counters if we're not the active panel
+            if (this.model.isActive()) return;
+
+            var $act = this.model.tab.find('.activity');
+            $act.text((parseInt($act.text(), 10) || 0) + 1);
+            if ($act.text() === '0') {
+                $act.addClass('zero');
+            } else {
+                $act.removeClass('zero');
+            }
+        }).apply(this);
+
         this.scrollToBottom();
 
         // Make sure our DOM isn't getting too large (Acts as scrollback)
@@ -417,6 +526,7 @@ _kiwi.view.Panel = Backbone.View.extend({
         media_message.open();
     },
 
+    // Cursor hovers over a message
     msgEnter: function (event) {
         var nick_class;
 
@@ -433,6 +543,7 @@ _kiwi.view.Panel = Backbone.View.extend({
         $('.'+nick_class).addClass('global_nick_highlight');
     },
 
+    // Cursor leaves message
     msgLeave: function (event) {
         var nick_class;
 
@@ -467,10 +578,13 @@ _kiwi.view.Panel = Backbone.View.extend({
         }
 
         _kiwi.app.view.doLayout();
+
+        // Remove any alerts and activity counters for this panel
         this.alert('none');
+        this.model.tab.find('.activity').text('0').addClass('zero');
 
         this.trigger('active', this.model);
-        _kiwi.app.panels.trigger('active', this.model);
+        _kiwi.app.panels.trigger('active', this.model, _kiwi.app.panels.active);
 
         this.scrollToBottom(true);
     },
@@ -535,6 +649,20 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({
     initialize: function (options) {
         this.initializePanel(options);
         this.model.bind('change:topic', this.topic, this);
+
+        // Only show the loader if this is a channel (ie. not a query)
+        if (this.model.isChannel()) {
+            this.$el.append('<div class="initial_loader" style="margin:1em;text-align:center;">Joining channel.. <span class="loader"></span></div>');
+        }
+    },
+
+    // Override the existing newMsg() method to remove the joining channel loader
+    newMsg: function () {
+        this.$el.find('.initial_loader').slideUp(function () {
+            $(this).remove();
+        });
+
+        return this.constructor.__super__.newMsg.apply(this, arguments);
     },
 
     topic: function (topic) {
@@ -553,6 +681,8 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({
 
 // Model for this = _kiwi.model.PanelList
 _kiwi.view.Tabs = Backbone.View.extend({
+    tagName: 'ul',
+
     events: {
         'click li': 'tabClick',
         'click li .part': 'partClick'
@@ -565,22 +695,24 @@ _kiwi.view.Tabs = Backbone.View.extend({
 
         this.model.on('active', this.panelActive, this);
 
-        this.tabs_applets = $('ul.applets', this.$el);
-        this.tabs_msg = $('ul.channels', this.$el);
-
-        _kiwi.gateway.on('change:name', function (gateway, new_val) {
+        this.model.network.on('change:name', function (network, new_val) {
             $('span', this.model.server.tab).text(new_val);
         }, this);
+
+        this.$tab_container = $('#kiwi .panellist.channels');
+        this.$tab_container.append(this.$el);
     },
+
     render: function () {
         var that = this;
 
-        this.tabs_msg.empty();
+        this.$el.empty();
         
         // Add the server tab first
         this.model.server.tab
-            .data('panel_id', this.model.server.cid)
-            .appendTo(this.tabs_msg);
+            .data('panel', this.model.server)
+            .data('connection_id', this.model.network.get('connection_id'))
+            .appendTo(this.$el);
 
         // Go through each panel adding its tab
         this.model.forEach(function (panel) {
@@ -588,8 +720,9 @@ _kiwi.view.Tabs = Backbone.View.extend({
             if (panel == that.model.server) return;
 
             panel.tab
-                .data('panel_id', panel.cid)
-                .appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);
+                .data('panel', panel)
+                .appendTo(that.$el);
+                //.appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);
         });
 
         _kiwi.app.view.doLayout();
@@ -601,14 +734,17 @@ _kiwi.view.Tabs = Backbone.View.extend({
 
     panelAdded: function (panel) {
         // Add a tab to the panel
-        panel.tab = $('<li><span>' + (panel.get('title') || panel.get('name')) + '</span></li>');
+        panel.tab = $('<li><span>' + (panel.get('title') || panel.get('name')) + '</span><div class="activity"></div></li>');
 
         if (panel.isServer()) {
             panel.tab.addClass('server');
+            panel.tab.addClass('icon-nonexistant');
         }
 
-        panel.tab.data('panel_id', panel.cid)
-            .appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);
+        panel.tab.data('panel', panel)
+            .data('connection_id', this.model.network.get('connection_id'))
+            .appendTo(this.$el);
+            //.appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);
 
         panel.bind('change:title', this.updateTabTitle);
         _kiwi.app.view.doLayout();
@@ -620,24 +756,23 @@ _kiwi.view.Tabs = Backbone.View.extend({
         _kiwi.app.view.doLayout();
     },
 
-    panelActive: function (panel) {
+    panelActive: function (panel, previously_active_panel) {
         // Remove any existing tabs or part images
         $('.part', this.$el).remove();
-        this.tabs_applets.children().removeClass('active');
-        this.tabs_msg.children().removeClass('active');
+        this.$tab_container.find('.active').removeClass('active');
 
         panel.tab.addClass('active');
 
         // Only show the part image on non-server tabs
         if (!panel.isServer()) {
-            panel.tab.append('<span class="part"></span>');
+            panel.tab.append('<span class="part icon-nonexistant"></span>');
         }
     },
 
     tabClick: function (e) {
         var tab = $(e.currentTarget);
-
-        var panel = this.model.getByCid(tab.data('panel_id'));
+        
+        var panel = tab.data('panel');
         if (!panel) {
             // A panel wasn't found for this tab... wadda fuck
             return;
@@ -648,26 +783,26 @@ _kiwi.view.Tabs = Backbone.View.extend({
 
     partClick: function (e) {
         var tab = $(e.currentTarget).parent();
-        var panel = this.model.getByCid(tab.data('panel_id'));
+        var panel = this.model.getByCid(tab.data('panel'));
 
         // Only need to part if it's a channel
         // If the nicklist is empty, we haven't joined the channel as yet
         if (panel.isChannel() && panel.get('members').models.length > 0) {
-            _kiwi.gateway.part(panel.get('name'));
+            this.model.network.gateway.part(panel.get('name'));
         } else {
             panel.close();
         }
     },
 
     next: function () {
-        var next = _kiwi.app.panels.active.tab.next();
-        if (!next.length) next = $('li:first', this.tabs_msgs);
+        var next = this.$tab_container.find('.active').next();
+        if (!next.length) next = $('li:first', this.$tab_container);
 
         next.click();
     },
     prev: function () {
-        var prev = _kiwi.app.panels.active.tab.prev();
-        if (!prev.length) prev = $('li:last', this.tabs_msgs);
+        var prev = this.$tab_container.find('.active').prev();
+        if (!prev.length) prev = $('li:last', this.$tab_container);
 
         prev.click();
     }
@@ -742,6 +877,10 @@ _kiwi.view.ControlBox = Backbone.View.extend({
         _kiwi.gateway.bind('change:nick', function () {
             $('.nick', that.$el).text(this.get('nick'));
         });
+
+        _kiwi.app.connections.on('active', function(panel, connection) {
+            $('.nick', that.$el).text(connection.get('nick'));
+        });
     },
 
     showNickChange: function (ev) {
@@ -755,7 +894,7 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             meta;
 
         if (navigator.appVersion.indexOf("Mac") !== -1) {
-            meta = ev.ctrlKey;
+            meta = ev.metaKey;
         } else {
             meta = ev.altKey;
         }
@@ -799,11 +938,11 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             }
             break;
 
-        case (ev.keyCode === 37 && meta):            // left
+        case (ev.keyCode === 219 && meta):            // [ + meta
             _kiwi.app.panels.view.prev();
             return false;
 
-        case (ev.keyCode === 39 && meta):            // right
+        case (ev.keyCode === 221 && meta):            // ] + meta
             _kiwi.app.panels.view.next();
             return false;
 
@@ -827,12 +966,20 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             }
             
             (function () {
-                var tokens = inp_val.substring(0, inp[0].selectionStart).split(' '),
-                    val,
-                    p1,
-                    newnick,
-                    range,
-                    nick = tokens[tokens.length - 1];
+                var tokens,              // Words before the cursor position
+                    val,                 // New value being built up
+                    p1,                  // Position in the value just before the nick 
+                    newnick,             // New nick to be displayed (cycles through)
+                    range,               // TextRange for setting new text cursor position
+                    nick,                // Current nick in the value
+                    trailing = ': ';     // Text to be inserted after a tabbed nick
+
+                tokens = inp_val.substring(0, inp[0].selectionStart).split(' ');
+                if (tokens[tokens.length-1] == ':')
+                    tokens.pop();
+
+                nick  = tokens[tokens.length - 1];
+
                 if (this.tabcomplete.prefix === '') {
                     this.tabcomplete.prefix = nick;
                 }
@@ -842,21 +989,31 @@ _kiwi.view.ControlBox = Backbone.View.extend({
                 });
 
                 if (this.tabcomplete.data.length > 0) {
+                    // Get the current value before cursor position
                     p1 = inp[0].selectionStart - (nick.length);
                     val = inp_val.substr(0, p1);
+
+                    // Include the current selected nick
                     newnick = this.tabcomplete.data.shift();
                     this.tabcomplete.data.push(newnick);
                     val += newnick;
+
+                    if (inp_val.substr(inp[0].selectionStart, 2) !== trailing)
+                        val += trailing;
+
+                    // Now include the rest of the current value
                     val += inp_val.substr(inp[0].selectionStart);
+
                     inp.val(val);
 
+                    // Move the cursor position to the end of the nick
                     if (inp[0].setSelectionRange) {
-                        inp[0].setSelectionRange(p1 + newnick.length, p1 + newnick.length);
+                        inp[0].setSelectionRange(p1 + newnick.length + trailing.length, p1 + newnick.length + trailing.length);
                     } else if (inp[0].createTextRange) { // not sure if this bit is actually needed....
                         range = inp[0].createTextRange();
                         range.collapse(true);
-                        range.moveEnd('character', p1 + newnick.length);
-                        range.moveStart('character', p1 + newnick.length);
+                        range.moveEnd('character', p1 + newnick.length + trailing.length);
+                        range.moveStart('character', p1 + newnick.length + trailing.length);
                         range.select();
                     }
                 }
@@ -898,13 +1055,20 @@ _kiwi.view.ControlBox = Backbone.View.extend({
 
         // Trigger the command events
         this.trigger('command', {command: command, params: params});
-        this.trigger('command_' + command, {command: command, params: params});
+        this.trigger('command:' + command, {command: command, params: params});
 
         // If we didn't have any listeners for this event, fire a special case
         // TODO: This feels dirty. Should this really be done..?
-        if (!this._callbacks['command_' + command]) {
+        if (!this._callbacks['command:' + command]) {
             this.trigger('unknown_command', {command: command, params: params});
         }
+    },
+
+
+    addPluginIcon: function ($icon) {
+        var $tool = $('<div class="tool"></div>').append($icon);
+        this.$el.find('.input_tools').append($tool);
+        _kiwi.app.view.doLayout();
     }
 });
 
@@ -926,7 +1090,7 @@ _kiwi.view.StatusMessage = Backbone.View.extend({
         opt.timeout = opt.timeout || 5000;
 
         this.$el.text(text).attr('class', opt.type);
-        this.$el.slideDown(_kiwi.app.view.doLayout);
+        this.$el.slideDown($.proxy(_kiwi.app.view.doLayout, this));
 
         if (opt.timeout) this.doTimeout(opt.timeout);
     },
@@ -944,7 +1108,7 @@ _kiwi.view.StatusMessage = Backbone.View.extend({
     },
 
     hide: function () {
-        this.$el.slideUp(_kiwi.app.view.doLayout);
+        this.$el.slideUp($.proxy(_kiwi.app.view.doLayout, this));
     },
 
     doTimeout: function (length) {
@@ -1006,14 +1170,22 @@ _kiwi.view.AppToolbar = Backbone.View.extend({
 
 _kiwi.view.Application = Backbone.View.extend({
     initialize: function () {
-        $(window).resize(this.doLayout);
-        $('#toolbar').resize(this.doLayout);
-        $('#controlbox').resize(this.doLayout);
+        var that = this;
+
+        $(window).resize(function() { that.doLayout.apply(that); });
+        $('#toolbar').resize(function() { that.doLayout.apply(that); });
+        $('#controlbox').resize(function() { that.doLayout.apply(that); });
 
         // Change the theme when the config is changed
         _kiwi.global.settings.on('change:theme', this.updateTheme, this);
         this.updateTheme(getQueryVariable('theme'));
 
+        _kiwi.global.settings.on('change:channel_list_style', this.setTabLayout, this);
+        this.setTabLayout(_kiwi.global.settings.get('channel_list_style'));
+
+        _kiwi.global.settings.on('change:show_timestamps', this.displayTimestamps, this);
+        this.displayTimestamps(_kiwi.global.settings.get('show_timestamps'));
+
         this.doLayout();
 
         $(document).keydown(this.setKeyFocus);
@@ -1024,6 +1196,8 @@ _kiwi.view.Application = Backbone.View.extend({
                 return 'This will close all KiwiIRC conversations. Are you sure you want to close this window?';
             }
         };
+
+        this.initSound();
     },
 
 
@@ -1047,6 +1221,36 @@ _kiwi.view.Application = Backbone.View.extend({
     },
 
 
+    setTabLayout: function (layout_style) {
+        // If called by the settings callback, get the correct new_value
+        if (layout_style === _kiwi.global.settings) {
+            layout_style = arguments[1];
+        }
+        
+        if (layout_style == 'list') {
+            this.$el.addClass('chanlist_treeview');
+        } else {
+            this.$el.removeClass('chanlist_treeview');
+        }
+        
+        this.doLayout();
+    },
+
+
+    displayTimestamps: function (show_timestamps) {
+        // If called by the settings callback, get the correct new_value
+        if (show_timestamps === _kiwi.global.settings) {
+            show_timestamps = arguments[1];
+        }
+
+        if (show_timestamps) {
+            this.$el.addClass('timestamps');
+        } else {
+            this.$el.removeClass('timestamps');
+        }
+    },
+
+
     // Globally shift focus to the command input box on a keypress
     setKeyFocus: function (ev) {
         // If we're copying text, don't shift focus
@@ -1055,7 +1259,7 @@ _kiwi.view.Application = Backbone.View.extend({
         }
 
         // If we're typing into an input box somewhere, ignore
-        if ((ev.target.tagName.toLowerCase() === 'input') || $(ev.target).attr('contenteditable')) {
+        if ((ev.target.tagName.toLowerCase() === 'input') || (ev.target.tagName.toLowerCase() === 'textarea') || $(ev.target).attr('contenteditable')) {
             return;
         }
 
@@ -1064,12 +1268,12 @@ _kiwi.view.Application = Backbone.View.extend({
 
 
     doLayout: function () {
-        var el_kiwi = $('#kiwi');
-        var el_panels = $('#panels');
-        var el_memberlists = $('#memberlists');
-        var el_toolbar = $('#toolbar');
-        var el_controlbox = $('#controlbox');
-        var el_resize_handle = $('#memberlists_resize_handle');
+        var el_kiwi = this.$el;
+        var el_panels = $('#kiwi #panels');
+        var el_memberlists = $('#kiwi #memberlists');
+        var el_toolbar = $('#kiwi #toolbar');
+        var el_controlbox = $('#kiwi #controlbox');
+        var el_resize_handle = $('#kiwi #memberlists_resize_handle');
 
         var css_heights = {
             top: el_toolbar.outerHeight(true),
@@ -1091,6 +1295,11 @@ _kiwi.view.Application = Backbone.View.extend({
         el_memberlists.css(css_heights);
         el_resize_handle.css(css_heights);
 
+        // If we have channel tabs on the side, adjust the height
+        if (el_kiwi.hasClass('chanlist_treeview')) {
+            $('#tabs', el_kiwi).css(css_heights);
+        }
+
         // Determine if we have a narrow window (mobile/tablet/or even small desktop window)
         if (el_kiwi.outerWidth() < 400) {
             el_kiwi.addClass('narrow');
@@ -1110,6 +1319,9 @@ _kiwi.view.Application = Backbone.View.extend({
             // And move the handle just out of sight to the right
             el_resize_handle.css('left', el_panels.outerWidth(true));
         }
+
+        var input_wrap_width = parseInt($('#kiwi #controlbox .input_tools').outerWidth());
+        el_controlbox.find('.input_wrap').css('right', input_wrap_width + 7);
     },
 
 
@@ -1188,8 +1400,8 @@ _kiwi.view.Application = Backbone.View.extend({
         var that = this;
 
         if (!instant) {
-            $('#toolbar').slideUp({queue: false, duration: 400, step: this.doLayout});
-            $('#controlbox').slideUp({queue: false, duration: 400, step: this.doLayout});
+            $('#toolbar').slideUp({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});
+            $('#controlbox').slideUp({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});
         } else {
             $('#toolbar').slideUp(0);
             $('#controlbox').slideUp(0);
@@ -1201,13 +1413,47 @@ _kiwi.view.Application = Backbone.View.extend({
         var that = this;
 
         if (!instant) {
-            $('#toolbar').slideDown({queue: false, duration: 400, step: this.doLayout});
-            $('#controlbox').slideDown({queue: false, duration: 400, step: this.doLayout});
+            $('#toolbar').slideDown({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});
+            $('#controlbox').slideDown({queue: false, duration: 400, step: $.proxy(this.doLayout, this)});
         } else {
             $('#toolbar').slideDown(0);
             $('#controlbox').slideDown(0);
             this.doLayout();
         }
+    },
+
+
+    initSound: function () {
+        var that = this,
+            base_path = this.model.get('base_path');
+
+        $script(base_path + '/assets/libs/soundmanager2/soundmanager2-nodebug-jsmin.js', function() {
+            if (typeof soundManager === 'undefined')
+                return;
+
+            soundManager.setup({
+                url: base_path + '/assets/libs/soundmanager2/',
+                flashVersion: 9, // optional: shiny features (default = 8)// optional: ignore Flash where possible, use 100% HTML5 mode
+                preferFlash: true,
+
+                onready: function() {
+                    that.sound_object = soundManager.createSound({
+                        id: 'highlight',
+                        url: base_path + '/assets/sound/highlight.mp3'
+                    });
+                }
+            });
+        });
+    },
+
+
+    playSound: function (sound_id) {
+        if (!this.sound_object) return;
+
+        if (_kiwi.global.settings.get('mute_sounds'))
+            return;
+        
+        soundManager.play(sound_id);
     }
 });
 
@@ -1338,4 +1584,96 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
 
         return html;
     }
-});
\ No newline at end of file
+});
+
+
+
+_kiwi.view.MenuBox = Backbone.View.extend({
+    events: {
+        'click .ui_menu_foot .close': 'dispose'
+    },
+
+    initialize: function(title) {
+        var that = this;
+
+        this.$el = $('<div class="ui_menu"></div>');
+
+        this._title = title || '';
+        this._items = {};
+        this._display_footer = true;
+
+        this._close_proxy = function(event) {
+            that.onDocumentClick(event);
+        };
+        $(document).on('click', this._close_proxy);
+    },
+
+
+    render: function() {
+        var that = this;
+
+        this.$el.find('*').remove();
+
+        if (this._title) {
+            $('<div class="ui_menu_title"></div>')
+                .text(this._title)
+                .appendTo(this.$el);
+        }
+
+
+        _.each(this._items, function(item) {
+            var $item = $('<div class="ui_menu_content hover"></div>')
+                .append(item);
+
+            that.$el.append($item);
+        });
+
+        if (this._display_footer)
+            this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>');
+    },
+
+
+    onDocumentClick: function(event) {
+        var $target = $(event.target);
+
+        // If this is not itself AND we don't contain this element, dispose $el
+        if ($target[0] != this.$el[0] && this.$el.has($target).length === 0)
+            this.dispose();
+    },
+
+
+    dispose: function() {
+        _.each(this._items, function(item) {
+            item.dispose && item.dispose();
+            item.remove && item.remove();
+        });
+
+        this._items = null;
+        this.remove();
+
+        $(document).off('click', this._close_proxy);
+    },
+
+
+    addItem: function(item_name, $item) {
+        $item = $($item);
+        if ($item.is('a')) $item.addClass('icon-chevron-right');
+        this._items[item_name] = $item;
+    },
+
+
+    removeItem: function(item_name) {
+        delete this._items[item_name];
+    },
+
+
+    showFooter: function(show) {
+        this._show_footer = show;
+    },
+
+
+    show: function() {
+        this.render();
+        this.$el.appendTo(_kiwi.app.view.$el);
+    }
+});