<PUBLIC:HTC URN="searchtext">

<PUBLIC:PROPERTY NAME="value" />
<PUBLIC:PROPERTY NAME="size" />
<PUBLIC:PROPERTY NAME="maxlength" />
<PUBLIC:PROPERTY NAME="active" />

<PUBLIC:METHOD NAME="SetValue" />
<PUBLIC:METHOD NAME="GetValue" />
<PUBLIC:METHOD NAME="SetActive" />
<PUBLIC:METHOD NAME="GetActive" />
<PUBLIC:METHOD NAME="focus" />
<PUBLIC:METHOD NAME="OpenFavoritesListDisplay" />
<PUBLIC:METHOD NAME="CloseFavoritesListDisplay" />
<PUBLIC:METHOD NAME="SetDisplayContext" />

<PUBLIC:EVENT ID="KeyDown" NAME="onsearchkeydown" />

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

<script language="VBScript" src="vb_utils.js"></script>
<script language="JavaScript" src="ui_utils.js"></script>
<script language="JavaScript" src="external_io.js"></script>
<script language="JavaScript" src="spinbox.js"></script>
<script language="JavaScript" src="search_index.js"></script>
<script language="JavaScript" src="math_utils.js"></script>

<script language="JavaScript">
// global constants and variables
var DEFAULT_SIZE = 35;
var DEFAULT_MAXLENGTH = 127;
var MAX_NUM_FAVORITES_DISPLAYED = 12;
var initialized = false;

// initialize the entire search text area
function DoInit()
{
  SetDefaults();  
  BuildSearchText();
  SetDisplay();
  
  initialized = true;
  favorites_list = null;
}

// set up defaults for properties when the user
// did not specify the value
function SetDefaults()
{
  if(value == null)
    value = "";
  if(size == null)
    size = DEFAULT_SIZE;
  if(maxlength == null)
    maxlength = DEFAULT_MAXLENGTH;
  if(active == null)
    active = "true";
}

function OpenFavoritesListDisplay()
{
  if(favorites_list == null)
    return;
   CreateFavoritesList();
  // fill in the contents of favorites list
  SetListItems(favorites_list, GetFavoriteItems()); 
  
  // size the list according to number of items in the list
  var num_of_items = GetNumOfListItems(favorites_list);
  favorites_list.size = GetFavoritesListSize(num_of_items);

  favorites_list.style.display = "";
  
  // if text already entered to search text area
  // matches text in the list, select it
  var text = GetTextBox(search_text_item);
  SelectMatchInFavoritesList(text);
  external_element.all["favorites_list_id"].focus();
}

function CloseFavoritesListDisplay()
{
  if(favorites_list == null)
    return;
  favorites_list.style.display = "none";
}

function IsFavoritesListVisible()
{
  if(favorites_list == null)
    return false;
  if(favorites_list.style.display == "")
    return true;
  return false;
}

function SetDisplayContext(el)
{
  el.innerHTML += '<span id="favorites" width="0" height="0"></span>';
  external_element = el.all["favorites"];
  CreateFavoritesList();
}

function CreateFavoritesList()
{
  external_element.innerHTML =
    '<select id="favorites_list_id" size="12" ' +
	'  style="background-color:#FFFFDD; position:absolute; display:none;">' +
	'</select>';
	
  favorites_list = external_element.all["favorites_list_id"];

  favorites_list.attachEvent("onclick", OnFavoritesListClick);
  
  favorites_list.attachEvent("onchange", OnFavoritesListChange);
  favorites_list.attachEvent("onkeypress",OnFavoritesListKeyPress);
  

  
  // align size and location of popping up
  // favorites list to search text box
  var st = search_text_item_id;
  var ot = st.offsetTop;
  var ol = st.offsetLeft;
  var ow = st.offsetWidth;
  var oh = st.offsetHeight;
  var obw = down_arrow.offsetWidth;
  var op = st.offsetParent;

  ol = down_arrow.offsetLeft - st.offsetWidth;

  // Note: hardcoding offset of top and left
  // position needed to acount for top and left
  // margin of parent window 

  ot += 2;  
  var style = favorites_list.style;	
  style.top = ot + oh;
  style.left = ol;
  style.width = ow + obw + 2;
  
    	
  // fill in the contents of favorites list
  SetListItems(favorites_list, GetFavoriteItems()); 
  
  // size the list according to number of items in the list
  var num_of_items = GetNumOfListItems(favorites_list);
  favorites_list.size = GetFavoritesListSize(num_of_items);
}

function GetFavoritesListSize(num_items)
{

  if(num_items < 3)
    return 2;
  if(num_items < MAX_NUM_FAVORITES_DISPLAYED)
    return num_items;
  return MAX_NUM_FAVORITES_DISPLAYED;
}

