/**
 * Is called when a user double-clicks on a table cell element, the span 
 * element is replaced with a new input node (textbox) where the default
 * value is set to the text from the span
 * @param event
 * @return
 */
function openTxtBx(event) {
	var cell;
	
	//we need to pattern match the classes because they may have other
	//classnames (rejected, accepted, etc)
	if (event.target.className.match("^cellSpan")) {
		cell = event.target;
		text = cell.innerHTML;
	}
	else if (event.target.className.match("^cellLabel")) {
		cell = event.target.firstChild;
		text = cell.innerHTML;
	}
	else {
		 return "";
	}
		
	cell.innerHTML = "";
	
	var box = newInputNode();
	box.setAttribute("value", text);
	cell.appendChild(box);
	
	box.focus();
	box.select();
	return "";
}

/**
 * Is invoked when a user de-focuses or presses enter on an input box,
 * indicating that they are done editing the cell.  So we grab the text inside
 * the box, replace the input node with a span node with the text, an update
 * the tblContents array
 * @param event
 * @return
 */
function closeTxtBx(event) {
	var box = event.target;
	var text = box.value;
	
	var row = box.parentNode;
	row.innerHTML = text;
	row.title = getTimeStamp();
	
	var idsplit = row.parentNode.id.split("_");
	var i = idsplit[0];
	var j = idsplit[1];
	tblContents[i][j].word = text;
}

/**
 * This function is mainly concerned with checking if the key that was pressed
 * was the enter button, and if it is then we invoke the closeTxtBx method
 * @param event
 * @return
 */
function closeTxtBxKeyCheck(event) {
	if(event.keyCode == 13) {
		closeTxtBx(event);
	}
}

/**
 * Is invoked when the Add Word button is clicked.  Will add a new row of
 * words to the table.  Also, it opens an input box in the first column
 * by default, we want them to add some text in it :)
 * @return
 */
function addRow() {
	var tbody = document.getElementById("tblbody");
	
	var row = newTableRowNode();
	row.setAttribute("onblur", "lockRows(event)");
	
	//box is the input element in the first col of the new rows
	var box = newInputNode();
	
	for (j = 0; j < tblHeader.length; j++) {
		var newCell;
		var i = tbody.childNodes.length;

		//if its the first element, then we add the input box, otherwise
		//we add newMarkedCellNode (basically it has an extra checkmark thing
		if (j == 0) {
			tblContents[i] = new Array();
			newCell = newCellNode("");
			newCell.setAttribute("value", "New Translation");
			
			newCell.firstChild.appendChild(box);
			
		} 	
		else {
			newCell = newMarkedCellNode("");
			setUnverified(newCell);
		}
		
		tblContents[i][j] = new Word("", 0);
		newCell.id = "" + i + "_" + j;
		row.appendChild(newCell);
	}
	
	tbody.appendChild(row);
	
	//focus on the input inside the box
	box.focus();
	box.select();
}

/**
 * is invodked when the add column button is clicked, this will add an entire
 * new column in the table and set the new header to be editble, waiting for 
 * the user to modify it
 * @return
 */
function addColumn() {
	var thead = document.getElementById("tblheadrow");
	var buttoncell = document.getElementById("buttoncell");
	var newHeader = newEditableHeaderNode();
	
	//the key here is that we need to insert before the button cell, which
	//we want to stay at the end
	thead.insertBefore(newHeader, buttoncell);
	
	var tbody = document.getElementById("tblbody");
	var rows = tbody.childNodes;
	for (i = 0; i < rows.length; i++) {
		var newcell = newMarkedCellNode("");
		var j = rows[i].childNodes.length;
		newcell.id = "" + i + "_" + j;
		rows[i].appendChild(newcell);
		tblContents[i][j] = new Word("", 0);
	}
	
	newheadbox.focus();
	newheadbox.select();
	
	//we want to disable the add new column button while the user is in this
	//mode, because if you let them keep adding more columns all hell will
	//break loose....maybe...lets just be sure
	document.getElementById("addlang").disabled=true;
}

/**
 * Invoked when the user de-focuses or presses enter on an editable
 * 
 * First, check if the entered text matches any of the existing headers, or
 * languages.  If it does, do *not* add the element and raise an error, which
 * will show up as a div above the table
 * 
 * If it does not match, then we add the language as a column, and remove the
 * error labels if they exist
 * @return
 */
function verifyHeader() {
	
	//trim leading and trailing whitespace using regex, yay for no trim()
	var text = newheadbox.value.replace(/^\s+|\s+$/g, "");
	
	var body = document.getElementById("divcontainer");
	var tblDiv = document.getElementById("tblDiv");

	//if it is a duplicate, then we raise the error, otherwise we add it in
	if (isDuplicateHeader(text.toLowerCase())) {
		addErrorHeader(tblDiv);
	}
	else {
		tblHeader.push(text);
		document.getElementById("addlang").disabled=false; //re-enable the btn

		var theadrow = document.getElementById("tblheadrow");
		var newCell = newHeaderNode(text);

		var children = theadrow.childNodes;
		theadrow.replaceChild(newCell, children[children.length - 2]);

		removeErrorHeader(tblDiv);
	}
}

/**
 * Is invoked on a keypress inside the input box of a new header, if the 
 * key is enter then we assume they want to finish and switch to verify
 * @param event
 * @return
 */
function verifyHeaderKeyCheck(event) {
	if(event.keyCode == 13) {
		verifyHeader();
	}
}

/**
 * Scans through the tblHeader list and text is inside it, yay for
 * no libraries!
 * @param tblDiv
 * @param text
 * @return true if text is in tblHeader, false otherwise
 */
function isDuplicateHeader(text) {
	for(i = 0; i < tblHeader.length; i++) {
		if (tblHeader[i].toLowerCase() == text) {
			return true;
		}
	}
	return false;
}

/**
 * Adds an error node as the first child of the tblDiv element, has
 * class error so that CSS framework will make it nice and red
 * @param tblDiv
 * @return
 */
function addErrorHeader(tblDiv) {
	if (document.getElementById("langExistsErr") == null) {
		var error = document.createElement("h3");
		error.id = "langExistsErr";
		error.setAttribute("class", "error");
		error.innerHTML = "That language already exists!";
		
		tblDiv.insertBefore(error, tblDiv.firstChild);
	}
}

/**
 * Removes the error element from tblDiv 
 * @param tblDiv
 * @return
 */
function removeErrorHeader(tblDiv) {
	var err = document.getElementById("langExistsErr");
	if (err != null) {
		tblDiv.removeChild(err);
	}
}

/**
 * Is invoked when a user clicks on the checkbox in any given table cell.  The
 * checkboxes will cycle through empty -> checked -> unchecked
 * 
 * The empty state means the word is an unverified translation
 * The checked state means that the word is a verified translation
 * The unchecked stat means that the word is a rejected translation
 * @param event
 * @return
 */
function changeStatus(event) {
	
	//check the value of status in the cell's coresponding tblContents 
	//entry and call the proper setX() method to set the status of the cell
	var td = event.target.parentNode;

	var idsplit = td.id.split("_");
	var i = idsplit[0];
	var j = idsplit[1];
	var word = tblContents[i][j];
	
	if (word.status == 0) {
		setVerified(td, word);
	}
	else if (word.status == 1) {
		setRejected(td, word);
	}
	else if (word.status = -1) {
		setUnverified(td, word);
	}
}