/*
	Chat Clone
	By: William Lang <http://www.williamlang.net>
	
	Note from the programmer:	
	This javascript code should work with anything. Visual appearances will change depending
	on proper CSS declarations!

	You can change the iframe src to your own file that can deal with database driven content
*/

var chatWindowArray = new Array(); //the array of chat windows open
var taskBarArray = new Array(); //the array of task bars for each chat window
var maxWindows = 4; //max amount of windows to be open. Can change depending on website
var maxHeight = 400; //max height for a chat frame to be - currently unused
var usersOnlineCount = 0;
var currentUser = 0;
var flashWindow = new Array();
var stopFlase = false;

function newChat(userid){	
	currentUser = userid;

	// Create chatBody
	var chatBody = document.createElement('div');
	chatBody.setAttribute('id', 'chatClone_chatBody');

	// update Iframe
	var iframe = document.createElement('iframe');
	iframe.style.display = 'none';
	iframe.src = 'chatclone.hit.php';
	
	// This is the cell that says 'ChatClone by WilliamLang.net' I'd appreciate it if you left it here
	// but this is not required. See license.txt that was included with the zip  
	var descCell = document.createElement('div');
	descCell.setAttribute('id', 'chatClone_descCell');
	
	// Create my link
	var langLink = document.createElement('a');
	langLink.setAttribute('href', 'http://www.williamlang.net');
	langLink.setAttribute('target', '_blank');
	langLink.innerHTML = 'ChatClone by WilliamLang.net';
	
	// Create userCell
	var userCell = document.createElement('div');
	userCell.setAttribute('id', 'chatClone_userCell');
	userCell.innerHTML = '0 users online';
	userCell.onclick = function(){
		var w = document.getElementById('chatClone_usersOnline');
		
		if (w.style.display == 'block'){
			w.style.display = 'none'; 
		}else{
			w.style.display = 'block'; 
		}
	}
	
	// Create usersOnline div
	var usersOnline = document.createElement('div');
	usersOnline.setAttribute('id', 'chatClone_usersOnline');
	usersOnline.style.display = 'none';
	
	// Create title for usersOnline div
	var titleHeader = document.createElement('div');
	titleHeader.className = 'titleHeader';
	titleHeader.innerHTML = '&raquo; Users Online';
	
	// Unordered list for users that are online
	var ul = document.createElement('ul');
	ul.setAttribute('id', 'chatClone_userList');
	
	// Append all elements
	usersOnline.appendChild(titleHeader);
	usersOnline.appendChild(ul);
	descCell.appendChild(langLink);
	chatBody.appendChild(usersOnline);
	chatBody.appendChild(descCell);
	chatBody.appendChild(userCell);
	document.body.appendChild(iframe);	
	document.body.appendChild(chatBody);
}

function addUser(user, username){
	var ul = document.getElementById('chatClone_userList');	
	var userCell = document.getElementById('chatClone_userCell');
	
	var li = document.createElement('li');
	li.setAttribute('id', 'chatClone_li/'+user);
	li.onclick = new Function("addChatWindow('"+user+"', '"+username+"')");
	li.innerHTML = username;
	
	ul.appendChild(li);
	usersOnlineCount++;
	userCell.innerHTML = usersOnlineCount + " users online";
}