function SelectMatchInFavoritesList(text_val)
{
  if(favorites_list == null)
    return;

  var len = text_val.length;
  
  if(len > 0)
  {
    var items = favorites_list.options;
  
    for(var i = 0; i < items.length; i++)
    {
      var item_val = items[i].value;
	
      if(item_val.toUpperCase().substring(0, len) ==
	     text_val.toUpperCase().substring(0, len))
	  {
	    SetListBox(favorites_list, item_val);
	    return true;
	  }
    }
  }
  
  ClearListSelection(favorites_list);
  return false;
}

function OnSearchTextKeyDown()
{
  // if Enter key is pressed...
  if(event.keyCode == 13)
  {
    if(IsFavoritesListVisible())
    {
      if(GetListSelection(favorites_list) >= 0)
	    SetTextBox(search_text_item, GetListBox(favorites_list));

	  CloseFavoritesListDisplay();
    }
    else
      KeyDown.fire();
  }

  // if ESC key is pressed...
  if(event.keyCode == 27)
    CloseFavoritesListDisplay();
}

function OnSearchTextKeyUp()
{
  var text = GetTextBox(search_text_item);
  SelectMatchInFavoritesList(text);
}

function OnDownArrowClick()
{
  if(IsFavoritesListVisible())
    CloseFavoritesListDisplay();
  else
    OpenFavoritesListDisplay();
}

function OnDownArrowKeyDown()
{
  // "event.keyCode == 40" is used for Down arrow Key pressed and
  // "event.Keycode == 13" is used for Enter Key pressed
  // if It is Down arrow and it is Enter Key then the  FavoritesList is dropped 
  //  we can select the required favorite

     
  if(event.keyCode == 40|| event.keycode == 13)
   {
       OpenFavoritesListDisplay();
       favorites_list.focus();
   }

  // if Enter ESC key is pressed while
  // down arrow has a focus...
  if(event.keyCode == 27)
  {
    CloseFavoritesListDisplay();
    search_text_item.focus();
  }
}

function OnFavoritesListClick()
{
   SetTextBox(search_text_item, GetListBox(favorites_list));
   CloseFavoritesListDisplay();
   search_text_item.focus();
}

// OnFavoritesKeyPress is used when the user presses the Favorites by using spacebar
// then the favorites dropdown list will be closed and
// the focus will be on search_text_item.

function OnFavoritesListKeyPress()
{
   SetTextBox(search_text_item, GetListBox(favorites_list));
   CloseFavoritesListDisplay();
   search_text_item.focus();
}

function OnFavoritesListChange()
{
   SetTextBox(search_text_item, GetListBox(favorites_list));
}


// retrieve value property
function SetValue(new_value)
{
  value = new_value;
  if(initialized)
	search_text_item.value = value;
}

// set value property
function GetValue()
{
  if(initialized)
    value = search_text_item.value;
  return value;
}

function SetActive(new_value)
{
  if(new_value == true)
  {
    active = "true";
	down_arrow.style.display = "";
  }
  else
  {
    active = "false";
	down_arrow.style.display = "none";
  }
}

function GetActive()
{
  var active_value = false;  
  if(active == "true")
    active_value = true;
	
  return active_value;
}

function focus()
{
  //search_text_item.focus();
}

// construct the entire search text area with
// text box, down arrow button, and favorites list,
// then attach necessary events
function BuildSearchText()
{
  // Note: uniqueID is used to get unique string for each instance of spinbox
  // ('uniqueID' is element's property as extension to DHTML object model)
  var html_text =
    '<span id="search_text_area_' + uniqueID + '">' +
	'  <input onKeyDown="javascript:return KeyCheck()" type="text" id="search_text_item_id" ' +
	'    size="' + size + '" maxlength="' + maxlength + '">' +
	'  <button id="down_arrow_id" class="button_style4" style="position:relative;" title="' +
	/*IDS_DISPLAY_FAVORITES*/'Anzeige der Favoriten' +
	'">' +
	'    <img src="Images/down_arrow.gif"/>' +
	'  </button>' +
	'</span>';
	
  innerHTML = html_text;
  
  // create short-hand notation for reference to elements within search text.
  // all values (search_text_area, search_text, down_arrow & favorites_list)
  // will become element's attributes.
  search_text_area = all["search_text_area_" + uniqueID];
  search_text_item = search_text_area.all["search_text_item_id"];
  down_arrow = search_text_area.all["down_arrow_id"];
  
  // attach events to appropriate elements within this component
  search_text_item.attachEvent("onkeydown", OnSearchTextKeyDown);
  search_text_item.attachEvent("onkeyup", OnSearchTextKeyUp);

  down_arrow.attachEvent("onclick", OnDownArrowClick);
  down_arrow.attachEvent("onkeydown", OnDownArrowKeyDown);
    
  if(active == "false")
    down_arrow.style.display = "none";
}

// set display attributes for all elements
// (sizes, positions, etc.)
function SetDisplay()
{	
  // adjust down arrow's size
  // and position
  down_arrow.style.top = -1;
  down_arrow.style.left = -1;
  down_arrow.style.width = 25;
  down_arrow.style.height = 19;
}
</script>

</PUBLIC:HTC>
