Arctic Bay

//Mazzarolo Matteo 10/09/29

var handlerUpdate = "handlerUpdate.php";
var handlerInsert = "handlerInsert.php";
var handlerRemove = "handlerRemove.php";
var et_table = null;
var et_tableNew = null;
var et_row = null;
var et_rowNew = null;
var et_colNum = null;
var changing = false;
var response = null;
var timer = null; 

/////////////////////////////////////////////////////
// This function assigns the correct attributes to
// the "editableTable" id's rows.
/////////////////////////////////////////////////////
function set_editableTable() {
	et_table = document.getElementById("editableTable");
	et_colNum = et_table.rows(0).cells.length;
	var cloneRow = et_table.rows(1).cloneNode(true);	
	et_tableNew = document.getElementById("newRowTable");
	et_clearRow(cloneRow);
	et_tableNew.appendChild(cloneRow);
	et_rowNew = et_tableNew.rows(1);
	ts_makeSortable(et_table);	
	for (var i=1; i<et_table.rows.length; i++) {
		var row = et_table.rows(i);
		var buffer = row.style.backgroundColor;
		row.setAttribute("onMouseOver", "et_setBgColor(this, '#0080FF')");
		row.setAttribute("onMouseOut", "setBgColor(this, '"+ buffer +"')");	
		row.setAttribute("onClick", "et_startEditing(this)");
	}
}

/////////////////////////////////////////////////////
// This function clear the values of the input,
// select and P attributes of a row.
/////////////////////////////////////////////////////
function et_clearRow(row) {
	for (var i=0; i<et_colNum; i++){
		var td = row.childNodes[i];
		var input = null;
		var p = null;
		row.setAttribute("id", "newRow");
		row.setAttribute("onMouseOver", "");
		row.setAttribute("onMouseOut", "");	
		row.setAttribute("onClick", "");
		for (var j=0; j<td.childNodes.length; j++) {				
			switch (td.childNodes[j].tagName) {
				case "P":		
					p = td.childNodes[j];
				break;
				case "INPUT":							
					input = td.childNodes[j];
				break; 
				case "SELECT":
					input = td.childNodes[j];
				break;					
			}	
		}	
		p.innertText = "";
		p.style.display = "none"; //hides the input and select  fields
		input.value = "";
		input.style.display = "inline"; //shows the input and select fields
		input.setAttribute("onKeyPress", "return et_checkKeyPress(event)");
	}		
}

/////////////////////////////////////////////////////
// This function change the background 
// color of an element only if the user is not editing
// something else. 
/////////////////////////////////////////////////////
function et_setBgColor(el, color){
	if (!changing) { el.style.background = color; }	
}	

/////////////////////////////////////////////////////
// This function is called when a row is clicked.
// If the user is not editing something else (!changing)
// this function sets the clicked row for being editable.
/////////////////////////////////////////////////////
function et_startEditing(el){
	if (!changing) {		
		changing = true;
		et_row = el;	
		var isFirstInput = true; //chechk if this is the first input of the row
		var firstInput = null;//the first input of the row
		for (var i=0; i<et_colNum; i++){
			var td = et_row.childNodes[i];
			var input = null;
			var p = null;
			for (var j=0; j<td.childNodes.length; j++) {				
				switch (td.childNodes[j].tagName) {
					case "P":		
						p = td.childNodes[j];
					break;
					case "INPUT":							
						input = td.childNodes[j];
						input.style.background = "#F5F6CE";						
						if (isFirstInput) {
							firstInput = input;
							isFirstInput = false;
						}
					break; 
					case "SELECT":
						input = td.childNodes[j];
					break;					
				}	
			}	
			p.style.display = "none"; //hides the p fields
			input.style.display = "inline"; //shows the input and select fields
			input.setAttribute("onKeyPress", "return et_checkKeyPress(event)");
			et_showButtons();
		}		
		firstInput.focus();	 //gives the focus on the first input
	}
}	

