<!--
  Usage Note:
  General syntax of instantiating checklist is as follows.

  <sds:checklist width="..." height="..." selected="..." active="..." />

  All attributes are optional, but strongly recommended to specify at least
  width and height.
   	   	 
  example:
  
  <html xmlns:sds>
  <head>
  .....
  <style>
  @media all
  {
    sds\:checklist {behavior:url(checklist.htc);}
  }
  </style>
  </head>
  
  <body>
  <script language="JavaScript" for="window" event="onload()">
  var org_items = new Array();
  org_items[0] = "test1";
  org_items[1] = "test2";
  org_items[2] = "test3";
  document.all.my_checklist.SetItems(org_items);
  
  var items = new Array();
  items["test1"] = "true";
  items["test2"] = "false";
  items["test3"] = "true";
  document.all.my_checklist.SetSelections(items);
  </script>
  .....
  <script language="JavaScript" for="my_button" event="onclick()">
  var items = document.all.my_checklist.GetSelections();
  for(var el in items)
    alert("name = " + el + ", value = " + items[el]);
  </script>
  .....
  <sds:checklist id="my_checklist" width="200" height="100" />
  </body>
-->

<PUBLIC:HTC URN="checklist">

<PUBLIC:PROPERTY NAME="width" />
<PUBLIC:PROPERTY NAME="height" />
<PUBLIC:PROPERTY NAME="selected" />
<PUBLIC:PROPERTY NAME="active" />

<PUBLIC:METHOD NAME="SetItems" />
<PUBLIC:METHOD NAME="SetItemsByName" />
<PUBLIC:METHOD NAME="SetItemSelections" />
<PUBLIC:METHOD NAME="SetSelections" />
<PUBLIC:METHOD NAME="GetSelections" />
<PUBLIC:METHOD NAME="SetEnableStates" />
<PUBLIC:METHOD NAME="GetEnableStates" />
<PUBLIC:METHOD NAME="SelectItems" />
<PUBLIC:METHOD NAME="GetSelectedItems" />
<PUBLIC:METHOD NAME="SelectAll" />
<PUBLIC:METHOD NAME="ClearAll" />

<PUBLIC:EVENT ID="SelectionChanged" NAME="onselectionchanged" />
<PUBLIC:EVENT ID="EnableStateChanged" NAME="onenablestatechanged" />

<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />

<script language="JavaScript">
// global constants and variables
DEFAULT_WIDTH = 200;
DEFAULT_HEIGHT = 100;

// initialize the entire spinbox control
function DoInit()
{
  SetDefaults();  
  BuildCheckList();
  SetDisplay();
}

// set up defaults for properties when the user
// did not specify the value
function SetDefaults()
{
  if(width == null)
    width = DEFAULT_WIDTH;
  if(height == null)
    height = DEFAULT_HEIGHT;
  if(selected == null)
    selected = "false";
  if(active == null)
    active = "true";
}

// set the entire items in the list with all items
// unselected.  Subsequent call to this method will
// discard previous settings.
function SetItems(names)
{
  if(names == null)
    return;
	
  var list_items = '<table id="table_area_id" width="100%" border="0" ' +
		           'cellspacing="0" cellpadding="0">';

  for(var i = 0; i < names.length; i++)
    list_items += AddItem(names[i]);

  list_items += '</table>';
  
  check_list.innerHTML = list_items;
}

// this method is similar to SetItems(), but
// names of array elements to be elements
// (instead of its values)
function SetItemsByName(names)
{
  if(names == null)
    return;
	
  var list_items = '<table id="table_area_id" width="100%" border="0" ' +
		           'cellspacing="0" cellpadding="0">';

  for(var name in names)
    list_items += AddItem(name);

  list_items += '</table>';
  
  check_list.innerHTML = list_items;
}

// this method first set all items in the list
// based on element name, then set selections
// based on their values.
function SetItemSelections(names)
{
  SetItemsByName(names);
  SetSelections(names);
}

// add check box followed by text to constitute
// a line of list item in check list
function AddItem(name)
{
  var check_str = "";
  var disable_str = "";
  
  if(selected == "true")
    check_str = "checked";
  if(active != "true")
    disable_str = "disabled";
	
  var list_item = '<tr>' + 
                  '<td width="10%">' + 
                  '<input type="checkbox" id="' + name + '"' +
				    ' name="field" value="' + name + '"' +
					' ' + check_str + ' ' + disable_str + '>' +
                  '</td>' +
                  '<td width="90%">' + name + '</td>' +
                  '</tr>';
  return list_item;
}

