<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Huoran Chat</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>

<body>
    <!-- The window for login and registration -->
    <div id='loginWindow'>
        <h1>Huoran Chat</h1>
        <br>
        <div id="loginWrapper">
            <h2>Please login</h2>
            <table border="0" class="windowContent">
                <tr>
                    <td class="label">User Id:</td>
                    <td class="input">
                        <input class="row" type="text" placeHolder="id" id="idInput" />
                    </td>
                </tr>
                <tr>
                    <td class="label">Password:</td>
                    <td class="input">
                        <input class="row" type="password" placeHolder="password" id="pwdInput" />
                    </td>
                </tr>
            </table>
            <div id='loginStatus'>
            </div>
            <br>
            <div>
                <input type="button" value="Login" id="loginBtn" />
                <a href="javascript:void(0);" onclick="huoranChat.toRegister()">Create new account</a>
            </div>
        </div>
        <div id="registerWrapper">
            <h2>Create New Account</h2>
            <table border="0" class="windowContent">
                <tr>
                    <td class="label">User Id:</td>
                    <td class="input">
                        <input class="row" type="text" placeHolder="id" id="regIdInput" />
                    </td>
                </tr>
                <tr>
                    <td class="label">Password:</td>
                    <td class="input">
                        <input class="row" type="password" id="regPwdInput" />
                    </td>
                </tr>
                <tr>
                    <td class="label">Repeat Password:</td>
                    <td class="input">
                        <input class="row" type="password" id="regPwdReInput" />
                    </td>
                </tr>
            </table>
            <div id='registerStatus'>
            </div>
            <br>
            <div>
                <input type="button" value="Register" id="registerBtn" />
                <a href="javascript:void(0);" onclick="huoranChat.toLogin()">Already have an account></a>
            </div>
        </div>
    </div>
    <!-- The main chatting UI-->
    <div id="mainUIWrapper">
        <div id='panel'>
            <div id="userProfileWrapper">
                <img style="height=100%;width=0%;" src="" />
                <div id="userProfileIconWrapper">
                </div>
                <div id="userIdWrapper">
                </div>
            </div>
            <hr class="charUI">
            <div id="userListWrapper">
                <div>Users:
                </div>
                <div id="userList"></div>
            </div>
        </div>
        <div id="chatWrapper">
            <div id="chatTitle">
            </div>
            <hr class="chatUI" />
            <div id="messageArea">
            </div>
            <div id="inputAreaWrapper">
                <div id="interactionBar">
                    <input type="button" value="Invite" id="inviteBtn" />
                </div>
                <div id='messageInputWrapper'>
                    <textarea id="messageInput"> </textarea>
                </div>
                <input type="button" value="Send" id="sendBtn" />
            </div>
            <!--
            <div class="row">
                <span class="label">User Id:</span>
                <input type="text" placeHolder="id" id="inviteIdInput" />
            </div>
            <br>
            <input type="button" value="Invite" id="inviteBtn" disabled=true />
            <div id='status'>Please login!</div>
            <video id="localStreamView" autoplay></video>
            <video id="remoteStreamView" autoplay></video>-->
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="scripts/huoranChat.js"></script>
</body>

</html>
