MeLight client

var socket;
var my_id;
var nickname;
$(function() {
    nickname = $.browser.mozilla ? 'FireFox' : ($.browser.webkit ? 'Chrome' : 'Opera');
    var host = window.location.origin;
    console.log(host);
    socket = io.connect(host);

    socket.emit('init_connect', {nickname : nickname});

    socket.on('my_id', function(data) {
        my_id = data.my_id;
    });

    socket.on('clients', function(data) {
        var str = '';
        for(var i in data.clients) {
            str += '<div id="'+data.clients[i].id+'" onclick="clickOnUser(this)" class="user">'+data.clients[i].nickname+'</div>';
        }
        str += userMenu();
        $('#users_cont').html(str);
    });

    socket.on('client left', function(data) {
        $('#users_cont #'+data.id).remove();
    });
    socket.on('client joined', function(data) {
        $('#users_cont').append('<div id="'+data.id+'" onclick="clickOnUser(this)" class="user">'+data.nickname+'</div>');
    });

    socket.on('msg', function (data) {
        $('#chat_window').append((data.id == my_id ? '<b>Me</b>' : data.nickname)+ ': '+data.str+'<br/>');
        $("#chat_window").animate({ scrollTop: $("#chat_window").height() }, 100);
    });

    socket.on('private msg', function (data) {
        $('#chat_window').append('<span class="private_from"><b>'+data.sender_nick+'</b>: '+data.msg+'</span><br/>');
        $("#chat_window").animate({ scrollTop: $("#chat_window").height() }, 100);
    });

    //Server sends request from another client to join a double room
    socket.on('ask double room', function(data) {
        var reply = confirm('Player '+data.sender_nick +' invites you to join a double room');
        socket.emit('reply double room', {reply: reply});
    });
});

function userMenu() {
    var str =   '<div id="user_menu">' +
                    '<div id="close" onclick="$(\'#user_menu\').slideUp(\'fast\')">x</div>'+
                    '<div class="button" onclick="privateMsg($(\'#user_menu\').attr(\'data-id\'))">Private Msg</div>'+
                    '<div class="button" onclick="askDoubleRoom($(\'#user_menu\').attr(\'data-id\'))">Double Room</div>'+
                '</div>';
    return str;
}

function sendMessage(str) {
    var msg = $('#msg_inp').val();
    $('#msg_inp').val('');
    socket.emit('msg', {nickname: nickname, message: msg});
    return false;
}

function privateMsg(uid) {
    var tnick = $('#'+uid).text();
    var msg = prompt('Enter private message text to '+ tnick, 'Hi '+tnick);
    socket.emit('private msg', {msg: msg, id:uid, sender_nick:nickname});
    $('#chat_window').append('<span class="private_to"><b>Me to '+tnick+'</b>: '+msg+'</span><br/>');
    $("#chat_window").animate({ scrollTop: $("#chat_window").height() }, 100);
}

function askDoubleRoom(uid) {
    var tnick = $('#'+uid).text();
    socket.emit('ask double room', {id:uid, sender_nick:nickname});
}

function clickOnUser(user) {
    var thisid = $(user).attr('id');
    if(thisid == my_id) {
        return;
    }
    else if($('#user_menu').attr('data-id') == thisid && $('#user_menu').is(':visible')) {
        $('#user_menu').slideUp('fast');
        return;
    }

    $('#user_menu').slideUp('fast', function() {
        $('#'+thisid).after($('#user_menu'));
        $('#user_menu').attr('data-id', thisid);
        $('#user_menu').slideDown('fast');
    });
}