/***********************************************************************
 * selectTable.js
 ***********************************************************************
 * The following function is called to create a scrolling array
 * of data:
 *
 *   selectArray("id",data,headings,widths,height)
 *
 * Create a table containing a scrolling array of data called "id" in
 * the current document.  Also create a hidden input element called
 * id within the current form (if any).  The <data> is an array created
 * as follows:
 *
 *   data =
 *   [
 *     [ "text00","text01","text02",...]
 *     [ "text10","text11","text12",...]
 *       ...
 *   ];
 *
 * Each element of <data> represents a row of data, which is an
 * array of strings representing the text contained in the
 * individual columns.  This data is displayed within a scrolling
 * region.  Clicking on anything in that row causes that row to
 * be selected and the value of the 0th column in that row to be
 * stored in the hidden input element.
 *
 * The <headings> is an optional array of non-scrolled column headings
 * created as follows:
 *
 *   headings = [ "heading0","heading1",... ];
 *
 * If a column heading is clicked on, the rows are sorted according
 * to the text in the columns.  The first click sorts ascending and
 * displays an up-arrow in that column.  The next click sorts
 * descending and displays a down-arrow in that column.
 *
 * The <widths> is an optional array of widths (usually expressed
 * as percentages) to be applied to the columns.  If not specified,
 * each column is an equal percentage of the total:
 *
 *   widths = [ "w0%","w1%","w2%",... ];
 *
 * The <height> indicates the height of the scrolling part of the
 * table (usually in pixels).  If not specified, "100px" is assumed.
 *
 * Other style considerations may be set using style sheets:
 *
 * <style>
 * #id .select-array { border-color: red }
 * #id .select-array-heading { background: pink }
 * #id .select-array-heading-0 { color: red }
 * #id .select-array-heading-1 { color: green; font: button }
 * #id .select-array-heading-2 { color: blue; font: menu }
 * #id .select-array-rows { border-color: green }
 * #id .select-array-row {  background: lightyellow}
 * #id .select-array-cell-0 { font: menu; color: red; cursor: text }
 * #id .select-array-cell-1 { font: menu; color: green }
 * #id .select-array-cell-2 { font: menu; color: blue }
 * </style>
 *
 * The index of the currently selected row may be obtained by
 * accessing id.selectedIndex:
 *
 *   var value = id.selection;
 *
 * A selection may be made to trigger a script by setting:
 *
 *   id.onClick = "script";
 *
 * where <selection> may be referenced in the script.
 **********************************************************************/

function selectArray(id,data,columns,widths,height,tableStyle)
{
  if (!widths)
    {
      widths = new Array;

      for (var i=0;i<columns.length;i++)
        widths[i] = String(100/columns.length)+"%";
    }

  if (!height)
    height = "100px";

  if (tableStyle == null)
    tableStyle = "border=1 style='border-collapse:collapse'";

  var i,j;

  document.write("<table id='"+id+"' "+tableStyle+" width=100% class='select-array'>" +
      "<tr title='click to sort column' class='select-array-heading'><td><table width=100%><tr>");

  for (i=0;i<columns.length;i++)
    document.write("<th id='"+id+"-"+i+"' width='"+widths[i]+"' class='select-array-heading-"+i+"' onclick='return selectArraySort(\""+id+"\","+i+")'>"+columns[i]+"</td>");

  document.write("</tr></table></td></tr>"+
       "<tr >" + 
       "<td colspan="+columns.length+">"+
       "<div style='overflow: auto; height:" + height + "'>");

  document.write("<table id='"+id+".rows' "+tableStyle+" width=100% class='select-array-rows'>");

  for (i=0;i<data.length;i++)
    {
      document.write("<tr id='"+id+"-row-"+i+"' class='select-array-row' onclick='return selectArrayClick(\""+id+"\",this,\"threedlightshadow\",false)'>");

      for (j=0;j<data[i].length;j++)
	document.write("<td id='"+id+"-"+i+"-"+j+"' width='"+widths[j]+"' class='select-array-cell-"+j+"'>" + data[i][j] + "</td>");

      document.write("</tr>");
    }

  document.write("</table></div>"+
       "</td>"+
       "</tr>"+
       "</table>");

  document.write("<input type=hidden value='' name='"+id+"' id='"+id+"-form'>");

  var obj = document.getElementById(id);
  var objForm = document.getElementById(id+"-form");
  obj.element = objForm;

  obj.onClick = null;
  obj.onClickForm = function(selection) { objForm.value = selection };
  obj.sortDirection = false;
  obj.sortColumnSelector = -1;
  obj.sortData  = data;
  obj.sortColumns = columns;

  if (!window.selectArrayOnload)
  {
    window.selectArrayOnload = new Array;
    
    if (window.onload)
      window.selectArrayOnload[window.selectArrayOnload.length] = window.onload;

    window.onload = selectArrayOnloader;
  }

  window.selectArrayOnload[window.selectArrayOnload.length] = function(){return selectArrayReload(id);};
 
  return obj;
}