/////////////////////////////////////////////////////
// This function shows the buttons and set their position.
// Positions are relative to the width of the table and
// the top position of the clicked row.
/////////////////////////////////////////////////////
function et_showButtons() {	
	var confirm = document.getElementById("confirm");
	var discard = document.getElementById("discard");	
	var remove = document.getElementById("remove");
	var rowTop = getY(et_row) +"px";
	var tableWidth = et_table.offsetWidth + 15 +"px";	
	confirm.style.position = "absolute";
	confirm.style.visibility = "visible";
	confirm.style.top = rowTop;
	confirm.style.left = tableWidth;
	confirm.setAttribute("onClick", "et_confirmEdit()");
	discard.style.position = "absolute";
	discard.style.visibility = "visible";
	discard.style.top = rowTop;
	discard.style.left = getX(confirm) + confirm.offsetWidth +"px";	
	discard.setAttribute("onClick", "et_discardEdit()");
	remove.style.position = "absolute";
	remove.style.visibility = "visible";
	remove.style.top = rowTop;
	remove.style.left = getX(discard) + discard.offsetWidth +"px";
	remove.setAttribute("onClick", "return et_deleteRow()");
}

/////////////////////////////////////////////////////
// This function simply hides the buttons.
/////////////////////////////////////////////////////
function et_hideButtons() {	
	var confirm = document.getElementById("confirm");
	var discard = document.getElementById("discard");	
	var remove = document.getElementById("remove");
	confirm.style.visibility = "hidden";	
	discard.style.visibility = "hidden";
	remove.style.visibility = "hidden";
}

/////////////////////////////////////////////////////
// This function is called when the 
// confirm button is pressed.
// It starts the AJAX's XmlHttpRequest which 
// inserts the values in the database.
/////////////////////////////////////////////////////
function et_confirmEdit() {
	var names = "";
	var inputs = "";
	for (var i=0; i<et_colNum; i++){
		var td = et_row.childNodes[i];
		var input = null;
		var p = null;
		for (var j=0; j<td.childNodes.length; j++) {
			switch (td.childNodes[j].tagName) {
				case "P":		
					p = td.childNodes[j];
				break;
				case "INPUT":
					input = td.childNodes[j];
				break; 
				case "SELECT":
					input = td.childNodes[j];
				break;					
			}	
		}
		input.value = et_cleanString(input.value); //clean the string from reserved characters
		names += et_tableNew.rows(0).cells(i).innerText.toLowerCase() + "|"; //string containg the names of the columns
		inputs += input.value + "|"; //string containing the values of the fields
	}
	var rand = escape(Math.random());	
	var fieldnames = escape(names);
	var contents = escape(inputs);
	var id = escape(et_row.id);	
	var reqString = handlerUpdate+"?fieldnames="+fieldnames+"&contents="+contents+"&id="+id+"&rand="+rand;	
	timer = setInterval("et_checkEdit()", 10);
	createXmlHttpReq(reqString);
	et_endEditing(input);
}

/////////////////////////////////////////////////////
// This function is called when the 
// discard button is pressed.
// It resets the value of the input and select fields.
/////////////////////////////////////////////////////
function et_discardEdit() {
	for (var i=0; i<et_colNum; i++){
		var td = et_row.childNodes[i];
		var input = null;
		var p = null;
		for (var j=0; j<td.childNodes.length; j++) {
			switch (td.childNodes[j].tagName) {
				case "P":		
					p = td.childNodes[j];
				break;
				case "INPUT":
					input = td.childNodes[j];
				break; 
				case "SELECT":
					input = td.childNodes[j];
				break;					
			}	
		}	
		input.value = p.innerText; //assigns to the input and select fields the old values
	}
	et_endEditing();
}

/////////////////////////////////////////////////////
// This function ends the current editing.
// It also checks if the input is a select.
/////////////////////////////////////////////////////
function et_endEditing(){
	for (var i=0; i<et_colNum; i++){
		var td = et_row.childNodes[i];
		var input = null;
		var p = null;
		for (var j=0; j<td.childNodes.length; j++) {
			switch (td.childNodes[j].tagName) {
				case "P":		
					p = td.childNodes[j];
				break;
				case "INPUT":
					input = td.childNodes[j];
				break; 
				case "SELECT":
					input = td.childNodes[j];
				break;					
			}	
		}	
		input.style.display = "none"; //hides the input and select fields
		p.style.display = "inline"; //shows the p fields
	}
	et_hideButtons();
	changing = false;
}

