A script to show chat on the page

messaging.js

	(function(document){
		"use strict";
	
		var chatToggle;
		var chatBox;
		var chatPopup;
		var dynamics;
		var chatBoxHidden = true;
		var contacts;
		var currentContactID = -1;
		var currentContact;
		var isPolling = false;
		var isFirst = true;
	
		$(document).ready(function() {
			initChatBox();
			initStartChatButtons();
			refreshContacts();
			searchButton();
		});
	
		function searchButton(){
			$('#search-button').live('click', function() {
				$.post("/msg/searchUser", {key: $('#input-user').val()} ,getData);
			});
			$('#input-user').live('keyup', function(event) {
				if (event.keyCode=="13"){
					$.post("/msg/searchUser", {key: $('#input-user').val()},getData);
		        }
			
			});
			$('#dongtai').live('click', function() {
				$.getJSON("/msg/dynamic", getDynamic);
			});
			
			
			$('#siliao').live('click', function() {
				$.post("/msg/searchUser", {key: $('#input-user').val()},getData);
				contactShow();
			});
			
		}
	
		
		function getDynamic(data){
			dynamics = [];
			var dynamicsMap = {};
			for(var i = 0; i < data.length; i++){
				var conversation =data[i];
				var dynamic;
				if(dynamicsMap[conversation.id] == undefined){
					if(conversation.type == 'activity'){
						dynamic = {
								dynamicID: conversation.id,
								dynamicAction: conversation.action,
								dynamicType: conversation.type,
								dynamicTime: conversation.time,
								dynamicFromName: conversation.fromName,
								dynamicToName: conversation.toName,
								dynamicUserAvatar: conversation.userAvatar,
								dynamicName: conversation.aName,
								dynamicURL:'/activity/detail/'+conversation.aID,
								dynamicModule: '活动'
								};
					}else if(conversation.type == 'wel'){
						dynamic = {
								dynamicID: conversation.id,
								dynamicAction: conversation.action,
								dynamicType: conversation.type,
								dynamicTime: conversation.time,
								dynamicFromName: conversation.fromName,
								dynamicToName: conversation.toName,
								dynamicUserAvatar: conversation.userAvatar,
								dynamicName:conversation.wName,
								dynamicURL:'/charity/'+conversation.wID,
								dynamicModule: '公益'
								};
					}else{
						dynamic = {
								dynamicID: conversation.id,
								dynamicAction: conversation.action,
								dynamicType: conversation.type,
								dynamicTime: conversation.time,
								dynamicFromName: conversation.fromName,
								dynamicToName: conversation.toName,
								dynamicUserAvatar: conversation.userAvatar,
								dynamicName: conversation.qName,
								dynamicURL:'/QuestAnsw/showQuesInfo/'+conversation.qID,
								dynamicModule: '问答'
								};
					}
					
					dynamics.push(dynamic);
					dynamicsMap[conversation.id] = dynamic;
				}else{
					dynamic = dynamicsMap[conversation.id];
				}
			}
			chatBox.html(Mustache.to_html($("#chat-box-tmpl").text(), {dynamics: dynamics}));
			dynamicShow();
			
		}

		
		
		function getData(data) {
			contacts = [];
			var contactsMap = {};
		
			for (var i = 0; i < data.length; i++) {
				var conversation = data[i];
				var contact;
			
				if (contactsMap[conversation.userID] == undefined) {
					contact = {
								contactID: conversation.userID,
								contactName: conversation.userName,
								contactProfile: conversation.userProfile,
								contactSort: conversation.lastMessage,
								contactFromID: conversation.fromID,
								contactToID: conversation.toID,
								contactRemind: '',
								activities: [{activityID: conversation.activityID,
												activityName: conversation.activityName,
												activityIsMyOwn: (conversation.activityOwnerID != conversation.userID)}]
								};
					
					contacts.push(contact);
					contactsMap[conversation.userID] = contact;
				} else {
					contact = contactsMap[conversation.userID];
					contact.activities.push({
						activityID: conversation.activityID,
						activityName: conversation.activityName,
						activityOwnerID: conversation.activityOwnerID
					});
				}
			}
		
			if (!isPolling) {
				poll();
			}
			renderContacts();
			if (currentContactID != -1) {
				for (var i = 0; i < contacts.length; i++) {
					if (contacts[i].contactID == currentContactID) {
						currentContact = contacts[i];
						showChatPopup();
						return;
					}
				}
			}
		
		}

	
		function initChatBox() {
			chatToggle = $("#chat-toggle");
			chatBox = $("#chat-box");
			chatPopup = $("#chat-popup");
		
			chatBox.hide();
			chatPopup.hide();
		
			chatToggle.click(function() {
				if (chatBoxHidden) {
					
					renderContacts();
					showChatBox();
				} else {
					hideChatBox();
				}
			});
		}
	
		function initStartChatButtons() {
			var chatButtons = $(".start-chat-button");
			if (chatButtons.length == 0) {
				return;
			}
		
			chatButtons.click(function() {
				showChatBox();
				startConversation();
			});
		}
	
		function startConversation() {
			$.post("/msg/startChat", {toID: activityOwnerID, activityID: activityID},
				function() {
					currentContactID = activityOwnerID;
					refreshContacts();
				});
		}
	
	
		function refreshContacts() {
			$.getJSON("/msg/getAll", getData);
		}
	
		function renderContacts() {
			chatBox.html(Mustache.to_html($("#chat-box-tmpl").text(), {contacts: contacts}));
			$("#contact-list li").each(function(index) {
				$(this).click(function() {
					if (currentContact != contacts[index]) {
						currentContact = contacts[index];
						showChatPopup();
						removeRemind(contacts[index].contactID);
						
						$("#chat-toggle").html("");
					} else {
						hideChatPopup();
					}
				});
			});
		}
	
		function removeRemind(data){
			for (var a = 0; a < contacts.length; a++) {
				if(contacts[a].contactID == data){
					contacts[a].contactRemind = '';
				}
			}
			renderContacts();
		}
		
		
		function sendMessage() {
			if ($("#chat-input").val().trim().length == 0) {
				$("#chat-input").val("");
				return;
			}
			$.post("/msg/sendMessage", {toID: currentContact.contactID, content: $("#chat-input").val().trim()});
			$("#chat-input").val("");
		}
	
	
	
		function showChatBox() {
			chatBox.show();
			chatBoxHidden = false;
			chatToggle.addClass("chat-toggle-active");
		}
	
		function hideChatBox() {
			chatBox.hide();
			chatBoxHidden = true;
			chatToggle.removeClass("chat-toggle-active");
		}
	
		function showChatPopup() {
			chatPopup.html(Mustache.to_html($("#chat-popup-tmpl").text(), currentContact));
			$("#chat-input").keydown(function(event) {
				if (event.keyCode == 13) { // enter
					sendMessage();
					event.preventDefault();
		        }
			});
			$("#chat-popup-close").click(function(event) {
				hideChatPopup();
			});
		
			$("#chat-popup-send-button").click(function() {
				sendMessage();
			});
		
			chatPopup.show();
		
			if (currentContact != null) {
				var currentMessages = filterMessageByID(currentContact.contactID);
				for (var i = 0; i < currentMessages.length; i++) {
					displayMessageInPopup(currentMessages[i]);
				}
			}
		
			$("#chat-input").focus();
		}
	
		function hideChatPopup() {
			currentContact = null;
			chatPopup.hide();
		}
	
		var lastMessageID = -1;
	
		function poll() {
			isPolling = true;
			$.get("/msg/getMessages",
				{lastMessageID: lastMessageID},
				function(data) {
					refreshLastMessageTime(data);
					if (data != undefined) {
						for (var i = 0; i < data.length; i++) {
							processMessage(data[i]);
							sortRefresh();
							
						}
					}
					poll();
				}
			);
		}
		
		function refreshLastMessageTime(data){
			
			for (var m = 0; m < data.length; m++) {
				for (var n = 0; n < contacts.length; n++) {
					if((contacts[n].contactFromID == data[m].toID)&&(contacts[n].contactToID == data[m].fromID)||(contacts[n].contactFromID == data[m].fromID)&&(contacts[n].contactToID == data[m].toID)){
						contacts[n].contactSort = data[m].time;
						if(data[m].toID  == contacts[n].contactID){
						}else{
							if(!isFirst){
								contacts[n].contactRemind = 'NEW';
								$("#chat-toggle").html("您有新短消息");
							}
						
						}
							
					}
				}
			}
			isFirst = false;
			renderContacts();
		}
		
		function sortRefresh(){
			for (var j = 0; j < contacts.length; j++) {
				for(var k = j;k < contacts.length; k++){
					if(contacts[j].contactSort < contacts[k].contactSort){
						var temp = contacts[j];
						contacts[j] = contacts[k];
						contacts[k] = temp;
					}
				}
			}
			renderContacts();
		}
	
		var messageCache = [];
	
		function processMessage(message) {
			
			if (message.id > lastMessageID) {
				lastMessageID = message.id;
			}
			
			messageCache.push(message);
		
			if (findContactByID(message.fromID) != null) {
				findContactByID(message.fromID).lastMessage = message.content;
			} else if (findContactByID(message.toID) != null) {
				findContactByID(message.toID).lastMessage = message.content;
			}
		
			if (chatBoxHidden) {
				return;
			}
		
			if (currentContact != undefined) {
				if (message.fromID == currentContact.contactID
					|| message.toID == currentContact.contactID) {
					displayMessageInPopup(message);
				}
			}
		}
	
		function displayMessageInPopup(message) {
			message.date = new Date(message.time).toLocaleString();
			removeRemind(message.fromID);
			var data = {msg: message};
			if (message.fromID == currentContact.contactID) {
				data.type = "friend";
				data.contact = currentContact;
			} else {
				data.type = "mine";
				data.contact = {contactProfile: myProfileURL};
			}
		
			$("#chat-container").append(
				Mustache.to_html($("#chat-message-tmpl").text(), data));
			scrollToBottom($("#chat-container"));
		}
	
		function findContactByID(id) {
			for (var i = 0; i < contacts.length; i++) {
				if (contacts[i].contactID == id) {
					return contacts[i];
				}
			}
			return null;
		}
	
		function filterMessageByID(id) {
			var result = [];
			for (var i = 0; i < messageCache.length; i++) {
				var message = messageCache[i];
				if (message.fromID == id
					|| message.toID == id) {
					result.push(message);
				}
			}
			return result;
		}
	
		function scrollToBottom(element) {
			element.scrollTop(element.prop("scrollHeight"));
		}
		
	})(document);


	function systemNotifications() {
		$("#system-list").empty();
		$.getJSON("/msg/ajax/notifications", function(data) {
			data.payload.forEach(function(notification) {
				var template = $("#notification-tmpl").html();
				var notificationDiv = $("<div/>").html(Mustache.to_html(template, notification)).contents();
				$(notificationDiv).children(".notification-delete").click(function(event) {
					$(event.currentTarget).hide();
					$.post("/msg/deleteNotification", {
						"notificationID" : notification.id
					}, function(data) {
						// piggyback
						$(notificationDiv).remove();
						window.parent.updateMessageCounts(data.unreadMail, data.unreadNotification);
					});
				});
				$("#system-list").append(notificationDiv);
			});

			//window.parent.updateMessageCounts(data.unreadMail, data.unreadNotification);
		});
	}
	
	
		  
	function dynamicShow(){
		$("#dongtai").addClass("act");
		$("#sysxiaoxi").removeClass("act");
		$("#siliao").removeClass("act");
		$("#system-list").hide();
		$("#contact-list").hide();
		$("#dynamic-list").show();
		
	}

	function systemShow(){
		systemNotifications();
		$("#sysxiaoxi").addClass("act");
		$("#dongtai").removeClass("act");
		$("#siliao").removeClass("act");
		$("#dynamic-list").hide();
		$("#system-list").show();
		$("#contact-list").hide();
	}
	function contactShow(){
		$("#siliao").addClass("act");
		$("#sysxiaoxi").removeClass("act");
		$("#dongtai").removeClass("act");
		$("#dynamic-list").hide();
		$("#system-list").show();
		$("#contact-list").show();
	}