// +------------------------------------------------------------------------+
// | dropbox                                                                |
// +------------------------------------------------------------------------+
// | Copyright (c) 2005 David Koopman                                       |
// | Authors       David Koopman                                            |
// | Web           http://www.modphp.org/                                   |
// +------------------------------------------------------------------------+
// | This source file is freeware. You must keep this header in tact,       |
// | but are free to modify the source and use in any non-profit or         |
// | commercial application.                                                |
// +------------------------------------------------------------------------+

var dropboxselectedRow = -1;
var dropboxNumRows = 0;
var dropboxAnchor;
var dropboxChoices = new Array();

// anchor must be the id of a text input form element
// choices must be an array of strings to choose from
// optionally, you may call this function and set anchor and/or choices to null
// and this function operates as a clearDropbox function...  will remove it.
function dropbox(anchor, choices)
{
  // GET RID OF ANY OTHER BOX FIRST:
  var dropbox = document.getElementById('dropbox');
  if ( dropbox )
  {
    document.getElementsByTagName('body')[0].removeChild(dropbox);
  }

  if ( choices == null || choices.length == 0 ) {
    dropboxselectedRow = -1;
    dropboxNumRows = 0;
    dropboxAnchor = null;
    dropboxChoices = new Array();
    return;
  }

  // set the global vars:
  dropboxChoices = choices;
  dropboxAnchor = anchor;

  // get the anchor object:
  anchor = document.getElementById(anchor);
  if ( ! anchor )
    return;
  var val = anchor.value.toLowerCase();

  dropbox = document.createElement('div');
  dropbox.setAttribute ('id' , 'dropbox');

  document.getElementsByTagName('body')[0].appendChild(dropbox);
  dropbox = document.getElementById('dropbox');
  dropbox_style = (document.all) ? document.all['dropbox'].style : document.getElementById('dropbox').style;

  dropbox_style.display = 'none';
  dropbox_style.border = '2px inset blue';
  dropbox_style.position = 'absolute';
  dropbox_style.backgroundColor = 'white';
  dropbox_style.padding = '2px';

  var toppos = 100;
  var leftpos = 95;
  do {
    anchor     = anchor.offsetParent;
    leftpos += anchor.offsetLeft;
    toppos  += anchor.offsetTop;
  } while (anchor.tagName != 'BODY');
  toppos += 24;

  dropbox_style.left = leftpos+'px';
  dropbox_style.top = toppos+'px';
  var str = '<table>';
  var cnt = 0;
  for (var i=0; i<dropboxChoices.length; i++)
  {
    if ( val.length==0 || (dropboxChoices[i].substring(0, val.length).toLowerCase() == val && dropboxChoices[i].length > val.length) )
    {
      str += '<tr id="droprow'+cnt+'" class="droprow" onMouseOver="highlightRow('+cnt+')" onClick="dropboxSelect('+cnt+')"><td id="droptd'+cnt+'">';
      str += dropboxChoices[i];
      str += '</td></tr>';
      cnt++;
    }
  }
  str += '</table>';
  dropbox.innerHTML = str;
  dropboxNumRows = cnt;
  if ( dropboxNumRows > 0 )
    dropbox_style.display = 'inline';
  dropboxselectedRow = -1;
}

function dropbox_del()
{
  dropbox();
}

function dropboxSelect(i)
{
  var anchor = document.getElementById(dropboxAnchor);
  if ( ! anchor )
    return;
  anchor.value = document.getElementById('droptd'+i).innerHTML; 
  dropbox(); // this removes the dropbox from the page
  anchor.focus();
}

function highlightRow( i )
{
  for (var j=0; j<dropboxNumRows; j++)
  {
    if ( j == i )
      document.getElementById('droprow'+j).className = 'droprow_highlight';
    else
      document.getElementById('droprow'+j).className = 'droprow';
  }
  dropboxselectedRow = i;
}

function dropboxKeystroke(e)
{
  if ( e == null )
      e = window.event;
  var key = ( e.keyCode > 0 ? e.keyCode : e.which );
  // if down or up arrow, move up or down the list instead!
  if ( key == 40 ) // down
  {
    // down arrow clicked, let's move down the list:
// document.getElementById('outdiv').innerHTML += " "+dropboxselectedRow+","+dropboxNumRows; // debug line
    if ( dropboxselectedRow+1 < dropboxNumRows )
    {
      highlightRow(dropboxselectedRow+1);
    }
    return false;
  }
  else if ( key == 38 ) // up
  {
    // up arrow clicked, let's move up the list:
    if ( dropboxselectedRow > 0 )
    {
      highlightRow(dropboxselectedRow-1);
    }
    return false;
  }
  else if ( key == 13 ) // ENTER KEY
  {
    if ( dropboxselectedRow > -1 )
    {
      document.getElementById(dropboxAnchor).value = document.getElementById('droptd'+dropboxselectedRow).innerHTML; 
      dropbox(dropboxAnchor, dropboxChoices);
    }
    return false;
  }
  else if ( key == 37 || key == 39 )
    return true;
  
  setTimeout("dropbox(dropboxAnchor, dropboxChoices);", 100);
}

function dropboxInit(elementId, choiceArrayName)
{
  document.getElementById(elementId).onfocus = function() { setTimeout("dropbox('"+elementId+"', "+choiceArrayName+");", 300); };
  document.getElementById(elementId).onblur = function() { setTimeout('dropbox()', 200); }
  if ( document.all )
    document.getElementById(elementId).onkeydown = dropboxKeystroke;
  else
    document.getElementById(elementId).onkeypress = dropboxKeystroke;
}