// JavaScript Document
// BELANGRIJKE functie om browser compatible te maken ivm Whitespace handling in XML
function childElements(parentNode)
{
	var l= new Array();
	for (var i= 0; i<parentNode.childNodes.length; i++)
	{
		if (parentNode.childNodes[i].nodeType==1)
		{
			l[l.length]= parentNode.childNodes[i];
		}
	}
	return l;
}
var elem = null;
var max_columns = null;
var max_rows = null;
var row_array = new Array();
var cel_array = new Array();
var holder = null;
var cel_content = null;
var cel_content2 = null;
var table_holder = null;
var xml_holder = null;
var flag = false;
var KeyID = null;
var microsoft = true;
var xmlDoc = null;
var menu_holder = null;
var row = null;
function verwerk_response(response)
{
	xml_holder.value = response;
	//alert(response);
	update_xml();
}
function init()
{
	document.body.innerHTML += "<h3>Spreadsheet by Gerrit Kooiman</h3><h5>javascript, xml, php</h5>";
	document.body.innerHTML += "<div>Klik ergens in de spreadsheet en gebruik de pijltoetsen om door de spreadsheet te navigeren; Klik op +/- om een rij of kolom toe te voegen of te verwijderen</div><br /><br />";
	if (window.ActiveXObject)
	{
		microsoft = true;
	}
	else
	{
		microsoft = false;
	}
	cel_content2 = document.createElement("input");
	cel_content2.type = "text";
	cel_content2.size = "140";
	cel_content2.onkeyup = putdata2;
	document.body.appendChild(cel_content2);
	//
	holder = document.createElement("div");
	//
	document.body.appendChild(holder);
	holder.style.display = "none";
	holder.id = "holder";
	//
	cel_content = document.createElement("textarea");
	cel_content.onkeyup = putdata;
	cel_content.onmouseout = hide;
	holder.appendChild(cel_content);
	//
	var div = document.createElement("div");
	var button = document.createElement("input");
	button.type = "button";
	button.value = "refresh spreadsheet";
	button.name = "refresh";
	button.id = "refresh";
	button.onclick = init;
	//
	//div.appendChild(button);
	//document.body.appendChild(div);
	//
	table_holder = document.createElement("div");
	document.body.appendChild(table_holder);
	//
	menu_holder = document.createElement("div");
	document.body.appendChild(menu_holder);
	//
	div = document.createElement("div");
	document.body.appendChild(div);
	div.id = "x";
	div = document.createElement("div");
	document.body.appendChild(div);
	div.id = "x";
	div = document.createElement("div");
	document.body.appendChild(div);
	div.id = "x";
	div = document.createElement("div");
	document.body.appendChild(div);
	div.id = "x";
	//
	div = document.createElement("div");
	xml_holder = document.createElement("textarea");
	xml_holder.style.width = "100%";
	xml_holder.style.height = "250px";
	xml_holder.onclick = "blur_it";
	div.appendChild(xml_holder);
	document.body.appendChild(div);
	//
	div = document.createElement("div");
	//
	button = document.createElement("input");
	button.type = "button";
	button.value = "update de spreadsheet met xmldata";
	button.name = "update";
	button.id = "update";
	button.onclick = update_xml;
	//
	div.appendChild(button);
	document.body.appendChild(div);
	// koppel elem aan textarea
	if (microsoft == true)
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	}
	else
	{
		xmlDoc = document.implementation.createDocument("", "", null);
	}
	loadXMLDoc("http://www.mobielstartpagina.nl/bredenhoff_test/PHP/get_xml.php", "");
}
function save_waarde(i, j, content, nr, action)
{
	var params = "row=" + i + "&cel=" + j + "&content=" + content + "&nr=" + nr + "&action=" + action; 
	document.getElementById("x").innerHTML = params;
	loadXMLDoc("http://www.mobielstartpagina.nl/bredenhoff_test/PHP/put_xml.php", params);
}
function update_xml()
{
	if (microsoft == true)
	{
		xmlDoc.loadXML(xml_holder.value);
	}
	else
	{
		var parser = new DOMParser(); 
		xmlDoc = parser.parseFromString(xml_holder.value, "text/xml");
	}	
	change_worksheet(0);
}
function change_worksheet(index)
{
	row_array = new Array();
	cel_array = new Array();
	row = xmlDoc.getElementsByTagName("row");
	max_rows = row.length;
	for (i=0;i<row.length;i++)
	{
		var cel = childElements(row[i]);
		max_columns = cel.length;
		cel_array = new Array();
		for (j=0;j<cel.length;j++)
		{
			if (cel[j].hasChildNodes())
			{
				var cel_value = cel[j].firstChild.nodeValue;								
			}
			else
			{
				var cel_value = "";
			}
			cel_array.push(trim(cel_value));
		}
		row_array.push(cel_array);
	}
	//document.getElementById("x").innerHTML = max_columns;
	table_str = '<table border="4" cellpadding="0" cellspacing="0" bordercolor="#0000FF"><tbody>';
	for (i=0;i<row_array.length;i++)
	{
		if (i == 0)
		{
			table_str += '<tr>';
			cel_array = row_array[i];
			for (j=0;j<cel_array.length;j++)
			{
				if (j == 0)
				{
				table_str += '<td width="30" height="20" bgcolor="#FFFFFF"></td>';
				}
				var col_name = String.fromCharCode(j+65);
				table_str += '<td align="center">' + col_name + '</td>';
			}
			table_str += '</tr>';
		}
		table_str += '<tr>';
		cel_array = row_array[i];
		for (j=0;j<cel_array.length;j++)
		{
			if (j == 0)
			{
				table_str += '<td align="center">' + (i+1) + '</td>';
			}
			// id is gelijk aan EXCEL: colommen A-Z , rijen 1-1024 etc
			id = String.fromCharCode(j+65) + (i+1);
			if (flag)
			{
				table_str += '<td width="50" height="20" bgcolor="#CCCCCC" id="cel' + id + '" onMouseOver="getdata(this);"  onMouseUp="copydata(this);">' + chop(row_array[i][j]) + '</td>';
			}
			else
			{
				table_str += '<td width="50" height="20" bgcolor="#CCCCCC" id="cel' + id + '" onMouseUp="getdata(this);"  onMouseUp="copydata(this);">' + chop(row_array[i][j]) + '</td>';
			}
		}
		table_str += '<td width="30" height="20" bgcolor="#FFFFFF" id="insert_row_' + i + '"><a href="javascript: insert_row(' + i + ');"> + </a><span id="slash">/</span><a href="javascript: delete_row(' + i + ');"> - </a></td>';
		table_str += '</tr>';
	}
	//alert(table_str);
	//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	table_str += '<tr>';
	cel_array = row_array[0];
	for (j=0;j<cel_array.length;j++)
	{
		if (j == 0)
		{
		table_str += '<td width="30" height="20" bgcolor="#FFFFFF"></td>';
		}
		table_str += '<td width="50" height="12" bgcolor="#FFFFFF" align="center" id="insert_col_' + j + '"><a href="javascript: insert_col(' + j + ');"> + </a><span id="slash">/</span><a href="javascript: delete_col(' + j + ');"> - </a></td>';
	}
	table_str += '</tr>';
	//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	table_str += '</tbody></table>';
	table_holder.innerHTML = table_str;
	if (flag)
	{
		cel_content2.style.display = "block";
	}
	else
	{
		cel_content2.style.display = "none";
	}
}
// trim functie!!!
function trim(value) {
  value = value.replace( /^\s+/g,'').replace(/\s+$/g,'') ;
  return value;
}
function getdata(elem0)
{
	elem = elem0;
	holder.style.display = "block";
	holder.style.left = findPos(elem)[0] + "px";
	holder.style.top = findPos(elem)[1] + "px";
	//cel_content.value = elem.firstChild.nodeValue;
	cel_content.focus();
	cel_content.style.width = findWH(elem)[0] + "px";
	cel_content.style.height = "60px"; //findWH(elem)[1] + "px";
	// haal waarden op uit arrays
	j = elem.id.charCodeAt(3) - 65;
	i = elem.id.substring(4, elem.id.length) - 1;
	cel_array = row_array[i];
	cel_content.value = cel_array[j];
	setInvoerveldWidth();
	cel_content2.value = cel_content.value;
save_waarde( i, j, cel_content.value, 0, "func");
	copy_xml_to_textarea();
}
function putdata()
{
	if (elem == null)
	{
		return;
	}
	if (cel_content.value.length == 0)
	{
		elem.innerHTML = "";
	}
	else
	{
		elem.innerHTML = chop(cel_content.value);		
	}
	cel_content2.value = cel_content.value;
	cel_content.style.height = "60px"; //findWH(elem)[1] + "px";
	
	// zet waarden terug in arrays
	
	j = elem.id.charCodeAt(3) - 65;
	i = elem.id.substring(4, elem.id.length) - 1;
save_waarde( i, j, cel_content.value, 0, "save");	
	cel_array = row_array[i];
	cel_array[j] = cel_content.value;
	var cel = childElements(row[i]);
	
	var content = xmlDoc.createTextNode(cel_content.value);
	if (cel[j].hasChildNodes()) 
	{
		cel[j].removeChild(cel[j].firstChild);
	}
	cel[j].appendChild(content);
	setInvoerveldWidth();
}
function setInvoerveldWidth()
{
	var sX = getScrollXY()[0];
	var sW = getWindowSize()[0];
	var eP = findPos(elem)[0];
	// zorg ervoor dat het invoerveld niet breder wordt dan het venster
	var maxWidth = sW - eP + sX;

	if (cel_content.value.length > 20)
	{
		holder_width = findWH(elem)[0] + 600;
		if (holder_width > maxWidth)
		{
			holder_width = maxWidth;
		}
		holder.style.width = holder_width + "px";
	}
	else if (cel_content.value.length > 6)
	{
		holder_width = findWH(elem)[0] + 200;
		if (holder_width > maxWidth)
		{
			holder_width = maxWidth;
		}
		holder.style.width = holder_width + "px";
	}
	else
	{
		holder_width = findWH(elem)[0];
		if (holder_width > maxWidth)
		{
			holder_width = maxWidth;
		}
		holder.style.width = holder_width + "px";
	}	
	cel_content.style.width = holder.style.width;
}
document.onkeydown = KeyCheck;
function KeyCheck(evt)
{
 	if (elem == null)
	{
		return;
	}
	var evt = (evt) ? evt : ((window.event) ? window.event : "")
	if (elem.id != "xml_holder")
	{
		KeyID = evt.keyCode;
		j = elem.id.charCodeAt(3) - 65;
		i = elem.id.substring(4, elem.id.length);
		if (KeyID == 37) // key left
		{
			j--;
		}
		else if (KeyID == 38) // key up
		{
			i--;
		}
		else if (KeyID == 39) // key right
		{
			j++;
		}
		else if (KeyID == 40) // key down
		{
			i++;
		}
		else
		{
			putdata();
			return;
		}
		cel_content2.value = j + " -- " + (i+1);
		if (j<0)
		{
			j = 0;
		}
		if (i<1)
		{
			i = 1;
		}
		if (j>max_columns-1)
		{
			j = max_columns-1;
		}
		if (i>max_rows)
		{
			i = max_rows;
		}
		var celID = "cel" + String.fromCharCode(j+65) + (i);
		document.getElementById("x").innerHTML = celID;
		cel_content2.value = celID;
		var elem0 = document.getElementById(celID);
		getdata(elem0);
	}
}
function putdata2()
{
	elem.innerHTML = chop(cel_content2.value);
}
function insert_row(nr)
{
	holder.style.display = "none";
	var row = xmlDoc.getElementsByTagName("row");
	var rowNode = xmlDoc.createElement("row");
	var cel = childElements(row[nr]);
	for (i=0;i<cel.length;i++)
	{		
		var celNode = xmlDoc.createElement("cel");
		rowNode.appendChild(celNode);
	}
	xmlDoc.documentElement.insertBefore(rowNode, row[nr]);
save_waarde( i, j, cel_content.value, nr, "insert_row");
	copy_xml_to_textarea();
	change_worksheet(0);
}
function insert_col(nr)
{
	holder.style.display = "none";
	var row = xmlDoc.getElementsByTagName("row");
	for (i=0;i<row.length;i++)
	{		
		var cel = childElements(row[i]);
		var celNode = xmlDoc.createElement("cel");
		row[i].insertBefore(celNode, cel[nr]);
	}
save_waarde( i, j, cel_content.value, nr, "insert_col");
	copy_xml_to_textarea();
	change_worksheet(0);
}
function delete_row(nr)
{
	holder.style.display = "none";
	var row = xmlDoc.getElementsByTagName("row");
	xmlDoc.documentElement.removeChild(row[nr]);
save_waarde( i, j, cel_content.value, nr, "delete_row");
	copy_xml_to_textarea();
	change_worksheet(0);
}
function delete_col(nr)
{
	holder.style.display = "none";
	var row = xmlDoc.getElementsByTagName("row");
	for (i=0;i<row.length;i++)
	{		
		var cel = row[i].childNodes;
		row[i].removeChild(cel[nr]);
	}
save_waarde( i, j, cel_content.value, nr, "delete_col");
	copy_xml_to_textarea();
	change_worksheet(0);
}
function copy_xml_to_textarea()
{
	if (window.ActiveXObject)
	{
		xml_holder.value = xmlDoc.xml;
	}
	else
	{
		var serializer = new XMLSerializer();
		var xml = serializer.serializeToString(xmlDoc);
		xml_holder.value = xml;		
	}
}
function chop(str)
{
	if (str.length > 6)
	{
		str = str.substr(0, 6) + "...";
	}
	return str;
}
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}
function findWH(obj) {
	curwidth = obj.clientWidth;
	curheight = obj.clientHeight;
	return [curwidth,curheight];
}
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}
function getWindowSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [ myWidth, myHeight ];
}
function hide()
{
	if (flag)
	{
		holder.style.display = "none";
	}
	else
	{
		holder.style.display = "block";
	}	
}
function blur_it()
{
	elem = xml_holder;
	cel_content.blur();
	holder.style.display = "none";
	elem.focus();
}
function logout() {
	window.open("PHP/remove_xml.php",'logout', 'width=120, height=50');
}