//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
// pick a cell from a table grid
// needs utility.js, detect.js
//
// table arg format
//	{
//	'rows':[
//		{
//		'cells':[
//			{
//			'valueSearch':string,         (optional, = valueFill by default)
//			'valueFill':string,           (required)
//			'valueDisplay':string/object, (required - html string or DOM object)
//			'colSpan':number,             (optional)
//			'rowSpan':number              (optional)
//			},
//			{'valueSearch','valueFill','valueDisplay','colSpan','rowSpan'},
//			{'valueSearch','valueFill','valueDisplay','colSpan','rowSpan'}
//		]},
//		{'cells':[{'valueSearch','valueFill','valueDisplay','colSpan','rowSpan'}]},
//		{'cells':[{'valueSearch','valueFill','valueDisplay','colSpan','rowSpan'}]},
//		{'cells':[{'valueSearch','valueFill','valueDisplay','colSpan','rowSpan'}]},
//		{'cells':[{'valueSearch','valueFill','valueDisplay','colSpan','rowSpan'}]}
//	]}

function class_picktable (arg_table, arg_parent) {

	// self-referencing variable used for event handlers and class functions
	var objThis = this;

	// the top-level HTML DOM object
	this.htmlDomObject = null;

	// currently selected cell
	this.selectedCell = null;

	// swap select/hover styles
	this.swapHoverSelectStyles = false;

	// create a table from the given input table (2D associative array)
	var table = this.htmlDomObject = document.createElement ('table');
	if (arg_parent)  arg_parent.appendChild (this.htmlDomObject);
	var tbody = document.createElement ('tbody');
	table.appendChild (tbody);
	table.cellPadding = 5;
	table.cellSpacing = 0;
	table.style.borderCollapse = 'separate';
	table.style.backgroundColor = 'white';
	table.onmouseover = function () { this.style.cursor = 'pointer'; };
	table.onmouseout = function () { this.style.cursor = 'default'; };
	for (var r=0;  r<arg_table.rows.length;  r++) {
		var tr = document.createElement ('tr');
		tbody.appendChild (tr);
		for (var c=0;  c<arg_table.rows[r].cells.length;  c++)
		with (arg_table.rows[r].cells[c]) {
			var td = document.createElement ('td');
			tr.appendChild (td);
			if (typeof valueFill   == 'undefined')  td.valueFill   = '';         else  td.valueFill   = valueFill;
			if (typeof valueSearch == 'undefined')  td.valueSearch = valueFill;  else  td.valueSearch = valueSearch;
			if (typeof colSpan != 'undefined')  td.colSpan = colSpan;
			if (typeof rowSpan != 'undefined')  td.rowSpan = rowSpan;
			if (typeof valueDisplay != 'undefined') {
				set_child (valueDisplay, td, '&nbsp;');
				td.style.backgroundColor = 'transparent';
				td.style.border = '2px solid transparent';
				if (is_msie_pre8)  td.style.borderColor = 'white';
				td.onmouseover = function() { hover (this, true); };
				td.onmouseout = function() { hover (this, false); };
				td.onclick = function() { select (objThis.selectedCell, false); select (this, true); };
			} //if
			else
				td.onclick = function() { select (objThis.selectedCell, false); };
		} //for - inner & with
	} //for - outer

	// select the cell in the table according to the given value
	this.selectCell = function (value) {
		select (this.selectedCell, false);
		outer: for (var r=0;  r<table.rows.length;  r++)
		inner: for (var c=0;  c<table.rows[r].cells.length;  c++)
		with (table.rows[r].cells[c]) {
			if ((value == valueSearch) || (value == valueFill)) {
				select (table.rows[r].cells[c], true);
				break outer;
			} //if
		} //with
	} //function - method

	// hover/select styling functions
	function style_border     (element, flag) { element.style.borderColor     = flag ? 'red' : is_msie_pre8 ? 'white' : 'transparent'; }
	function style_background (element, flag) { element.style.backgroundColor = flag ? 'yellow' : 'transparent'; }

	// hover style for the given cell
	function hover (cell, flag) {
		if (!cell)  return;
		if (objThis.swapHoverSelectStyles)
			style_background (cell, flag);
		else
			style_border (cell, flag);
	} //function

	// select/unselect and set the style for the given cell
	function select (cell, flag) {
		if (!cell)  return;
		objThis.selectedCell = flag ? cell : null;
		if (objThis.swapHoverSelectStyles)
			style_border (cell, flag);
		else
			style_background (cell, flag);
	} //function

} //function - class