webcam.set_hook( 'onComplete', 'my_completion_handler' );

window.onload = initPage;

function initPage(){
	buildPersonBoxes();
}

function buildPersonBoxes(e){
	requestRC = createRequest();
	var requestData = "";
	var url = "load_persons.php";
	requestRC.onreadystatechange = personsLoadReady;
	requestRC.open("POST", url, true);
  	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	requestRC.send(requestData);
}


function personsLoadReady(){
	
	// resultaat container inhoud is nu opnieuw bepaald
	if (requestRC.readyState == 4){
    if (requestRC.status == 200){
		var responseDoc = requestRC.responseXML;
		var peopleDiv = document.getElementById("people");
		// clean up personBoxs
		peopleDiv.innerHTML="";	
		
		// debugger;	
		var persons=responseDoc.firstChild.childNodes;
	//	alert (persons.length);
		for (var i=0;i<persons.length;i++){
			
			
			// get XML name and image source
			var nickName = persons[i].firstChild.firstChild.nodeValue;	  
			var imgSource = persons[i].firstChild.nextSibling.firstChild.nodeValue;
			var imgAlt = persons[i].firstChild.nextSibling.nextSibling.firstChild.nodeValue;
			//	alert (imgSource);
			
			// HTML example
    		//<div class="person_box">
        		//<div class="person_image">photo person</div>
            	//<div class="person_nick">nick name</div>
        	//</div>
			var personBox = document.createElement("div");
			personBox.setAttribute("class","person_box");
			personBox.setAttribute("className","person_box");
			
		//	var personImage = document.createElement("div");
		//	personImage.setAttribute("class","person_image");
			
			
			var oNewImg = document.createElement("img");
			oNewImg.setAttribute("class","person_image");
			oNewImg.setAttribute("className","person_image");
			
			oNewImg.setAttribute("src",imgSource);
			oNewImg.setAttribute("alt", imgAlt);
			oNewImg.setAttribute("Title", imgAlt);
			
			//oNewImg.setAttribute("width","150");
			//oNewImg.setAttribute("height","120");
			
			//personBox.appendChild(oNewImg);
			
			var personNick = document.createElement("div");
			personNick.setAttribute("class","person_nick");
			personNick.setAttribute("className","person_nick");
			
			//var oNewP = document.createElement("p");
      		var oText = document.createTextNode(nickName);
      		//oNewP.appendChild(oText);
			personNick.appendChild(oText);

			personBox.appendChild(oNewImg);
			personBox.appendChild(personNick);
			
			peopleDiv.appendChild(personBox);
	
		}
	  }
	}
}


function goChat(){
	
	// take image 
	take_snapshot();
	

}



function take_snapshot() {
	// take snapshot and upload to server
	document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
	webcam.snap();
}

function my_completion_handler(msg) {
	// extract URL out of PHP output
	if (msg.match(/(http\:\/\/\S+)/)) {
		var image_url = RegExp.$1;
		// show JPEG image in page
		
		/*
		document.getElementById('upload_results').innerHTML = 
			'<h1>Upload Successful!</h1>' + 
			'<h3>JPEG URL: ' + image_url + '</h3>' + 
			'<img src="' + image_url + '">';
		*/
	
		document.getElementById('upload_results').innerHTML = '<img src="' + image_url + '">';
		// reset camera for another shot
		//webcam.reset();
		// remove camera stuf etc...
		
		// new chatter 
		newChatter(image_url);

	
	}
	
	else alert("PHP Error: " + msg);
}


function newChatter(image_url){
	// post chatter data to php file
	requestRC = createRequest();
	var nick = document.getElementById("nick").value;
	
	var message = document.getElementById("message").value;
	var requestData = "i=" + escape(myID)  + "&nick=" + escape(nick) + " & src= " + escape(image_url) + "&message=" + escape(message);
	//alert (requestData);
	var url = "new_person.php";
	requestRC.onreadystatechange = newChatterReady;
	requestRC.open("POST", url, true);
  	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	requestRC.send(requestData);
}


function newChatterReady(){
	if (requestRC.readyState == 4){
    if (requestRC.status == 200){
			document.getElementById('enter').innerHTML = '<hr>';
	
		buildPersonBoxes();	  // with the new chatter included
	
	}
	}
}





function no_camera_notice(){
//	alert("____" + cameraFound);
	//document.getElementById("enter").innerHTML="<h4>you need a webcam to join</h4>";
}