﻿/*--
标题：聊天控件
设计：王集鹄
博客：http://blog.csdn.net/zswang
日期：2009年3月29日
--*/

//2010年2月23日 王集鹄 添加 上下键选择历史输入文本

if (!Common.scripts["Chat"]) {
	loadCss("/Scripts/Chat.css?2010040401");
	Common.scripts["Chat"] = true;
}

function Chat(parent, width, height, maxLength) {
	var self = this;
	this.lastid = 0;
	this.width = width;
	this.height = height;
	this.parent = parent ? parent : document.body;
	this.autoScroll = true;
	this.history = [];
	this.selectHistory = -1;
	this.channel = {};
	this.table_panel = document.createElement("table");
	this.table_panel.className = "Chat";
	this.table_panel.cellPadding = "0px";
	this.table_panel.cellSpacing = "0px";
	if (this.width)
		this.table_panel.style.width = this.width + (typeof this.width == "number" ? "px" : "");
	if (this.height)
		this.table_panel.style.height = this.height + (typeof this.height == "number" ? "px" : "");
	this.parent.appendChild(this.table_panel);

	this.doubleWindow = true;

	this.tr_content = this.table_panel.insertRow(-1);
	this.td_content = this.tr_content.insertCell(-1);
	this.td_content.colSpan = 3;
	this.div_contentTop = document.createElement("div");
	this.div_contentTop.className = "div_content";
	this.div_contentTop.style.height =
		typeof this.height == "number" ? this.height * 0.35 + "px" : "35%";
	this.div_contentTop.style.width =
		typeof this.width == "number" ? this.width + "px" : "100%";
	this.td_content.appendChild(this.div_contentTop);
	this.div_content = document.createElement("div");
	this.div_content.className = "div_content";
	this.div_content.style.height =
		typeof this.height == "number" ? this.height * 0.65 - 35 + "px" : "65%";
	this.div_content.style.width =
		typeof this.width == "number" ? this.width + "px" : "100%";
	this.div_content.bigHeight = typeof this.height == "number" ? this.height - 35 + "px" : "100%";
	this.div_content.smallHeight = typeof this.height == "number" ? this.height * 0.65 - 35 + "px" : "65%";
	this.td_content.appendChild(this.div_content);

	this.tr_input = this.table_panel.insertRow(-1);
	this.tr_input.style.backgroundColor = "Gray";
	this.td_text = this.tr_input.insertCell(-1);
	this.td_text.style.height = "35px";

	this.div_text = document.createElement("div");
	this.div_text.className = "div_text";
	this.div_text.style.width =
		typeof this.width == "number" ? this.width - (20 * 3 + 35) + "px" : "100%";
	this.td_text.appendChild(this.div_text);

	this.input_text = document.createElement("input");
	if (maxLength) this.input_text.maxLength = parseInt(maxLength);
	this.input_text.type = "text";
	this.input_text.className = "input_text";
	this.div_text.appendChild(this.input_text);

	this.td_button = this.tr_input.insertCell(-1);
	this.toolbar = new Toolbar(this.td_button);
	this.toolbar.addButton("扩展功能", "icon menu", "css"
		, function() {
			if (!self.popupMenu) {
				self.menuitems = {};
				var commands = [
					["[b]清屏[/b]", "清除聊天信息", function() {
						if (confirm("您确定清除所有聊天信息吗？")) {
							self.div_content.innerHTML = "";
							self.lastid = null;
						}
						self.popupMenu.close();
					}], 
					["[color=#cc0000][b]关闭自动滚屏[/b][/color]", "关闭自动滚屏", function() {
						self.autoScroll = !self.autoScroll;
						if (self.autoScroll) {
							this.innerHTML = ubb2Html("[color=#cc0000][b]关闭自动滚屏[/b][/color]");
							this.title = "关闭自动滚屏";
						} else {
							this.innerHTML = ubb2Html("[color=#03c0c6][b]开启自动滚屏[/b][/color]");
							this.title = "开启自动滚屏";
						}
						self.popupMenu.close();
					}],
					[self.doubleWindow ? "[color=#cc0000][b]关闭分屏[/b][/color]" :	"[color=#03c0c6][b]开启分屏[/b][/color]", 
						self.doubleWindow ? "关闭分屏" : "开启分屏", function() {
						self.setDoubleWindow(!self.doubleWindow);
						self.popupMenu.close();
					}, "double"],
					["炸弹", "查看在线用户", function() {
						self.input_text.value = "";
						setSelectText(self.input_text, ">炸弹");
						self.popupMenu.close();
					}], 
					["喇叭", "向所有房间喊话", function() {
						self.input_text.value = "";
						setSelectText(self.input_text, ">喇叭：");
						self.popupMenu.close();
					}], 
					["转账", "给他人转财富", function() {
						self.input_text.value = "";
						setSelectText(self.input_text, ">由于“扶贫”转账10给[用户名]");
						self.popupMenu.close();
					}] 
				];
				self.popupMenu = new PopupBox(document.body, 120, 16 * commands.length + 2);
				self.table_menu = document.createElement("table");
				self.table_menu.cellPadding = "0px";
				self.table_menu.cellSpacing = "0px";
				self.table_menu.className = "table_menu";
				var tr = self.table_menu.insertRow(-1);
				for (var i = 0; i < commands.length; i++) {
					var tr = self.table_menu.insertRow(-1);
					var td = tr.insertCell(-1);
					td.innerHTML = ubb2Html(commands[i][0]);
					td.title = commands[i][1];
					td.onclick = commands[i][2];
					if (commands[i][3]) self.menuitems[commands[i][3]] = td; // 别名
					self.menuitems[i] = td;
				}
				self.popupMenu.div_box.appendChild(self.table_menu);
			}

			publics.counter('click_menu', location);
			if (document.selection) {
				self.input_text.focus();
				self.range_focus = document.selection.createRange();
			}
			self.popupMenu.popup(-self.popupMenu.width + 2, -self.popupMenu.height - 9, self.toolbar.div_toolbar, "right");
		}
	);
	this.toolbar.addButton("表情", "icon face", "css"
		, function() {
			if (!self.popupBox) {
				self.popupBox = new PopupBox(document.body, 24 * 15, 24 * 6);
				self.table_em = document.createElement("table");
				self.table_em.cellPadding = "0px";
				self.table_em.cellSpacing = "0px";
				self.table_em.className = "table_em";
				for (var j = 0; j < 6; j++) {
					var tr = self.table_em.insertRow(-1);
					for (var i = 0; i < 15; i++) {
						var td = tr.insertCell(-1);
						var img = document.createElement("img");
						img.alt = j * 15 + i;
						img.src = "/Images/em/" + img.alt + ".gif";
						img.alt = "[em" + img.alt + "]";
						img.style.cursor = "pointer";
						img.onclick = function() {
							setSelectText(self.input_text, this.alt, self.range_focus);
							self.popupBox.close();
						}
						td.appendChild(img);
					}
				}
				self.popupBox.div_box.appendChild(self.table_em);
			}

			publics.counter('click_facial', location);
			if (document.selection) {
				self.input_text.focus();
				self.range_focus = document.selection.createRange();
			}
			self.popupBox.popup(0, -24 * 6 - 5, self.input_text);
		}
	);
	this.button_send = this.toolbar.addButton("发送", "icon enter", "css", function() {
		publics.counter('click_send', location);
		self.submit();
		return false;
	});

	this.input_text.onkeydown = function(e) {
		e = e || event;
		switch (e.keyCode || e.which || e.charCode) {
			case 13:
				self.submit();
				break;
			case 38: // ↑
				if (self.history.length <= 0) return;
				if (self.selectHistory + 1 >= self.history.length) {
					self.selectHistory = self.history.length;
					this.value = "";
					return;
				}
				self.selectHistory++;
				this.value = self.history[self.history.length - self.selectHistory - 1];
				break;
			case 40: // ↓
				if (self.history.length <= 0) return;
				if (self.selectHistory - 1 < 0) {
					self.selectHistory = -1;
					this.value = "";
					return;
				}
				self.selectHistory--;
				this.value = self.history[self.history.length - self.selectHistory - 1];
				break;
			default: return;
		}
		if (e.preventDefault) e.preventDefault();
		if (e.stopPropagation) e.stopPropagation();
		e.cancelBubble = true;
		e.returnValue = false;
	};
	if (publics) this.setDoubleWindow(publics.getOption("d"));
	this.doChange();
}

