X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=client%2Fassets%2Fdev%2Fview.js;h=4fc6f9e7bb563a9909e0dd82321528c1c57b1aa5;hb=4047ee2b284dae06697403938d8906a0fe49fb55;hp=cb67ad081d716ea75aff42640439a53a8f32ff5a;hpb=43ad0845b7663325807aa8c5935585c1d2f98a69;p=KiwiIRC.git

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index cb67ad0..4fc6f9e 100644
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -14,19 +14,54 @@ _kiwi.view.MemberList = Backbone.View.extend({
         var $this = $(this.el);
         $this.empty();
         this.model.forEach(function (member) {
-            $('<li><a class="nick"><span class="prefix">' + member.get("prefix") + '</span>' + member.get("nick") + '</a></li>')
+            var prefix_css_class = (member.get('modes') || []).join(' ');
+            $('<li class="mode ' + prefix_css_class + '"><a class="nick"><span class="prefix">' + member.get("prefix") + '</span>' + member.get("nick") + '</a></li>')
                 .appendTo($this)
                 .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.app.connections.active_connection.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');
@@ -40,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 () {
@@ -49,7 +90,7 @@ _kiwi.view.UserBox = Backbone.View.extend({
 
     queryClick: function (event) {
         var panel = new _kiwi.model.Query({name: this.member.get('nick')});
-        _kiwi.app.panels.add(panel);
+        _kiwi.app.connections.active_connection.panels.add(panel);
         panel.view.show();
     },
 
@@ -59,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') + '!*');
     }
 });
 
@@ -87,7 +154,10 @@ _kiwi.view.NickChangeBox = Backbone.View.extend({
 
     changeNick: function (event) {
         var that = this;
-        _kiwi.gateway.changeNick(this.$el.find('input').val(), function (err, val) {
+
+        event.preventDefault();
+
+        _kiwi.app.connections.active_connection.gateway.changeNick(this.$el.find('input').val(), function (err, val) {
             that.close();
         });
         return false;
@@ -101,10 +171,13 @@ _kiwi.view.ServerSelect = function () {
     var model = Backbone.View.extend({
         events: {
             'submit form': 'submitForm',
-            'click .show_more': 'showMore'
+            'click .show_more': 'showMore',
+            'change .have_pass input': 'showPass'
         },
 
         initialize: function () {
+            var that = this;
+
             this.$el = $($('#tmpl_server_select').html());
 
             // Remove the 'more' link if the server has disabled server changing
@@ -115,21 +188,29 @@ _kiwi.view.ServerSelect = function () {
                 }
             }
 
-
             _kiwi.gateway.bind('onconnect', this.networkConnected, this);
             _kiwi.gateway.bind('connecting', this.networkConnecting, this);
+            _kiwi.gateway.bind('onirc_error', this.onIrcError, this);
+        },
 
-            _kiwi.gateway.bind('onirc_error', function (data) {
-                $('button', this.$el).attr('disabled', null);
+        dispose: function() {
+            _kiwi.gateway.off('onconnect', this.networkConnected, this);
+            _kiwi.gateway.off('connecting', this.networkConnecting, this);
+            _kiwi.gateway.off('onirc_error', this.onIrcError, this);
 
-                if (data.error == 'nickname_in_use') {
-                    this.setStatus('Nickname already taken');
-                    this.show('nick_change');
-                }
-            }, this);
+            this.$el.remove();
         },
 
         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 {
@@ -137,34 +218,42 @@ _kiwi.view.ServerSelect = function () {
             }
 
             $('button', this.$el).attr('disabled', 1);
-            return false;
+            return;
         },
 
         submitLogin: function (event) {
             // If submitting is disabled, don't do anything
             if ($('button', this.$el).attr('disabled')) return;
-            
+
             var values = {
-                nick: $('.nick', this.$el).val(),
-                server: $('.server', this.$el).val(),
-                port: $('.port', this.$el).val(),
-                ssl: $('.ssl', this.$el).prop('checked'),
-                password: $('.password', this.$el).val(),
-                channel: $('.channel', this.$el).val(),
-                channel_key: $('.channel_key', this.$el).val()
+                nick: $('input.nick', this.$el).val(),
+                server: $('input.server', this.$el).val(),
+                port: $('input.port', this.$el).val(),
+                ssl: $('input.ssl', this.$el).prop('checked'),
+                password: $('input.password', this.$el).val(),
+                channel: $('input.channel', this.$el).val(),
+                channel_key: $('input.channel_key', this.$el).val()
             };
 
             this.trigger('server_connect', values);
         },
 
         submitNickChange: function (event) {
-            _kiwi.gateway.changeNick($('.nick', this.$el).val());
+            _kiwi.gateway.changeNick($('input.nick', this.$el).val());
             this.networkConnecting();
         },
 
+        showPass: function (event) {
+            if (this.$el.find('tr.have_pass input').is(':checked')) {
+                this.$el.find('tr.pass').show().find('input').focus();
+            } else {
+                this.$el.find('tr.pass').hide().find('input').val('');
+            }
+        },
+
         showMore: function (event) {
             $('.more', this.$el).slideDown('fast');
-            $('.server', this.$el).select();
+            $('input.server', this.$el).select();
         },
 
         populateFields: function (defaults) {
@@ -180,13 +269,13 @@ _kiwi.view.ServerSelect = function () {
             channel = defaults.channel || '';
             channel_key = defaults.channel_key || '';
 
-            $('.nick', this.$el).val(nick);
-            $('.server', this.$el).val(server);
-            $('.port', this.$el).val(port);
-            $('.ssl', this.$el).prop('checked', ssl);
-            $('.password', this.$el).val(password);
-            $('.channel', this.$el).val(channel);
-            $('.channel_key', this.$el).val(channel_key);
+            $('input.nick', this.$el).val(nick);
+            $('input.server', this.$el).val(server);
+            $('input.port', this.$el).val(port);
+            $('input.ssl', this.$el).prop('checked', ssl);
+            $('input.password', this.$el).val(password);
+            $('input.channel', this.$el).val(channel);
+            $('input.channel_key', this.$el).val(channel_key);
         },
 
         hide: function () {
@@ -207,6 +296,7 @@ _kiwi.view.ServerSelect = function () {
             } else if (new_state === 'nick_change') {
                 $('.more', this.$el).hide();
                 $('.show_more', this.$el).hide();
+                $('input.nick', this.$el).select();
             }
 
             state = new_state;
@@ -216,7 +306,7 @@ _kiwi.view.ServerSelect = function () {
             $('.status', this.$el)
                 .text(text)
                 .attr('class', 'status')
-                .addClass(class_name)
+                .addClass(class_name||'')
                 .show();
         },
         clearStatus: function () {
@@ -232,6 +322,21 @@ _kiwi.view.ServerSelect = function () {
             this.setStatus('Connecting..', 'ok');
         },
 
+        onIrcError: function (data) {
+            $('button', this.$el).attr('disabled', null);
+
+            if (data.error == 'nickname_in_use') {
+                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();
+            }
+        },
+
         showError: function (event) {
             this.setStatus('Error connecting', 'error');
             $('button', this.$el).attr('disabled', null);
@@ -246,9 +351,11 @@ _kiwi.view.ServerSelect = function () {
 
 _kiwi.view.Panel = Backbone.View.extend({
     tagName: "div",
-    className: "messages",
+    className: "panel messages",
+
     events: {
         "click .chan": "chanClick",
+        'click .media .open': 'mediaClick',
         'mouseenter .msg .nick': 'msgEnter',
         'mouseleave .msg .nick': 'msgLeave'
     },
@@ -279,16 +386,20 @@ _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 = '';
 
         // Nick highlight detecting
-        if ((new RegExp('\\b' + _kiwi.gateway.get('nick') + '\\b', 'i')).test(msg.msg)) {
+        if ((new RegExp('\\b' + _kiwi.app.connections.active_connection.get('nick') + '\\b', 'i')).test(msg.msg)) {
             is_highlight = true;
             msg_css_classes += ' highlight';
         }
@@ -297,27 +408,32 @@ _kiwi.view.Panel = Backbone.View.extend({
         msg.msg =  $('<div />').text(msg.msg).html();
 
         // Make the channels clickable
-        re = new RegExp('\\B([' + _kiwi.gateway.get('channel_prefix') + '][^ ,.\\007]+)', 'g');
+        re = new RegExp('(?:^|\\s)([' + _kiwi.gateway.get('channel_prefix') + '][^ ,.\\007]+)', 'g');
         msg.msg = msg.msg.replace(re, function (match) {
-            return '<a class="chan">' + match + '</a>';
+            return '<a class="chan" data-channel="' + match.trim() + '">' + match + '</a>';
         });
 
 
-        // Make links clickable
-        msg.msg = msg.msg.replace(/((https?\:\/\/|ftp\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]*))?/gi, function (url) {
-            var nice;
+        // Parse any links found
+        msg.msg = msg.msg.replace(/(([A-Za-z0-9\-]+\:\/\/)|(www\.))([\w.\-]+)([a-zA-Z]{2,6})(:[0-9]+)?(\/[\w#!:.?$'()[\]*,;~+=&%@!\-\/]*)?/gi, function (url) {
+            var nice = url,
+                extra_html = '';
 
-            // Add the http is no protoocol was found
+            // Add the http if no protoocol was found
             if (url.match(/^www\./)) {
                 url = 'http://' + url;
             }
 
-            nice = url;
+            // Shorten the displayed URL if it's going to be too long
             if (nice.length > 100) {
                 nice = nice.substr(0, 100) + '...';
             }
 
-            return '<a class="link_ext" target="_blank" rel="nofollow" href="' + url + '">' + nice + '</a>';
+            // Get any media HTML if supported
+            extra_html = _kiwi.view.MediaMessage.buildHtml(url);
+
+            // Make the link clickable
+            return '<a class="link_ext" target="_blank" rel="nofollow" href="' + url + '">' + nice + '</a> ' + extra_html;
         });
 
 
@@ -355,9 +471,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()) {
@@ -366,6 +485,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)
@@ -377,13 +515,30 @@ _kiwi.view.Panel = Backbone.View.extend({
     },
     chanClick: function (event) {
         if (event.target) {
-            _kiwi.gateway.join($(event.target).text());
+            _kiwi.gateway.join($(event.target).data('channel'));
         } else {
             // IE...
-            _kiwi.gateway.join($(event.srcElement).text());
+            _kiwi.gateway.join($(event.srcElement).data('channel'));
+        }
+    },
+
+    mediaClick: function (event) {
+        var $media = $(event.target).parents('.media');
+        var media_message;
+
+        if ($media.data('media')) {
+            media_message = $media.data('media');
+        } else {
+            media_message = new _kiwi.view.MediaMessage({el: $media[0]});
+            $media.data('media', media_message);
         }
+
+        $media.data('media', media_message);
+
+        media_message.open();
     },
 
+    // Cursor hovers over a message
     msgEnter: function (event) {
         var nick_class;
 
@@ -400,6 +555,7 @@ _kiwi.view.Panel = Backbone.View.extend({
         $('.'+nick_class).addClass('global_nick_highlight');
     },
 
+    // Cursor leaves message
     msgLeave: function (event) {
         var nick_class;
 
@@ -420,24 +576,27 @@ _kiwi.view.Panel = Backbone.View.extend({
         var $this = this.$el;
 
         // Hide all other panels and show this one
-        this.$container.children().css('display', 'none');
+        this.$container.children('.panel').css('display', 'none');
         $this.css('display', 'block');
 
         // Show this panels memberlist
         var members = this.model.get("members");
         if (members) {
-            $('#memberlists').show();
+            $('#memberlists').removeClass('disabled');
             members.view.show();
         } else {
             // Memberlist not found for this panel, hide any active ones
-            $('#memberlists').hide().children().removeClass('active');
+            $('#memberlists').addClass('disabled').children().removeClass('active');
         }
 
-        _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');
+
+        _kiwi.app.panels.trigger('active', this.model, _kiwi.app.panels().active);
+        this.model.trigger('active', this.model);
 
-        this.trigger('active', this.model);
-        _kiwi.app.panels.trigger('active', this.model);
+        _kiwi.app.view.doLayout();
 
         this.scrollToBottom(true);
     },
@@ -445,7 +604,7 @@ _kiwi.view.Panel = Backbone.View.extend({
 
     alert: function (level) {
         // No need to highlight if this si the active panel
-        if (this.model == _kiwi.app.panels.active) return;
+        if (this.model == _kiwi.app.panels().active) return;
 
         var types, type_idx;
         types = ['none', 'action', 'activity', 'highlight'];
@@ -482,7 +641,7 @@ _kiwi.view.Panel = Backbone.View.extend({
     // Scroll to the bottom of the panel
     scrollToBottom: function (force_down) {
         // If this isn't the active panel, don't scroll
-        if (this.model !== _kiwi.app.panels.active) return;
+        if (this.model !== _kiwi.app.panels().active) return;
 
         // Don't scroll down if we're scrolled up the panel a little
         if (force_down || this.$container.scrollTop() + this.$container.height() > this.$el.outerHeight() - 150) {
@@ -502,24 +661,70 @@ _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) {
         if (typeof topic !== 'string' || !topic) {
             topic = this.model.get("topic");
         }
-        
+
         this.model.addMsg('', '== Topic for ' + this.model.get('name') + ' is: ' + topic, 'topic');
 
         // If this is the active channel then update the topic bar
-        if (_kiwi.app.panels.active === this) {
+        if (_kiwi.app.panels().active === this) {
             _kiwi.app.topicbar.setCurrentTopic(this.model.get("topic"));
         }
     }
 });
 
+
+
+// Model for this = _kiwi.model.NetworkPanelList
+_kiwi.view.NetworkTabs = Backbone.View.extend({
+    tagName: 'ul',
+    className: 'connections',
+
+    initialize: function() {
+        this.model.on('add', this.networkAdded, this);
+        this.model.on('remove', this.networkRemoved, this);
+
+        this.$el.appendTo($('#kiwi #tabs'));
+    },
+
+    networkAdded: function(network) {
+        $('<li class="connection"></li>')
+            .append(network.panels.view.$el)
+            .appendTo(this.$el);
+    },
+
+    networkRemoved: function(network) {
+        network.panels.view.remove();
+
+        _kiwi.app.view.doLayout();
+    }
+});
+
+
+
 // Model for this = _kiwi.model.PanelList
 _kiwi.view.Tabs = Backbone.View.extend({
+    tagName: 'ul',
+    className: 'panellist',
+
     events: {
         'click li': 'tabClick',
         'click li .part': 'partClick'
@@ -532,31 +737,43 @@ _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);
+        // Network tabs start with a server, so determine what we are now
+        this.is_network = false;
 
-        _kiwi.gateway.on('change:name', function (gateway, new_val) {
-            $('span', this.model.server.tab).text(new_val);
-        }, this);
+        if (this.model.network) {
+            this.is_network = true;
+
+            this.model.network.on('change:name', function (network, new_val) {
+                $('span', this.model.server.tab).text(new_val);
+            }, this);
+        }
     },
+
     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);
+        if (this.is_network) {
+            // Add the server tab first
+            this.model.server.tab
+                .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) {
             // If this is the server panel, ignore as it's already added
-            if (panel == that.model.server) return;
+            if (this.is_network && panel == that.model.server)
+                return;
+
+            panel.tab.data('panel', panel);
+
+            if (this.is_network)
+                panel.tab.data('connection_id', this.model.network.get('connection_id'));
 
-            panel.tab
-                .data('panel_id', panel.cid)
-                .appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);
+            panel.tab.appendTo(that.$el);
         });
 
         _kiwi.app.view.doLayout();
@@ -568,14 +785,19 @@ _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);
+
+        if (this.is_network)
+            panel.tab.data('connection_id', this.model.network.get('connection_id'));
+
+        panel.tab.appendTo(this.$el);
 
         panel.bind('change:title', this.updateTabTitle);
         _kiwi.app.view.doLayout();
@@ -587,24 +809,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');
+        _kiwi.app.view.$el.find('.panellist .part').remove();
+        _kiwi.app.view.$el.find('.panellist .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;
@@ -615,26 +836,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();
     }
@@ -667,13 +888,13 @@ _kiwi.view.TopicBar = Backbone.View.extend({
             inp_val = inp.text();
         
         // Only allow topic editing if this is a channel panel
-        if (!_kiwi.app.panels.active.isChannel()) {
+        if (!_kiwi.app.panels().active.isChannel()) {
             return false;
         }
 
         // If hit return key, update the current topic
         if (ev.keyCode === 13) {
-            _kiwi.gateway.topic(_kiwi.app.panels.active.get('name'), inp_val);
+            _kiwi.gateway.topic(_kiwi.app.panels().active.get('name'), inp_val);
             return false;
         }
     },
@@ -706,8 +927,18 @@ _kiwi.view.ControlBox = Backbone.View.extend({
         // Hold tab autocomplete data
         this.tabcomplete = {active: false, data: [], prefix: ''};
 
-        _kiwi.gateway.bind('change:nick', function () {
-            $('.nick', that.$el).text(this.get('nick'));
+        // Keep the nick view updated with nick changes
+        _kiwi.app.connections.on('change:nick', function(connection) {
+            // Only update the nick view if it's the active connection
+            if (connection !== _kiwi.app.connections.active_connection)
+                return;
+
+            $('.nick', that.$el).text(connection.get('nick'));
+        });
+
+        // Update our nick view as we flick between connections
+        _kiwi.app.connections.on('active', function(panel, connection) {
+            $('.nick', that.$el).text(connection.get('nick'));
         });
     },
 
@@ -722,7 +953,7 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             meta;
 
         if (navigator.appVersion.indexOf("Mac") !== -1) {
-            meta = ev.ctrlKey;
+            meta = ev.metaKey;
         } else {
             meta = ev.altKey;
         }
@@ -766,11 +997,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;
 
@@ -778,11 +1009,19 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             this.tabcomplete.active = true;
             if (_.isEqual(this.tabcomplete.data, [])) {
                 // Get possible autocompletions
-                var ac_data = [];
-                $.each(_kiwi.app.panels.active.get('members').models, function (i, member) {
+                var ac_data = [],
+                    members = _kiwi.app.panels().active.get('members');
+
+                // If we have a members list, get the models. Otherwise empty array
+                members = members ? members.models : [];
+
+                $.each(members, function (i, member) {
                     if (!member) return;
                     ac_data.push(member.get('nick'));
                 });
+
+                ac_data.push(_kiwi.app.panels().active.get('name'));
+
                 ac_data = _.sortBy(ac_data, function (nick) {
                     return nick;
                 });
@@ -794,12 +1033,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;
                 }
@@ -809,21 +1056,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();
                     }
                 }
@@ -843,12 +1100,12 @@ _kiwi.view.ControlBox = Backbone.View.extend({
             command_raw = command_raw.replace(/^\/\//, '/');
 
             // Prepend the default command
-            command_raw = '/msg ' + _kiwi.app.panels.active.get('name') + ' ' + command_raw;
+            command_raw = '/msg ' + _kiwi.app.panels().active.get('name') + ' ' + command_raw;
         }
 
         // Process the raw command for any aliases
-        this.preprocessor.vars.server = _kiwi.gateway.get('name');
-        this.preprocessor.vars.channel = _kiwi.app.panels.active.get('name');
+        this.preprocessor.vars.server = _kiwi.app.connections.active_connection.get('name');
+        this.preprocessor.vars.channel = _kiwi.app.panels().active.get('name');
         this.preprocessor.vars.destination = this.preprocessor.vars.channel;
         command_raw = this.preprocessor.process(command_raw);
 
@@ -860,18 +1117,25 @@ _kiwi.view.ControlBox = Backbone.View.extend({
         } else {
             // Default command
             command = 'msg';
-            params.unshift(_kiwi.app.panels.active.get('name'));
+            params.unshift(_kiwi.app.panels().active.get('name'));
         }
 
         // 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();
     }
 });
 
@@ -893,7 +1157,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);
     },
@@ -911,7 +1175,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) {
@@ -973,14 +1237,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);
@@ -991,6 +1263,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();
     },
 
 
@@ -1014,6 +1288,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
@@ -1022,7 +1326,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;
         }
 
@@ -1031,11 +1335,12 @@ _kiwi.view.Application = Backbone.View.extend({
 
 
     doLayout: function () {
-        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),
@@ -1057,16 +1362,33 @@ _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');
+        } else {
+            el_kiwi.removeClass('narrow');
+        }
+
         // Set the panels width depending on the memberlist visibility
         if (el_memberlists.css('display') != 'none') {
-            // Handle + panels to the side of the memberlist
-            el_panels.css('right', el_memberlists.outerWidth(true) + el_resize_handle.outerWidth(true));
-            el_resize_handle.css('left', el_memberlists.position().left - el_resize_handle.outerWidth(true));
+            // Panels to the side of the memberlist
+            el_panels.css('right', el_memberlists.outerWidth(true));
+            // The resize handle sits overlapping the panels and memberlist
+            el_resize_handle.css('left', el_memberlists.position().left - (el_resize_handle.outerWidth(true) / 2));
         } else {
-            // Memberlist is hidden so handle + panels to the right edge
-            el_panels.css('right', el_resize_handle.outerWidth(true));
+            // Memberlist is hidden so panels to the right edge
+            el_panels.css('right', 0);
+            // 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);
     },
 
 
@@ -1145,8 +1467,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);
@@ -1158,12 +1480,276 @@ _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);
     }
-});
\ No newline at end of file
+});
+
+
+
+
+
+
+
+
+
+_kiwi.view.MediaMessage = Backbone.View.extend({
+    events: {
+        'click .media_close': 'close'
+    },
+
+    initialize: function () {
+        // Get the URL from the data
+        this.url = this.$el.data('url');
+    },
+
+    // Close the media content and remove it from display
+    close: function () {
+        var that = this;
+        this.$content.slideUp('fast', function () {
+            that.$content.remove();
+        });
+    },
+
+    // Open the media content within its wrapper
+    open: function () {
+        // Create the content div if we haven't already
+        if (!this.$content) {
+            this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> Close media</a><br /><div class="content"></div></div>');
+            this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) || 'Not found :(');
+        }
+
+        // Now show the content if not already
+        if (!this.$content.is(':visible')) {
+            // Hide it first so the slideDown always plays
+            this.$content.hide();
+
+            // Add the media content and slide it into view
+            this.$el.append(this.$content);
+            this.$content.slideDown();
+        }
+    },
+
+
+
+    // Generate the media content for each recognised type
+    mediaTypes: {
+        twitter: function () {
+            var tweet_id = this.$el.data('tweetid');
+            var that = this;
+
+            $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
+                that.$content.find('.content').html(data.html);
+            });
+
+            return $('<div>Loading tweet..</div>');
+        },
+
+
+        image: function () {
+            return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
+        },
+
+
+        reddit: function () {
+            var that = this;
+            var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);
+
+            $.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {
+                console.log('Loaded reddit data', data);
+                var post = data[0].data.children[0].data;
+                var thumb = '';
+
+                // Show a thumbnail if there is one
+                if (post.thumbnail) {
+                    //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
+
+                    // Hide the thumbnail if an over_18 image
+                    if (post.over_18) {
+                        thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
+                        thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
+                        thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';
+                        thumb += '</span>';
+                    } else {
+                        thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
+                    }
+                }
+
+                // Build the template string up
+                var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';
+                tmpl += '<i class="icon-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <i class="icon-arrow-down"></i> <%- downs %><br />';
+                tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
+
+                that.$content.find('.content').html(_.template(tmpl, post));
+            });
+
+            return $('<div>Loading Reddit thread..</div>');
+        }
+    }
+
+}, {
+
+    // Build the closed media HTML from a URL
+    buildHtml: function (url) {
+        var html = '', matches;
+
+        // Is it an image?
+        if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
+            html += '<span class="media image" data-type="image" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
+        }
+
+        // Is it a tweet?
+        matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);
+        if (matches) {
+            html += '<span class="media twitter" data-type="twitter" data-url="' + url + '" data-tweetid="' + matches[2] + '" title="Show tweet information"><a class="open"><i class="icon-chevron-right"></i></a></span>';
+        }
+
+        // Is reddit?
+        matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
+        if (matches) {
+            html += '<span class="media reddit" data-type="reddit" data-url="' + url + '" title="Reddit thread"><a class="open"><i class="icon-chevron-right"></i></a></span>';
+        }
+
+        return html;
+    }
+});
+
+
+
+_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_on_blur = 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._close_on_blur)
+            return;
+
+        // 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._display_footer = show;
+    },
+
+
+    closeOnBlur: function(close_it) {
+        this._close_on_blur = close_it;
+    },
+
+
+    show: function() {
+        this.render();
+        this.$el.appendTo(_kiwi.app.view.$el);
+    }
+});