function createCoolNinjaSpyChatPanel() {
	function listenToMessage(id, message) {
		if (typeof message == "object") {
			var messageHTML = document.createElement("span");
			messageHTML.className = "noDrag";
			messageHTML.style.display = "block";
			messageHTML.innerHTML = message.message;
			messages.appendChild(messageHTML);
			messageBuilder.scrollToBottom(messages);
			if (message.raw.toLowerCase().indexOf(Attributes.get("nick").toLowerCase())) {
				audioPlayer.name.play();
			} else {
				audioPlayer.chat.play();
			}
		}
	}

	var panel = document.createElement("div");
	panel.className = "noDrag";
	panel.style.display = "flex";
	panel.style.flexDirection = "column";
	panel.style.position = "absolute";
	panel.style.top = "0px";
	panel.style.left = "0px";
	panel.style.width = "400px";
	panel.style.height = "200px";
	panel.style.resize = "both";
	panel.style.overflow = "auto";
	panel.style.backgroundColor = "#111";
	panel.style.border = "1px solid #888";

	var header = document.createElement("div");
	header.style.flex = "0 0 auto";
	header.style.padding = "4px";
	header.style.cursor = "pointer";
	header.style.color = "#000";
	header.style.fontWeight = "bold";
	header.style.backgroundColor = "#ccc";
	var title = document.createElement("span");
	title.innerHTML = "Cool Ninja Spy Chat";
	var closeButton = document.createElement("span");
	closeButton.style.float = "right";
	closeButton.style.marginRight = "5px";
	closeButton.innerHTML = "x";
	closeButton.addEventListener("click", function() {
		document.body.removeChild(panel);
		socket.removeEventListener("typing", listenToMessage);
	});
	header.appendChild(title);
	header.appendChild(closeButton);
	panel.appendChild(header);

	var content = document.createElement("div");
	content.className = "noDrag";
	content.style.flex = "1 1 auto";
	content.style.display = "flex";
	content.style.flexDirection = "column";

	var messages = document.createElement("div");
	messages.className = "noDrag";
	messages.style.flex = "1 1 auto";
	messages.style.color = "#222";
	messages.style.backgroundColor = "#fff";
	messages.style.whiteSpace = "pre-wrap";
	messages.style.fontFamily = "Consolas, Lucida Console, Courier New, monospace";
	messages.style.overflow = "auto";

	var inputBar = document.createElement("div");
	inputBar.className = "noDrag";
	inputBar.style.flex = "0 0 auto";
	inputBar.style.width = "100%";
	inputBar.style.boxSizing = "border-box";
	inputBar.style.padding = "5px";
	inputBar.style.backgroundColor = "#ccc";

	var input = document.createElement("textarea");
	input.className = "noDrag";
	input.style.width = "calc(100% - 10px)";
	input.style.height = "17px";
	input.style.backgroundColor = "#eee";
	input.style.color = "#000";
	input.style.fontFamily = "Consolas, Lucida Console, Courier New, monospace";
	input.style.fontSize = "14px";
	input.style.boxShadow = "rgba(255, 255, 255, 0.0980392) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px 1px 7px 0px inset";
	input.style.padding = "4px 3px";
	input.style.border = "1px solid #111";
	input.style.borderRadius = "5px";
	input.style.outline = "none";
	input.style.resize = "none";
	input.placeholder = "Type your darkest secrets here";

	var history = [],
	    historyIndex = 0;

	input.addEventListener("keydown", function(event) {
		switch(event.which) {
			case 13:
				if (!event.shiftKey) {
					event.preventDefault();
					if (this.value) {
						historyIndex = 0;
						history.unshift(this.value);
						socket.emit("typing", {
							message: "<b>[" + new Date().format("mediumTime") + "] " +
							         Attributes.get("nick") + ":</b> " + this.value,
							raw: this.value
						});
						this.value = "";
					}
				}
				break;
			case 38:
				if (event.shiftKey && historyIndex < history.length) {
					historyIndex++;
					this.value = history[historyIndex];
				}
				break;
			case 40:
				if (event.shiftKey && historyIndex >= 1) {
					historyIndex--;
					this.value = history[historyIndex];
				}
				break;
		}
		if (historyIndex === 0) {
			history[0] = this.value;
		}
	});
	input.addEventListener("input", function(event) {
		this.style.height = 0;
		this.style.height = Math.min(this.scrollHeight - 8, 18 * 6) + "px";
	});

	inputBar.appendChild(input);
	content.appendChild(messages);
	content.appendChild(inputBar);
	panel.appendChild(content);

	$$$.draggable(panel, "noDrag");

	document.body.appendChild(panel);

	socket.on("typing", listenToMessage);
}

createCoolNinjaSpyChatPanel();