function addChatWindow(user, username){
	var chatBody = document.getElementById('chatClone_chatBody');
	
	if (chatWindowArray.length < maxWindows){
		/*
			If the chat window doesn't already exist we create it, otherwise we do nothing.
			This prevents multiple chat windows with the same person.
		*/
		var exist = (document.getElementById('chatClone_chatWindow/'+user) == null) ? false : true;
		
		if (!exist){
			// Create the window
			var newChatWindow = document.createElement('div');
			newChatWindow.setAttribute('id', 'chatClone_chatWindow/'+user);
			newChatWindow.className = 'chatWindow';
			
			// Create the taskbar
			var taskBarWindow = document.createElement('div');
			taskBarWindow.setAttribute('id', 'chatClone_taskBar/'+user);
			taskBarWindow.className = 'taskBar';
			taskBarWindow.innerHTML = '&raquo; ' + username;
			taskBarWindow.onclick = function(){ if (document.getElementById('chatClone_chatWindow/'+user).style.display == "none"){ maxChatWindow(user, username); }else{ minChatWindow(user); } }
			
			// Create the div where option buttons go
			var buttonDiv = document.createElement('div');
			buttonDiv.className = 'buttonDiv';
			
			// The grow button (unused)
			var buttonPlus = document.createElement('input');
			buttonPlus.setAttribute('type', 'button');
			buttonPlus.setAttribute('value', '+');
			buttonPlus.className = "optionButton";
			buttonPlus.onclick = function(){ growIframe(user); }
			
			// The minimize button
			var buttonMin = document.createElement('input');
			buttonMin.setAttribute('type', 'button');
			buttonMin.setAttribute('value', '-');
			buttonMin.className = "optionButton";
			buttonMin.onclick = function(){ minChatWindow(user); }
			
			// The close button
			var buttonClose = document.createElement('input');
			buttonClose.setAttribute('type', 'button');
			buttonClose.setAttribute('value', 'X');
			buttonClose.className = "optionButton";
			buttonClose.onclick = function(){ closeChatWindow(user); }
			
			// The header div
			var windowHeader = document.createElement('div');
			windowHeader.className = 'titleHeader';
			windowHeader.style.width = "200px";
			windowHeader.innerHTML = '&raquo; ';
			
			// User link in header
			var userLink = document.createElement('a');
			userLink.setAttribute('href', 'users.php?m=details&id='+user);
			userLink.innerHTML = username;			
			
			// Chat iframe
			var iframe = document.createElement('iframe');
			iframe.setAttribute('id', 'chatClone_iframe/'+user);
			iframe.setAttribute('name', 'chatClone_iframe/'+user);
			iframe.setAttribute('width', '100%');
			iframe.setAttribute('height', '210');
			iframe.setAttribute('src', 'chatclone.frame.php?to='+user+'&from='+currentUser);
			iframe.setAttribute('scrolling', 'no');
			iframe.setAttribute('frameborder', 0);
			iframe.style.position = 'relative';
			iframe.style.left = '0px';
			iframe.style.top = '0px';
			
			//message form
			var messageForm = document.createElement('form');
			messageForm.setAttribute('id', 'messageForm/'+user);
			messageForm.setAttribute('name', 'messageForm');
			messageForm.setAttribute('action', 'chatclone.frame.php?to='+user+'&from='+currentUser);
			messageForm.setAttribute('method', 'post');
			messageForm.setAttribute('target', 'chatClone_iframe/'+user);
			messageForm.target = iframe.name;
			
			var messageBox = document.createElement('input');
			messageBox.className = 'messageBox';
			messageBox.setAttribute('id', 'messageBox/'+user);
			messageBox.setAttribute('type', 'text');
			messageBox.setAttribute('name', 'messageBox');
			messageBox.setAttribute('autocomplete', 'off');
			messageBox.style.position = 'relative';
			messageBox.style.left = '0px';
			messageBox.style.bottom = '0px';
			
			var sendMessage = document.createElement('input');
			sendMessage.setAttribute('type', 'hidden');
			sendMessage.setAttribute('name', 'sendMessage');
			sendMessage.setAttribute('value', 1);
			
			// Appending of all elements
			messageForm.appendChild(messageBox);
			messageForm.appendChild(sendMessage);
			//buttonDiv.appendChild(buttonPlus);			
			buttonDiv.appendChild(buttonMin);
			buttonDiv.appendChild(buttonClose);
			windowHeader.appendChild(userLink);
			windowHeader.appendChild(buttonDiv);
			newChatWindow.appendChild(windowHeader);
			newChatWindow.appendChild(iframe);			
			newChatWindow.appendChild(messageForm);
			
			// Add window to array
			chatWindowArray[chatWindowArray.length] = newChatWindow;	
			taskBarArray[taskBarArray.length] = taskBarWindow;
			
			// Set the appropriate position based on when it was opened
			newChatWindow.style.right = (chatWindowArray.length * 210) + "px";
			taskBarWindow.style.right = (chatWindowArray.length * 210) + "px";
			
			// Append the windows
			chatBody.appendChild(taskBarWindow);
			chatBody.appendChild(newChatWindow);
		}
	}else{
		alert('Too many chat windows open. Please close one to open another.');
	}
}

function closeChatWindow(user){
	var newChatWindowArray = new Array();
	var newTaskBarArray = new Array();
	var chatBody = document.getElementById('chatClone_chatBody');
	var chatWindow = document.getElementById('chatClone_chatWindow/'+user);
	var taskBarWindow = document.getElementById('chatClone_taskBar/'+user);
	
	// Re create the window arrays without the windows to be closed
	for (i = 0; i < chatWindowArray.length; i++){
		if (chatWindowArray[i] != chatWindow){
			newChatWindowArray[newChatWindowArray.length] = chatWindowArray[i];
			newTaskBarArray[newTaskBarArray.length] = taskBarArray[i];
		}
	}	
	
	// Reposition opened windows
	chatWindowArray = newChatWindowArray;
	taskBarArray = newTaskBarArray;
	for (i = 0; i < chatWindowArray.length; i++){
		chatWindowArray[i].style.right = ((i + 1) * 210) + "px";
		taskBarArray[i].style.right = ((i + 1) * 210) + "px";
	}		

	// Remove the window to be closed
	taskBarWindow.style.display = 'none';
	chatWindow.style.display = 'none';
	chatBody.removeChild(taskBarWindow);
	chatBody.removeChild(chatWindow);
}

function minChatWindow(user){
	// Minimizes the chat window
	var chatWindow = document.getElementById('chatClone_chatWindow/'+user);
	chatWindow.style.display = 'none';
	chatWindow.innerHTML = '';
}

