var shoutboxXmlhttp;

var emoticons = new Array()
emoticons[0] = ">\\:D emoticon_evilgrin.png";
emoticons[1] = "\\:\\) emoticon_smile.png";
emoticons[2] = "\\:D emoticon_grin.png";
emoticons[3] = "\\:P emoticon_tongue.png";
emoticons[4] = "\\:o emoticon_surprised.png";
emoticons[5] = "\\:s emoticon_waii.png";
emoticons[6] = "\\^\\^ emoticon_happy.png";
emoticons[7] = "\\;\\) emoticon_wink.png";
emoticons[8] = "\\:\\( emoticon_unhappy.png";


function getXmlHttpRequest() {

	var oXmlHttpRequest;
	if (window.XMLHttpRequest) {
		try {
	    	oXmlHttpRequest = new XMLHttpRequest();
	    } catch(ex) {
	    	oXmlHttpRequest = false;
	    }
	} else if (window.ActiveXObject) {
		try {
			oXmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(ex) {
			try {
				oXmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(ex) {
				oXmlHttpRequest = false;
			}
		}
	    
	}
	return oXmlHttpRequest;
}

function getDOMParser() {

	var oXmlHttpRequest;
	if (window.XMLHttpRequest) {
	    oXmlHttpRequest = new DOMParser()
	} else if (window.ActiveXObject) {
	    oXmlHttpRequest = new ActiveXObject("Microsoft.XMLDOM");
	}
	return oXmlHttpRequest;
}

function loadShoutbox() {
	var d = document;
	var shoutboxHeader = document.getElementById("shoutboxheader");

	shoutboxXmlhttp = getXmlHttpRequest();
	if(!shoutboxHeader) {
		alert("Cannot load XmlHttpResponse object!");
		return false;
	}
	shoutboxXmlhttp.onreadystatechange = shoutboxXmlReadyStateChange;
	
	shoutboxHeader.innerHTML = "<p>Verbinding maken met server...</p>";
	shoutboxXmlhttp.open('GET', "xml.php?page=shoutbox", true);
    shoutboxXmlhttp.send(null);

}

function shoutboxXmlReadyStateChange() {
	
	var shoutboxBase = document.getElementById("shoutbox");
	var shoutboxHeader = document.getElementById("shoutboxheader");
	var intPostCount, intPostvarCount, intCount;
	var postsData, postData, postText, postPoster, postEmail, postTime;
	var newRow, newCell, newFormObject, newP, newSpacer, newImg;
	var arrEmo;
	
	// Clear shoutbox
	try {
		while(shoutboxBase.rows.length > 2) {
			if(shoutboxBase.rows[1].firstChild.id != "shoutboxheader" && shoutboxBase.rows[1].firstChild.id != "shoutboxform") {
				shoutboxBase.deleteRow(1);
			}
		}
	} catch(ex) {
		alert("Parse error " + ex);
	}
	
	switch(shoutboxXmlhttp.readyState) {
		case 1:
			shoutboxHeader.innerHTML = "<p class=\"center\">Verbonden...</p><p>&nbsp;</p>";
			break;
		case 2:
			shoutboxHeader.innerHTML = "<p class=\"center\">Data ontvangen...</p><p>&nbsp;</p>";
			break;
		case 3:
			shoutboxHeader.innerHTML = "<p class=\"center\">Data ontvangen...</p><p>&nbsp;</p>";
			break;
		case 4:
			shoutboxHeader.innerHTML = "<p class=\"center\">Data verwerken...</p><p>&nbsp;</p>";
			
			// Check if xml data has been received
			if(shoutboxXmlhttp.responseXML) {
				postsData = shoutboxXmlhttp.responseXML.getElementsByTagName("posts")[0].childNodes;
				
				// Cycle trough posts
				for(intPostCount = 0; intPostCount < postsData.length; intPostCount++) {
					try {
						if(postsData[intPostCount].nodeType != 1) continue;
						if(postsData[intPostCount].nodeName == "post" && postsData[intPostCount].hasChildNodes()) {
							
							postText = null;
							postPoster = null;
							postEmail = null;
							postTime = null;
						
							// Cycle trough post nodes
							for(intPostvarCount = 0; intPostvarCount < postsData[intPostCount].childNodes.length; intPostvarCount++) {
								postData = postsData[intPostCount].childNodes[intPostvarCount]
								if(postData.nodeType != 1) continue;
								
								switch(postData.nodeName) {
									case "text":
										if(postData.hasChildNodes()) {
											postText = postData.firstChild.nodeValue;
										} else {
											postText = "";
										}
										break;
									case "poster":
										if(postData.hasChildNodes()) {
											postPoster = postData.firstChild.nodeValue;
										} else {
											postPoster = "";
										}
										break;
									case "email":
										if(postData.hasChildNodes()) {
											postEmail = postData.firstChild.nodeValue;
										} else {
											postEmail = "";
										}
										break;
									case "timedate":
										if(postData.hasChildNodes()) {
											postTime = postData.firstChild.nodeValue;
										} else {
											postTime = "";
										}
										break;
									default:
										break;
								}
							}
							
							if(postText != null && postPoster != null && postEmail != null && postTime != null) {
								// Create new row (post in shoutbox)
								newRow = shoutboxBase.insertRow(1);
								newCell = newRow.insertCell(-1);
								newCell.className = "shoutbox"
								
								// Parse text
								for(intCount = 0; intCount < emoticons.length; intCount++) {
									strEmo = emoticons[intCount].split(" ");
									if(strEmo.length == 2) {
										regexp = new RegExp(strEmo[0], "gi");
										postText = postText.replace(regexp, "<img src='images/shoutbox/" + strEmo[1] + "' alt='' width='15' height='15' />")
										
									}
								}
								
								if(postEmail == "") {
									postText = "<p title=\"Bericht geplaatst door " + postPoster + " op " + postTime + "\"><b>" + postPoster + " zegt:</b></p><p class=\"center\"><img src=\"images/shoutbox-rule.jpg\" alt=\"\" height=\"2\" width=\"150\" /></p><p>" + postText + "</p><p>&nbsp;</p>";
								} else {
									postText = "<p title=\"Bericht geplaatst door " + postPoster + " op " + postTime + "\"><a class=\"link1\" href=\"mailto:" + postEmail + "\"><b>" + postPoster + " zegt:</b></a></p><p class=\"center\"><img src=\"images/shoutbox-rule.jpg\" alt=\"\" height=\"2\" width=\"150\" /></p><p>" + postText + "</p><p>&nbsp;</p>";
								}
								
								newCell.innerHTML = postText;
							}
							
						}
						
					} catch(ex) {
						alert("Parse error" + ex);
					}
				}
				
				// Check if shoutbox from is present
				if(!document.getElementById("shoutboxform")) {
					// Shoutbox from is not --> create shoutbox from.
					newRow = shoutboxBase.insertRow(-1);
					newCell = newRow.insertCell(-1);
					newCell.className = "shoutbox_form"
					newCell.id = "shoutboxform";
					
					newP = document.createElement("P");
					newP.className = "center";
					newP.appendChild(document.createElement("BR"));
					
					// Create name textbox;
					newFormObject = document.createElement("INPUT");
					newFormObject.setAttribute("type", "text");
					newFormObject.className = "shoutboxtextbox";
					newFormObject.value = "Naam";
					newFormObject.onfocus = shoutboxTextboxOnFocus;
					newFormObject.id = "shoutboxName"
					newFormObject.maxLength = 50;
					newP.appendChild(newFormObject);
					newP.appendChild(document.createElement("BR"));
					
					// Create e-mail textbox;
					newFormObject = document.createElement("INPUT");
					newFormObject.setAttribute("type", "text");
					newFormObject.className = "shoutboxtextbox";
					newFormObject.value = "E-mail";
					newFormObject.onfocus = shoutboxTextboxOnFocus;
					newFormObject.id = "shoutboxEmail"
					newFormObject.maxLength = 50;
					newP.appendChild(newFormObject);
					newP.appendChild(document.createElement("BR"));
					
					// Create message textbox;
					newFormObject = document.createElement("INPUT");
					newFormObject.setAttribute("type", "text");
					newFormObject.className = "shoutboxtextbox";
					newFormObject.value = "Bericht";
					newFormObject.onfocus = shoutboxTextboxOnFocus;
					newFormObject.id = "shoutboxMessage"
					newFormObject.maxLength = 200;
					newP.appendChild(newFormObject);
					newP.appendChild(document.createElement("BR"));
					
					// Create emoticons
					for(intCount = 0; intCount < emoticons.length; intCount++) {
						arrEmo = emoticons[intCount].split(" ");
						if(arrEmo.length == 2) {
							newImg = document.createElement("IMG");
							newImg.className = "shoutboxemoticon";
							newImg.src = "images/shoutbox/" + arrEmo[1];
							newImg.value = arrEmo[0].replace(/\\/g, "");
							newImg.onclick = insertEmoticon;
							newImg.alt = "Klik om dit emoticon in te voegen. De code voor dit emoticon is " + arrEmo[0];
							newImg.height = 15;
							newImg.widht = 15;
							newP.appendChild(newImg);
						}
					}
					newP.appendChild(document.createElement("BR"));
					
					// Create post button;
					newFormObject = document.createElement("INPUT");
					newFormObject.setAttribute("type", "button");
					newFormObject.className = "shoutboxbutton";
					newFormObject.value = ":: Stuur";
					newFormObject.title = "Bericht opsturen";
					newFormObject.onclick = shoutboxSubmit;
					newP.appendChild(newFormObject);
					
					// Create spacer
					newSpacer = document.createElement("SPAN");
					newSpacer.innerHTML = "&nbsp;";
					newP.appendChild(newSpacer);
					
					// Create clear button
					newFormObject = document.createElement("INPUT");
					newFormObject.setAttribute("type", "button");
					newFormObject.className = "shoutboxbutton";
					newFormObject.value = ":: Reset";
					newFormObject.title = "Formulier leegmaken";
					newFormObject.onclick = shoutboxReset;
					newP.appendChild(newFormObject);
					newP.appendChild(document.createElement("BR"));
					
					// Create refresh button;
					newFormObject = document.createElement("INPUT");
					newFormObject.setAttribute("type", "button");
					newFormObject.className = "shoutboxbutton";
					newFormObject.value = ":: Vernieuwen";
					newFormObject.title = "Controleren of er nieuwe berichten in de shoutbox geplaatst zijn";
					newFormObject.onclick = shoutboxRefresh;
					newP.appendChild(newFormObject);
					newP.appendChild(document.createElement("BR"));
					newP.appendChild(document.createElement("BR"));
					
					newCell.appendChild(newP);
					
					// Attempt to scroll the form into view. This is not a W3C DOM specified function, thus using a try control structure is highly recommended.
					try {
						//newCell.scrollIntoView();
						shoutboxBase.parentNode.scrollTop = shoutboxBase.parentNode.scrollHeight;
					} catch(ex) {
					}
					
				} else {
					// Shoutbox from is present, make sure style is set correct.
					document.getElementById("shoutboxform").className = "shoutbox_form"
					
					// Attempt to scroll the form into view. This is not a W3C DOM specified function, thus using a try control structure is highly recommended.
					try {
						//document.getElementById("shoutboxform").scrollIntoView();
						shoutboxBase.parentNode.scrollTop = shoutboxBase.parentNode.scrollHeight;
					} catch(ex) {
					}
				}
				
				shoutboxHeader.innerHTML = "<p class=\"center\">De shoutbox is geladen.</p><p>&nbsp;</p>";
			} else {
			
				// No xml data received
				shoutboxHeader.innerHTML = "<p class=\"center\">Kan laatste berichten niet ophalen.</p><p>&nbsp;</p>";
			}
			
			break;
	}
}

function shoutboxTextboxOnFocus() {
	if(this.value == "Naam" || this.value == "E-mail" || this.value == "Bericht") {
		this.value = "";
	}
}

function shoutboxReset() {
	document.getElementById("shoutboxName").value = "Naam";
	document.getElementById("shoutboxEmail").value = "E-mail";
	document.getElementById("shoutboxMessage").value = "Bericht";
}

function shoutboxSubmit() {
	var shoutboxHeader = document.getElementById("shoutboxheader");
	var sendVar;
	var sendName = document.getElementById("shoutboxName").value;
	var sendEmail = document.getElementById("shoutboxEmail").value;
	var sendMessage = document.getElementById("shoutboxMessage").value;
	
	document.getElementById("shoutboxMessage").value = "";
	
	// Validate form
	if(sendEmail == "E-mail") {
		sendEmail = "";
	}
	if((sendMessage == "" || sendName == "") || !(sendEmail != "" ^ sendEmail.indexOf("@") == -1) || !(sendEmail != "" ^ sendEmail.indexOf(".") == -1) || sendMessage == "Bericht" || sendName == "Naam") {
		alert("Kan bericht niet versturen. Je moet een naam en bericht invullen. Als je een e-mailadres invult, vul dan een geldig e-mailadres in.");
		return false;
	}
	
	// Prepare post request
	sendVar = "action=post";
	sendVar += "&name=" + escape(sendName);
	sendVar += "&email=" + escape(sendEmail);
	sendVar += "&message=" + escape(sendMessage);
	
	shoutboxXmlhttp = getXmlHttpRequest();
	if(!shoutboxHeader) {
		alert("Cannot load XmlHttpResponse object!");
		return false;
	}
	shoutboxXmlhttp.onreadystatechange = shoutboxXmlReadyStateChange;
	
	shoutboxHeader.innerHTML = "<p>Verbinding maken met server...</p>";
	
	// Post shoutbox form data.
	shoutboxXmlhttp.open("post", "xml.php?page=shoutbox", true);
	shoutboxXmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
	
	shoutboxXmlhttp.send(sendVar);
}

function shoutboxRefresh() {
	var shoutboxHeader = document.getElementById("shoutboxheader");
	
	shoutboxXmlhttp = getXmlHttpRequest();
	if(!shoutboxHeader) {
		alert("Cannot load XmlHttpResponse object!");
		return false;
	}
	shoutboxXmlhttp.onreadystatechange = shoutboxXmlReadyStateChange;
	
	shoutboxHeader.innerHTML = "<p>Verbinding maken met server...</p>";
	shoutboxXmlhttp.open('GET', "xml.php?page=shoutbox", true);
    shoutboxXmlhttp.send(null);
}

function insertEmoticon() {
	var hShoutboxMessage = document.getElementById("shoutboxMessage");
	
	if(hShoutboxMessage) {
		hShoutboxMessage.value += this.value;
	}
}