// set selections/deselections for check list.
// Note: The parameter 'names' must be an array with
// each element in the following format.
//
// names[index] = value;
// where index: string indicating element name
//       value: "true" or "false" (with double-quotes)
//
// See example at the top.
function SetSelections(names)
{
  var fields = GetAllFields();
  if(fields == null)
    return;

  for(var name in names)
  {
	fields[name].checked =
	  GetBooleanValue(names[name]);
  }
	
  SelectionChanged.fire();
}

// retrieves selections/deselections in check list.
// Note: Each element of returned array is in
// the following format.
//
// names[index] = value;
// where index: string indicating element name
//       value: "true" or "false" (text string)
//
// See example at the top.
function GetSelections()
{
  var fields = GetAllFields();
  if(fields == null)
    return null;
	
  var el_array = new Array();
  
  for(var i = 0; i < fields.length; i++)
  {
	el_array[fields[i].id] =
	  GetBooleanText(fields[i].checked);
  }

  return el_array;
}

// set enable/disable states of each element in
// check list.
// Note: The parameter 'names' must be an array with
// each element in the following format.
//
// names[index] = value;
// where index: string indicating element name
//       value: "true" or "false" (with double-quotes)
//
function SetEnableStates(names)
{
  var fields = GetAllFields();
  if(fields == null)
    return;

  for(var name in names)
  {
	fields[name].disabled =
	  !GetBooleanValue(names[name]);
  }
	
  EnableStateChanged.fire();
}

// retrieves enable/disable states for each
// element in check list.
// Note: Each element of returned array is in
// the following format.
//
// names[index] = value;
// where index: string indicating element name
//       value: "true" or "false" (text string)
//
function GetEnableStates()
{
  var fields = GetAllFields();
  if(fields == null)
    return null;
	
  var el_array = new Array();
  
  for(var i = 0; i < fields.length; i++)
  {
	el_array[fields[i].id] =
	  GetBooleanText(!fields[i].disabled);
  }

  return el_array;
}

// selects (checks) all items in names array
// that matches id of the items in the list
function SelectItems(names)
{
  var fields = GetAllFields();
  if(fields == null)
    return;
	
  //if(fields.length == null)
    //alert(fields.id + ", " + names.length);
  	
  for(var i = 0; i < names.length; i++)
  {
    for(var j = 0; j < fields.length; j++)
	{
	  if(fields[j].id == names[i])
	  {
	    fields[j].checked = true;
		break;
	  }
	}
  }
	
  SelectionChanged.fire();
}

// retireves names of items selected in list
function GetSelectedItems()
{
  var fields = GetAllFields();
  if(fields == null)
    return null;
	
  var el_array = new Array();
  var index = 0;
  
  for(var i = 0; i < fields.length; i++)
  {
    if(fields[i].checked)
	  el_array[index++] = fields[i].id;
  }

  return el_array;
}

// select all check boxes in the list
function SelectAll()
{
  var fields = GetAllFields();
  if(fields == null)
    return;
	
  for(var i = 0; i < fields.length; i++)
    fields[i].checked = true;

  SelectionChanged.fire();
}

// deselect all check boxes in the list
function ClearAll()
{
  var fields = GetAllFields();
  if(fields == null)
    return;

  for(var i = 0; i < fields.length; i++)
	fields[i].checked = false;
	
  SelectionChanged.fire();
}

// convenience method to treat collection
// of fields uniformly (both single element
// and multi-element cases)
function GetAllFields()
{
  var fields = element.all.field;

  // no element case  
  if(fields == null)
    return fields;

  // single element case  
  if(fields.length == null)
  {
    var elements = new Array();
    elements[0] = fields;
	return elements;
  }

  // collection of elements  
  return fields;	
}

// convenience method to get boolean value
// from textual representation (returns true or false)
function GetBooleanValue(text)
{
  if(text == "true")
    return true;
  else
    return false;
}

// convenience method to get textual representation
// of boolean value (returns "true" or "false")
function GetBooleanText(value)
{
  if(value == true)
    return "true";
  else
    return "false";
}

// construct empty check list
function BuildCheckList()
{
  var html_text =
    '<div id="check_list_' + uniqueID + '" style="overflow:auto; ' +
	  'border:1px #777777 solid; background-color:#FFFFFF">' +
	'</div>';
  innerHTML = html_text;
  
  // create short-hand notation for reference to check list object  
  check_list = all["check_list_" + uniqueID];
}

// set display attributes for check list
function SetDisplay()
{
  check_list.style.width = width;
  check_list.style.height = height;
}
</script>

</PUBLIC:HTC>