{% extends "base.html" %}
{% block title %}{{ quest_title }}{% endblock %}
{% block head %}
	<script type="text/javascript" src="/static/socket.io.slim.js"></script>
	<script>
	var socket;
	var tid = setInterval( function () {
		if ( document.readyState !== 'complete' ) return;
		clearInterval( tid );

		socket = io.connect('https://' + document.domain + ':' + location.port + '/chat');
		socket.on('connect', function() {
			socket.emit('joined', {room: '{{ room_id }}' });
		});
		socket.on('message', function(data) {
			date = new Date(data.date * 1000);
			date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
			date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());

			msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
			msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
			msg_str += '<div class="message">' + data.message + '</div>\n';

			mbox = document.getElementById('chatWindow');
			mbox.innerHTML = mbox.innerHTML + msg_str;
			mbox.scrollTop = mbox.scrollHeight;
		});
		mtarea = document.getElementById('messageTextarea');
		mtarea.addEventListener('keypress', function(event) {
			if (event.key == 'Enter' && !event.shiftKey) {
				text = mtarea.value.trim();
				mtarea.value = '';
				if (text == '') { return; }
				socket.emit('message', {message: text, name: 'Anonymous', room: '{{ room_id }}'});
			}
		});
	}, 100 );

	function padToTwo(number) {
		if (number<=99) { number = ("0"+number).slice(-2); }
		return number;
	}
	</script>
{% endblock %}
{% block content %}
	<div id="questContainer">
		<div id="questBody">
			<h1>{{ quest_title }}</h1>
			{% autoescape false %}
			{{ quest_body }}
			{% endautoescape %}
		</div>
		<div id="chatPane">
			<h1>Chat</h1>
			<div id="chatWindow">
				{% autoescape false %}
				{% for message in messages %}
				<div class="message">
					<div class="messageHeader">
						<span class="messageName">{{ message[1] }}</span> <span class="messageDate">{{ message[3] | strftime }}</span>
					</div>
					<div class="messageMessage">{{ message[4] }}</div>
				</div>
				{% endfor %}
				{% endautoescape %}
			</div>
			<div id="messageBox"><textarea id="messageTextarea"></textarea></div>
		</div>
	</div>
{% endblock %}