function maxChatWindow(user, username){
	// Maximizes the chat window

	if (document.getElementById('chatClone_iframe/'+user) == null){
		var chatWindow = document.getElementById('chatClone_chatWindow/'+user);
		chatWindow.style.display = 'block';
		
		// Create the div where option buttons go
		var buttonDiv = document.createElement('div');
		buttonDiv.className = 'buttonDiv';
		
		// The grow button (unused)
		var buttonPlus = document.createElement('input');
		buttonPlus.setAttribute('type', 'button');
		buttonPlus.setAttribute('value', '+');
		buttonPlus.className = "optionButton";
		buttonPlus.onclick = function(){ growIframe(user); }
		
		// The minimize button
		var buttonMin = document.createElement('input');
		buttonMin.setAttribute('type', 'button');
		buttonMin.setAttribute('value', '-');
		buttonMin.className = "optionButton";
		buttonMin.onclick = function(){ minChatWindow(user); }
		
		// The close button
		var buttonClose = document.createElement('input');
		buttonClose.setAttribute('type', 'button');
		buttonClose.setAttribute('value', 'X');
		buttonClose.className = "optionButton";
		buttonClose.onclick = function(){ closeChatWindow(user); }
		
		// The header div
		var windowHeader = document.createElement('div');
		windowHeader.className = 'titleHeader';
		windowHeader.style.width = "200px";
		windowHeader.innerHTML = '&raquo; ';
		
		// User link in header
		var userLink = document.createElement('a');
		userLink.setAttribute('href', 'users.php?m=details&id='+user);
		userLink.innerHTML = username;		
		
		// Chat iframe
		var iframe = document.createElement('iframe');
		iframe.setAttribute('id', 'chatClone_iframe/'+user);
		iframe.setAttribute('name', 'chatClone_iframe/'+user);
		iframe.setAttribute('width', '100%');
		iframe.setAttribute('height', '210');
		iframe.setAttribute('src', 'chatclone.frame.php?to='+user+'&from='+currentUser);
		iframe.setAttribute('scrolling', 'no');
		iframe.setAttribute('frameborder', 0);
		iframe.style.position = 'relative';
		iframe.style.left = '0px';
		iframe.style.top = '0px';		

		//message form
		var messageForm = document.createElement('form');
		messageForm.setAttribute('id', 'messageForm/'+user);
		messageForm.setAttribute('name', 'messageForm');
		messageForm.setAttribute('action', 'chatclone.frame.php?to='+user+'&from='+currentUser);
		messageForm.setAttribute('method', 'post');
		messageForm.setAttribute('target', 'chatClone_iframe/'+user);
		messageForm.target = iframe.name;
		
		var messageBox = document.createElement('input');
		messageBox.className = 'messageBox';
		messageBox.setAttribute('id', 'messageBox/'+user);
		messageBox.setAttribute('type', 'text');
		messageBox.setAttribute('name', 'messageBox/'+user);
		messageBox.setAttribute('autocomplete', 'off');
		messageBox.style.position = 'relative';
		messageBox.style.left = '0px';
		messageBox.style.bottom = '0px';
		
		var sendMessage = document.createElement('input');
		sendMessage.setAttribute('type', 'hidden');
		sendMessage.setAttribute('name', 'sendMessage');
		sendMessage.setAttribute('value', 1);
		
		// Appending of all elements
		messageForm.appendChild(messageBox);
		messageForm.appendChild(sendMessage);
		buttonDiv.appendChild(buttonMin);
		buttonDiv.appendChild(buttonClose);
		windowHeader.appendChild(userLink);
		windowHeader.appendChild(buttonDiv);
		chatWindow.appendChild(windowHeader);		
		chatWindow.appendChild(iframe);	
		chatWindow.appendChild(messageForm);		
		stopFlash(user);
	}
}

function growIframe(user){
	// Sets the iframe height to be 20 pixels bigger (unused)
	var userIframe = document.getElementById('chatClone_iframe/'+user);
	var frameHeight = parseFloat(userIframe.height) + 20;

	if (frameHeight < maxHeight){
		userIframe.setAttribute('height', frameHeight);
	}
}

function setOnlineCount(num){
	var userCell = document.getElementById('chatClone_userCell');
	
	usersOnlineCount = num;
	userCell.innerHTML = usersOnlineCount + " users online";
}

function startFlash(user, username){
	if (document.getElementById('chatClone_taskBar/'+user) == null){
		addChatWindow(user, username);
		minChatWindow(user);
	}
	
	var taskBarWindow = document.getElementById('chatClone_taskBar/'+user);
	if (!stopFlash){
		if (taskBarWindow.className == "taskBarFlash"){
			taskBarWindow.className = "taskBar";
		}else{
			taskBarWindow.className = "taskBarFlash";
		}
		
		flashWindow[user] = setTimeout("startFlash("+user+")", 1000);
	}else{
		taskBarWindow.className = "taskBar";	
		stopFlash = false;
	}
}

function stopFlash(user){
	stopFlash = true;
}

function clearText(user){
	var messageBox = document.getElementById('messageBox/'+user);
	messageBox.value = '';
}