$(function() { var socket = io.connect(""); $.each(["networks", "channels", "messages", "users"], function(i, type) { socket.on(type, function(json) { event(type, json); }); }); var chat = $("#chat"); var sidebar = $("#sidebar"); var tpl = []; function render(id, json) { tpl[id] = tpl[id] || Handlebars.compile($(id).html()); return tpl[id](json); } function event(type, json) { switch (type) { case "networks": var html = ""; json.forEach(function(network) { html += render("#window", network); }); $("#windows")[0].innerHTML = html; sidebar.find("#list").html( render("#network", {networks: json}) ).find(".channel") .first() .addClass("active"); chat.find(".messages").scrollGlue({animate: 400}).scrollToBottom(); chat.find(".window") .first() .bringToTop(); break; case "channels": var target = json.target; if (json.action == "remove") { $("[data-id='" + json.data.id + "']").remove(); return; } var network = sidebar .find(".network") .find(".channel") .removeClass("active") .end(); network = network.filter("[data-id='" + json.target + "']").append( render("#channel", {channels: json.data}) ).find(".channel") .last() .addClass("active"); $("#windows").append( render("#window", {channels: json.data}) ).find(".window") .last() .bringToTop() .find(".messages") .scrollGlue({animate: 400}); break; case "users": var target; if (typeof json.target !== "undefined") { target = chat.find(".window[data-id='" + json.target + "']"); } target = target.find(".users"); target.html(render("#user", {users: json.data})); break; case "messages": var target; if (typeof json.target !== "undefined") { target = chat.find(".window[data-id='" + json.target + "']"); } var message = json.data; if (message.type == "error") { target = target.parent().find(".active"); } target = target.find(".messages"); target.append(render("#message", {messages: message})); break; } } sidebar.on("click", ".channel", function(e) { e.preventDefault(); sidebar.find("#list .active").removeClass("active"); $("#viewport").removeClass(); var item = $(this) .addClass("active") .find(".badge") .html("") .end(); var id = item.data("id"); chat.find(".window[data-id='" + id + "']") .bringToTop(); }); sidebar.find("input[type=checkbox]").each(function() { var input = $(this); var value = input.val(); var checked = true; if (($.cookie("hidden") || []).indexOf(value) !== -1) { checked = false; } input.prop("checked", checked) .wrap("