<div id="chat" data-role="page">
    <div id="chat-header" data-role="header" data-position="fixed">
        <h1 id="chat-title"></h1>
    </div>

    <div id="chat-content" data-role="content">
        <ul data-role="listview" id="message-chat"></ul>
    </div>

    <div id="chat-footer" data-role="footer" data-position="fixed">
		<div class="ui-info outOfRange">Your message is too long. Only 10 messages will be sent.</div>
        <div class="ui-textArea">
            <div class="ui-textArea-text">
                <textarea id="text" class="ui-textArea-text-text" placeholder="Your message" data-role="none"></textarea>
            </div>
            <div class="ui-textArea-button">
                <a data-role="button" id="send">Send</a>
                <div data-role="none" id="counter" class="counter"><p></p></div>
            </div>
        </div>
    </div>

    <div data-role="popup" id="alertPopup" class="ui-corner-all">
        <p class="text"></p>
        <div class="alertPopup-button">
            <a href="#" data-role="button" data-inline="true" data-rel="back">
                OK
            </a>
        </div>
    </div>
</div>
