<div id="listmessage">
	<div id="buddyprofile" nama="{{data.username}}">
		<img src="{% nav public %}img/avatar/ryan.jpeg"/>
		<span class="profilename" style="position:absolute;margin-left:10px;">{{data.username}} ({{data.role}})</span>
		{% if data.session_id != null %}
		<span id="profilestatus" class="on">online</span>
		{% else %}
		<span id="profilestatus" class="off">offline</span>
		{% endif %}
	</div>
	<div id="chatcontent" seq="0">
		{% for c in chat %}
			<div class="msg">
				<b><span {% if c.username == data.id %}class="recipient"{% else %}class="sender"{% endif %}>
					{% if c.username == data.id %}{{data.username}}{% else %}me{% endif %}
				</span></b>
				<span class="waktu">&nbsp;{{c.waktu}}</span>
				<br /><div class="txt">{{c.message}}</div>
			</div>
		{% endfor %}
	</div>
	<form id="chatform" style="margin:5px;">
		<input id="themessage" type="text" style="width:98%;" placeholder="Input Message Here..."/>
	</form>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$("#chatcontent").animate({ scrollTop: $("#chatcontent").prop("scrollHeight") }, 1000);
		$('#themessage').focus();
		//event trigger for sending a message
		$('form#chatform').submit(function(){
			$.post(
				'{% nav save_message %}',
				{message: $('#themessage').val(), chatwith: $('#viewchat').attr('with')}
			);
			$('#themessage').val("");
			return false;
		});
	});
</script>