// INITIATE GLOBAL VARIABLES:
var emails = new Array; // will be populated by calling xajax_fetchEmails() remotely
var timer = null;
var the_col = '';
var selectedRow = -1; // for highlighting the row
var numRows = 0; // for using arrow keys to navigate the list

// This function reduces the number of XAJAX calls we make
// b/c if you are continuously typing, then the timer keeps
// getting cancelled.  When you stop typing for half a second
// then we make the xajax_fetchEmails call.  Genious!
function setTimer_fetchEmails(e)
{
  // if I have typed a key in less than half a second
  //  cancel the pending xajax_fetchEmails call:
  if ( timer != null )
    clearTimeout(timer);

  // for windows and IE compatibility
  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:
    if ( selectedRow+1 < numRows )
    {
      highlightRow(selectedRow+1);
    }
    return false;
  }
  else if ( key == 38 ) // up
  {
    // up arrow clicked, let's move up the list:
    if ( selectedRow > 0 )
    {
      highlightRow(selectedRow-1);
    }
    return false;
  }
  else if ( key == 13 ) // ENTER KEY
  {
    if ( selectedRow > -1 )
    {
      document.getElementById('search_input').value = emails[selectedRow];
      clearEmails();
    }
    return false;
  }
  else if ( key == 37 || key == 39 )
    return;
 
  //  in half a second, if another key is not pressed, then
  //  fetchEmails() will be called.  fetchEmails() makes the call
  //  back to the server to fetch the data.
  timer = setTimeout("fetchEmails()", 500);
}

function fetchEmails()
{
	document.getElementById('results').innerHTML = "<br /><br /><div align='center'><img src='ajax-loader.gif' />&nbsp;&nbsp;Loading....</div><br /><br />";
	
  var email = document.getElementById('search_input').value.replace(/ +/g, "");
  // as long as we have something in the email box, call the function on the
  //  server to fetch the emails.  The server will respond with a chunk of
  //  javascript to be executed, which is an array of emails and then showEmails()
  if ( email.length > 0 ) {
	  var the_col = document.getElementById('hidden_val').value;
    xajax_fetchEmails(document.getElementById('search_input').value, the_col, 0, 15);
  }else{
    clearEmails();
  }
}
function showEmails()
{
  if ( emails.length > 0 )
  {
	  
    var aDiv = document.getElementById('results');
    var str = '<div class="srch_res"><table class="mytable" width="595px" align="center" border="0" celpadding="1" cellspacing="0">';
    // build the rows of the drop down table
    for (var i=0; i<emails.length; i++)
    {
		var countertje = i+1;
		switch (emails[i][0]){
			case "1":
				var dsp_developer = emails[i][3].replace(" ", "_");
				dsp_developer = dsp_developer.replace(" ", "_");	
				dsp_developer = dsp_developer.replace(" ", "_");
				var dsp_dev = emails[i][2].replace(" ", "_");
				dsp_dev = dsp_dev.replace(" ", "_");	
				dsp_dev = dsp_dev.replace(" ", "_");
				str += '<tr style="backgroundColor:#fff;" onmouseover="this.style.backgroundColor=\'#cccccc\';" onmouseout="this.style.backgroundColor=\'#fff\';"><td>'+countertje+'. </td><td align="left">'+emails[i][2]+'</td><td>By: '+emails[i][3]+'</td><td><a href=\"new_development/'+emails[i][1]+'/'+dsp_developer+'/'+dsp_dev+'.html\">More details</a></td></tr>';
			break;
			
			case "2":
				var dsp_developer = emails[i][3].replace(" ", "_");
				dsp_developer = dsp_developer.replace(" ", "_");
				dsp_developer = dsp_developer.replace(" ", "_");
				str += '<tr style="backgroundColor:#fff;" onmouseover="this.style.backgroundColor=\'#cccccc\';" onmouseout="this.style.backgroundColor=\'#fff\';"><td>'+countertje+'. </td><td align="left"><a href=\"developer/'+dsp_developer+'.html\">'+emails[i][3]+'</a></td></tr>';
			break;
			
			case "3":
				var dsp_developer = emails[i][3].replace(" ", "_");
				dsp_developer = dsp_developer.replace(" ", "_");	
				dsp_developer = dsp_developer.replace(" ", "_");
				var dsp_dev = emails[i][2].replace(" ", "_");
				dsp_dev = dsp_dev.replace(" ", "_");	
				dsp_dev = dsp_dev.replace(" ", "_");
				str += '<tr style="backgroundColor:#fff;" onmouseover="this.style.backgroundColor=\'#cccccc\';" onmouseout="this.style.backgroundColor=\'#fff\';"><td>'+countertje+'. </td><td align="left">'+emails[i][4]+'</td><td>'+emails[i][2]+'</td><td> By: '+emails[i][3]+'</td><td><a href=\"new_development/'+emails[i][1]+'/'+dsp_developer+'/'+dsp_dev+'.html\">More details</a></td></tr>';
			break;			
			
		}
    }
    str += '</table></div>';
    aDiv.innerHTML = str;
  }
  else {
    // clear the drop down:
    clearEmails();
	document.getElementById('results').innerHTML = "No Results.";
  }
}

// function to remove the drop down table and reset the global variables:
function clearEmails()
{
  var aDiv = document.getElementById('results');
  var div_style = GetLayerStyle('results');
  //div_style.display = 'none';
  aDiv.innerHTML = '';
}

// used when clicking a row from the drop down, used to populate the text element:
function selectEmail(email)
{
  document.getElementById('search_input').value = email;
  clearEmails();
  document.getElementById('search_input').focus();
}

// loop through all the rows, unhighlighting all except the selcted row
//   highlighting that row.  We do this by changing the className
function highlightRow( i )
{
  for (var j=0; j<numRows; j++)
  {
    if ( j == i )
      document.getElementById('emailRow'+j).className = 'emailRow_highlight';
    else
      document.getElementById('emailRow'+j).className = 'emailRow';
  }
  selectedRow = i;
}

// neat little function for getting the style object for a named element:
function GetLayerStyle(layername) {
 if (document.all) return document.all[layername].style;
 else return document.getElementById(layername).style;
}

function captureEmailKeystrokes()
{
  // must on onkeydown, onkeypress in IE sucks, IE doesn't
  // fire the event on arrow keys when using onkeypress ...
  //  which tripped me up for awhile, onkeydown works fine
  // in IE, but in firefox, returning false onkeydown doesn't stop
  // the event from happening.  SOOOO, we need onkeydown for
  // IE and onkeypress for firefox, yuck:
  if ( document.all )
    //document.getElementById('search_input').focus();
    document.getElementById('search_input').onkeydown = setTimer_fetchEmails;
  else
  //document.getElementById('search_input').focus();
   document.getElementById('search_input').onkeypress = setTimer_fetchEmails;
}