Chat.prototype.setDoubleWindow = function(doubleWindow) {
	if (this.doubleWindow == doubleWindow) return;
	this.doubleWindow = doubleWindow;
	if (this.menuitems)
	{
		if (this.doubleWindow) {
			this.menuitems["double"].innerHTML = ubb2Html("[color=#cc0000][b]关闭分屏[/b][/color]");
			this.menuitems["double"].title = "关闭分屏";
		} else {
			this.menuitems["double"].innerHTML = ubb2Html("[color=#03c0c6][b]开启分屏[/b][/color]");
			this.menuitems["double"].title = "开启分屏";
		}
	}
	this.div_content.style.height = this.doubleWindow ? this.div_content.smallHeight :
		this.div_content.bigHeight;
	this.div_contentTop.style.display = this.doubleWindow ? "" : "none";
	if (publics) publics.setOption("d", this.doubleWindow);
}

Chat.prototype.submit = function() {
	if (this.chatting || !this.channel.entering) return;
	if (this.input_text.value == "") return;
	this.send(this.input_text.value);
	this.input_text.value = "";
	this.input_text.focus();
}

Chat.prototype.doChange = function() {
	this.button_send.input.disabled = !!this.chatting || !this.channel.entering;
}

Chat.prototype.send = function(text) {
	if (!text || text.length <= 0) return;
	if (this.history[this.history.length - 1] != text) this.history.push(text);
	this.selectHistory = -1;
	var self = this;
	this.chatting = true;
	this.doChange();
	if (typeof this.onaction == "function")
		this.onaction("talk", text);
	setTimeout(
		function() {
			self.chatting = false;
			self.doChange();
		}, 2000);
}