// Function set into this window.onload:

function selectArrayOnloader(e)
{
  for (var i=1;i<window.selectArrayOnload.length;i++)
    window.selectArrayOnload[i].call(e);

  return window.selectArrayOnload[0].call(e);
}

function selectArrayReload(id)
{
  var obj = document.getElementById(id);
  var fobj = document.getElementById(id+"-form");

  if (fobj.value != "")
    {
      for (var i=0;i<obj.sortData.length;i++)
	{
	  if (obj.sortData[i][0] == fobj.value)
	    {
	      var row=document.getElementById(obj.id+"-row-"+i);
	      selectArrayClick(obj.id,row,"threedlightshadow",true);
	      break;
	    }
	}
    }

  return false;
}

function selectArrayClick(id,x,highlightColor,reloading)
{
  var obj = document.getElementById(id);

  if (!x.mode)
    {
      if (x.parentNode.highlight)
	{
	  x.parentNode.highlight.style.backgroundColor = x.parentNode.highlight.oldbackgroundColor;
	  x.parentNode.highlight.mode = false;
	}
      x.parentNode.highlight = x;

      x.oldbackgroundColor = x.style.backgroundColor;
      x.style.backgroundColor = "threedlightshadow"
      x.mode = true;
      obj.selection = selectArrayText(x);
    }
  else
    {
      x.style.backgroundColor = x.oldbackgroundColor;
      x.mode = false;
      x.parentNode.highlight = undefined;
      obj.selection = "";
    }

  if (!reloading)
  {
    if (obj.onClick)
      {
        if (typeof obj.onClick == "string")
	  obj.onClick = new Function("selection",obj.onClick);

        obj.onClick(obj.selection);
      }
    obj.onClickForm(obj.selection); 
  }
  return false;
};

function selectArrayText(node)
{
  var s = '';
  var children = node.childNodes;
  for (var i=0; i < children.length; i++)
    {
	var child = children[i];
	if (child.nodeType == 3) s += child.data;
	else if (child.nodeType == 1) s+= selectArrayText(child);

	if (s.length) break;
    }
  return s;
};

function selectArraySort(id,x)
{
  var obj = document.getElementById(id);

  if (!obj.sortDirection || obj.sortColumnSelector != x)
  {
    obj.sortDirection = true;
  }
  else
  {
    obj.sortDirection = false;
  }

  if (obj.sortDirection)
  {
    obj.sortData.sort(function(a,b){ if (a[x] == b[x]) return 0;else if (a[x]<b[x]) return -1;else return 1;});
  }
  else
  {
    obj.sortData.sort(function(a,b){ if (a[x] == b[x]) return 0;else if (a[x]<b[x]) return 1;else return -1;});
  }

  for (var i=0;i<obj.sortData.length;i++)
  {
    for (var j=0;j<obj.sortData[i].length;j++)
    {
      var col = document.getElementById(obj.id+"-"+i+"-"+j);
      col.innerHTML = obj.sortData[i][j];
    }
  }

  obj.sortColumnSelector = x;

  for (var i=0;i<obj.sortColumns.length;i++)
  {
    var col = document.getElementById(obj.id+"-"+i);

    var s = "";

    if (i == x)
      {
	if (obj.sortDirection) s += " &uarr;";
	else s += " &darr;"
      }
    col.innerHTML = obj.sortColumns[i]+s;
  }
}