/////////////////////////////////////////////////////
// This function checks if the key pressed
// is ENTER, ESC or a riservated key and calls
// their respective functions.
/////////////////////////////////////////////////////
function et_checkKeyPress(evt){
	var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
	if (key == 34) { return false; } //34 = ", reserved for the AJAX request
	if (key == 124) { return false; } // 124 = |, reserved for the AJAX request	
	if (key == 35) { return false; } //35 = #, reserved for the AJAX request
	if (key == 13) { et_confirmEdit(); return true; }  //13 = ENTER
	if (key == 27) { et_discardEdit(); return true; } //27 = ESC
}

/////////////////////////////////////////////////////
// This function clean the string passed by parameter
// from reserved characters.
/////////////////////////////////////////////////////
function et_cleanString(str){	
	if (str.indexOf("\"")!=-1){ str = str.replace(/\"/gi,""); } // reserved char: "
	if (str.indexOf("\|")!=-1){ str = str.replace(/\|/gi,""); } // reserved char: |
	if (str.indexOf("\#")!=-1){ str = str.replace(/\#/gi,""); } // reserved char: #
	return str;
}

/////////////////////////////////////////////////////
// This function checks if the response to the 
// XML-HTTP request from the is correct.
// It also alerts the user in case of an error.
/////////////////////////////////////////////////////
function et_checkEdit(){
	if (response != "") {		
		response = response.trim(); //fix the AJAX white-space bug
		if (response.indexOf("\#")!=-1){ //error check (an error response has an '#' char
			var stringParts = response.split("#");
			var stringError = stringParts[0];
			alert(stringError);
			response = stringParts[1];
		}
		timer = clearInterval(timer);	//once it gets a result, turns interval off 
		for (var i=0; i<et_colNum; i++){
			var td = et_row.childNodes[i];
			var input = null;
			var p = null;
			var inputs = response.split("|");
			for (var j=0; j<td.childNodes.length; j++) {
				switch (td.childNodes[j].tagName) {
					case "P":		
						p = td.childNodes[j];
					break;
					case "INPUT":
						input = td.childNodes[j];
					break; 
					case "SELECT":
						input = td.childNodes[j];
					break;					
				}				
			}	
			input.value = inputs[i]; 
			p.innerText = inputs[i]; 
		}		
	response = null;
	}		
}


/////////////////////////////////////////////////////
// This function starts the creation of a new row.
// It gets the inserted parameters and creates
// an XML - HTTP request.
/////////////////////////////////////////////////////
function et_startNewRow(btn) {
	if (!changing) {
		var names = "";
		var inputs = "";
		for (var i=0; i<et_colNum; i++){
			var td = et_rowNew.childNodes[i];
			var input = null;
			var p = null;
			for (var j=0; j<td.childNodes.length; j++) {
				switch (td.childNodes[j].tagName) {
					case "P":		
						p = td.childNodes[j];
					break;
					case "INPUT":
						input = td.childNodes[j];
					break; 
					case "SELECT":
						input = td.childNodes[j];
					break;					
				}	
			}
			input.value = et_cleanString(input.value); //clean the string from reserved characters
			names += et_tableNew.rows(0).cells(i).innerText.toLowerCase() + "|"; //string containg the names of the columns
			inputs += input.value + "|"; //string containing the values of the fields
		}
		var rand = escape(Math.random());	
		var fieldnames = escape(names);
		var contents = escape(inputs);
		var reqString = handlerInsert+"?fieldnames="+fieldnames+"&contents="+contents+"&rand="+rand;	
		timer = setInterval("et_endNewRow()", 100);
		createXmlHttpReq(reqString);
	} else {
		alert("finisci mona");
	}		
}

/////////////////////////////////////////////////////
// This function ends the creation of a new row.
// It retrieves the information about the new row
// from mySQL and injects the new row into the table.
/////////////////////////////////////////////////////
function et_endNewRow() {		
	var msg = document.getElementById("newrow_message");		
	if (response == null) {	
		msg.style.color = "blue";
		msg.innerText = "Elaborazione richiesta";		
	} else if(!isNaN(parseInt(response))) { 
		timer = clearInterval(timer);	//once it gets a result, turns interval off 		
		response = response.trim(); //ajax bug
		var cloneRow = et_rowNew.cloneNode(true);	
		cloneRow.id = response;
		for (var i=0; i<et_colNum; i++){
			var td = cloneRow.childNodes[i];
			var input = null;
			var p = null;
			for (var j=0; j<td.childNodes.length; j++) {
				switch (td.childNodes[j].tagName) {
					case "P":		
						p = td.childNodes[j];
					break;
					case "INPUT":
						input = td.childNodes[j];
					break; 
					case "SELECT":
						input = td.childNodes[j];
					break;					
				}	
			}
			p.innerText = input.value;
			input.style.display = "none"; //hides the input and select fields
			p.style.display = "inline"; //shows the p fields
		}		
		et_tableNew.deleteRow(1);
		et_table.getElementsByTagName("tbody")[0].appendChild(cloneRow);
		set_editableTable();
		msg.style.color = "green";
		msg.innerText = "Inserimento avvenuto con successo!";	
		et_row = null;		
		changing = false;
		response = null;	 
	} else {		
		response = response.trim(); //ajax bug	
		timer = clearInterval(timer);
		msg.style.color = "red";
		msg.innerText = "Errore: "+ response;
		et_row = null;	
		changing = false;
		response = null;	
	}	
}	

/////////////////////////////////////////////////////
// This function deletes a row by sending an XML-HTTP
// request to the server.
/////////////////////////////////////////////////////
function et_deleteRow() {
	if (confirm("Are you sure you want to delete this row?")){
		changing = true;
		var rand = escape(Math.random());
		var id = escape(et_row.id);
		var reqString = handlerRemove+"?id="+id+"&rand="+rand;			
		timer = setInterval("et_checkDeleteRow()", 100);	
		createXmlHttpReq(reqString);
	}	
}

/////////////////////////////////////////////////////
// This function checks if the row is deleted.
/////////////////////////////////////////////////////
function et_checkDeleteRow() {
	if (response != null) {			
		timer = clearInterval(timer);	//once it gets a result, turns interval off 
		et_table.appendChild(et_row);				
		et_hideButtons();
		et_row = null;		
		changing = false;	
		response = null;	
	}
}

//Mazzarolo Matteo 10/09/29

var SORT_COLUMN_INDEX;

/////////////////////////////////////////////////////
// This function starts the correct functions for 
// table which belongs to the 'sortable' class.
/////////////////////////////////////////////////////
function set_sortableTable() {
    var el = getElementsByClass('sortable',document,'*');
    for (i = 0; i < el.length; i++) {
        ts_makeSortable(el[i]);	
    }
}

/////////////////////////////////////////////////////
// This function assigns the correct attributes to
// the table's headers cells.
/////////////////////////////////////////////////////
function ts_makeSortable(table) {
    if (table.rows && table.rows.length > 0) {
        var firstRow = table.rows[0];
    }
    if (!firstRow) {
        return;
    }
    for (var i=0; i<firstRow.cells.length; i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        cell.setAttribute("onClick", "ts_resortTable(this);return false;");	
        cell.innerHTML = txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span>';
    }
}

/////////////////////////////////////////////////////
// This function returns the InnerText of an element
/////////////////////////////////////////////////////
function ts_getInnerText(el) {
	if (typeof el == "string") { return el; }
	if (typeof el == "undefined") { return el; }
	if (el.innerText) { return el.innerText; } //Not needed but it is faster
	var str = "";	
	var cs = el.childNodes;
	var l = cs.length;
	for (var i = 0; i<l; i++) {
		switch (cs[i].nodeType) {
			case 1: //ELEMENT_NODE
				str += ts_getInnerText(cs[i]);
				break;
			case 2:	//TEXT_NODE
				str += cs[i].nodeValue;
				break;
		}
	}
	return str;
}

/////////////////////////////////////////////////////
// This function assigns the correct attributes to
// the table's headers cells.
/////////////////////////////////////////////////////
function ts_resortTable(td) {    
    if (!changing){ //if we are not editing the table        
        var span; 
        var spantext = ts_getInnerText(span);
        var column = td.cellIndex;
        var table = getParent(td,'TABLE'); 
        var itm = ts_getInnerText(table.rows[1].cells[column]);
        var firstRow = new Array();
        var newRows = new Array();
        var allspans = document.getElementsByTagName("span");
        if (table.rows.length <= 1){ return; } //if the table has only one row    
        for (var ci=0; ci<td.childNodes.length; ci++) { 
            if (td.childNodes[ci].tagName && td.childNodes[ci].tagName.toLowerCase() == 'span'){ 
                span = td.childNodes[ci]; //get the span
            }    
        }
        sortfn = ts_sort_caseinsensitive;
        if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
        if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
        if (itm.match(/^[£$]/)) sortfn = ts_sort_currency;
        if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
        SORT_COLUMN_INDEX = column;        
        for (i=0; i<table.rows[0].length; i++) { firstRow[i] = table.rows[0][i]; }
        for (j=1; j<table.rows.length; j++) { newRows[j-1] = table.rows[j]; }    
        newRows.sort(sortfn);    
        if (span.getAttribute("sortdir") == 'down') {
            ARROW = '&nbsp;&nbsp;&uarr;';
            newRows.reverse();
            span.setAttribute('sortdir','up');
        } else {
            ARROW = '&nbsp;&nbsp;&darr;';
            span.setAttribute('sortdir','down');
        }
        for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
        for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
        for (var ci=0; ci<allspans.length; ci++) {
            if (allspans[ci].className == 'sortarrow') { //delete any other arrows there may be showing
                if (getParent(allspans[ci],"table") == getParent(td,"table")) { allspans[ci].innerHTML = '&nbsp;&nbsp;&nbsp;'; } //in this table
            }
        }
        span.innerHTML = ARROW;
    }
}

/////////////////////////////////////////////////////
// This function obtains the parent of an element.
/////////////////////////////////////////////////////
function getParent(el, pTagName) {
	if (el == null) { return null; }
	else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())	// Gecko bug, supposed to be uppercase
		return el;
	else
		return getParent(el.parentNode, pTagName);
}

/////////////////////////////////////////////////////
// This function predisposes the sorting by date.
/////////////////////////////////////////////////////
function ts_sort_date(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa.length == 10) {
        dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
    } else {
        yr = aa.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
    }
    if (bb.length == 10) {
        dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
    } else {
        yr = bb.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
    }
    if (dt1==dt2) { return 0; }
    if (dt1<dt2) { return -1; }
    return 1;
}

/////////////////////////////////////////////////////
// This function predisposes the sorting by currency.
/////////////////////////////////////////////////////
function ts_sort_currency(a,b) { 
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    return parseFloat(aa) - parseFloat(bb);
}

/////////////////////////////////////////////////////
// This function predisposes the sorting by numbers.
/////////////////////////////////////////////////////
function ts_sort_numeric(a,b) { 
    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
    if (isNaN(bb)) bb = 0;
    return aa-bb;
}

/////////////////////////////////////////////////////
// This function predisposes the sorting by
// case-sensitive words.
/////////////////////////////////////////////////////
function ts_sort_caseinsensitive(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
    if (aa==bb) { return 0; }
    if (aa<bb) { return -1; }
    return 1;
}

/////////////////////////////////////////////////////
// This function predisposes the sorting by 
// non-case-sensitive words.
/////////////////////////////////////////////////////
function ts_sort_default(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa==bb) { return 0; }
    if (aa<bb) { return -1; }
    return 1;
}