Chat.prototype.append = function(message) {
	var self = this;
	var parent = self.doubleWindow ? this.div_contentTop : this.div_content;
	if (this.lastid != message.id || !this.div_last_item) {
		this.div_last_item = document.createElement("div");
		this.div_last_bar = document.createElement("div");
		this.div_last_bar.style.backgroundColor = "#cccccc";
		switch (message.id + "") {
			case this.idSystem:
				this.div_last_bar.innerHTML = ubb2Html("[color=#ff0000]★系统消息★[/color]");
				playSound("system");
				break;
			case this.idNotice:
				this.div_last_bar.innerHTML = ubb2Html("[color=#99ccff]『通知』[/color]");
				playSound("notice");
				break;
			case this.idWarning:
				this.div_last_bar.innerHTML = ubb2Html("[color=#ff6600]『警告』[/color]");
				playSound("warning");
				break;
			case this.idTips:
				this.div_last_bar.innerHTML = ubb2Html("[color=#3366ff]『提示』[/color]");
				playSound("info");
				break;
			default:
				parent = this.div_content;
				this.div_last_bar.innerHTML = ubb2Html("[color=#0000ff]" + message.username + "[/color]" +
					(typeof message.money != "undefined" ?
						jsonFormat(" [small][b]财富：[/b]${money} [b][url=/UserHome.aspx?id=${id}]到访[/url][/b][/small]", message) : ""));
				playSound("chat");
				break;
		}
		this.div_last_item.appendChild(this.div_last_bar);
		parent.appendChild(this.div_last_item);
		this.lastid = message.id;
	}
	this.div_last_text = document.createElement("div");
	this.div_last_text.innerHTML = format2Html(message.content, message.format);
	this.div_last_item.appendChild(this.div_last_text);
	//this.div_last_text.scrollIntoView(true);
	if (this.autoScroll) setTimeout(function() { self.div_last_item.parentNode.scrollTop = 1e8; }, 50);
}

Chat.prototype.addMessages = function(messages) {
	for (var i = 0; messages && i < messages.length; i++) {
		var message = messages[i];
		this.append(message);
	}
}

Chat.prototype.respire = function(result) {
	if (!result) return;
	if (result.system) this.append(result.system);
	if (result.message) this.append(result.message);
	if (result.messages) this.addMessages(result.messages);
	if (result.notice) this.append(result.notice);
	if (result.warning) this.append(result.warning);
}

Chat.prototype.action = function(action, param, result) {
	var self = this;
	switch (action) {
		case "enter":
		case "exit":
			self.doChange();
			break;
	}
	this.respire(result);
}