<!DOCTYPE html>
<html>
<head>
    <title>ChatClient</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="qwebchannel.js"></script>

    <script>
        'use strict';
        var wsUri = "ws://localhost:12345";
        window.loggedin = false;

        window.onload = function() {
            var socket = new WebSocket(wsUri);

            socket.onclose = function() {
                console.error("web channel closed");
            };
            socket.onerror = function(error) {
                console.error("web channel error: " + error);
            };
            socket.onopen = function() {
                window.channel = new QWebChannel(socket, function(channel) {
                    //connect to the changed signal of a property
                    channel.objects.chatserver.userListChanged.connect(function() {
                        $('#userlist').empty();
                        //access the property
                        channel.objects.chatserver.userList.forEach(function(user) {
                            $('#userlist').append(user + '<br>');
                        });
                    });
                    //connect to a signal
                    channel.objects.chatserver.newMessage.connect(function(time, user, message) {
                        $('#chat').append("[" + time + "] " + user + ": " + message + '<br>');
                    });
                    //connect to a signal
                    channel.objects.chatserver.keepAlive.connect(function(args) {
                        if (window.loggedin) {
                            //call a method
                            channel.objects.chatserver.keepAliveResponse($('#loginname').val())
                            console.log("sent alive");
                        }
                    });

                });
            }
        }
    </script>
</head>
<body>

<div id="loginDialog" class="easyui-dialog" title="Chat Login" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
    <form id="loginForm" method="post">
        <table cellpadding="5">
        <tr><td>Name:</td><td><input class="easyui-validatebox" type="text" id="loginname" name="name" data-options="required:true"></input></td></tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Login</a>
    </div>
    <div style="text-align:center;padding:5px" id="loginError">
        Username already in use.
    </div>
    <script>
    $('#loginForm').submit(submitForm);

    function submitForm(event) {
        console.log("DEBUG login: " + channel);
        channel.objects.chatserver.login($('#loginname').val(), function(arg) {
            console.log("DEBUG login response: " + arg);
            if (arg === true) {
                $('#loginError').hide();
                $('#loginDialog').dialog('close');
                window.loggedin = true;
            } else {
                $('#loginError').show();
            }
        });
        console.log($('#loginname').val());
        if (event !== undefined)
            event.preventDefault();
        return false;
    }
    </script>
</div>


<div class="easyui-layout" style="width:500px;height:300px;">
    <div data-options="region:'east',split:true" title="Users" id="userlist" style="width:100px;">

    </div>
    <div data-options="region:'south',split:true" style="height:50px;">
        <form id="messageForm">
            <input class="easyui-validatebox" type="text" id="message" name="name" style="width: 97%"></input>
        </form>
    </div>
    <div data-options="region:'center'" id="chat">

    </div>
    <script>
    $('#messageForm').submit(submitMessage);

    function submitMessage(event) {
        channel.objects.chatserver.sendMessage($('#loginname').val(), $('#message').val());
        $('#message').val('');
        if (event !== undefined)
            event.preventDefault();
        return false;
    }
    </script>
</div>


<script type="text/javascript">
$(document).ready(function() {
    $('#loginError').hide();
});
</script>

</body>
</html>