var XmlHttp;
function CreateXmlHttp()
{
	try
	{
		XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} 
		catch(oc)
		{
			XmlHttp = null;
		}
	}
	//Creating object of XMLHTTP in Mozilla and Safari 
	if(!XmlHttp && typeof XMLHttpRequest != "undefined") 
	{
		XmlHttp = new XMLHttpRequest();
	}
}

var HandleListBox = '';
var HandleTextBox = '';
var NonEvaluateText = ''; 
var HandleEvent = '';
var lbSel=-1;
var hp=0;                   //hp is for showing highlighting position, when navigating through the arrow keys in resulting data div. currently we show total 4 items max at a time without scrolling.
var totalCT=0;              //stores the actual number of records retrieved after successful ajax request.

//function used to handle event when any key is pressed on searching textbox
//listBox is the div id, where resulting data will be displayed
//textBox is the Id of the textbox on which search query data is entered 
function KeyUpText(e,listBox,textBox,Value,HasNonEvaluateValue)
{
    if(document.getElementById(textBox).value.length>2)
    {
        HandleListBox = listBox;
        HandleTextBox = textBox;
        NonEvaluateText = HasNonEvaluateValue

        if(window.event) 
        {
            HandleEvent = e.keyCode; 
        }
        else if(e.which) 
        {
            HandleEvent = e.which; 
        }   

        var key=HandleEvent;
        var lb= document.getElementById(listBox).getElementsByTagName('div'); 

        if(key == 38 && lbSel>-1 && lbSel<totalCT) // up arrow key
        {
            if(lbSel==0)    //if reached at top(first row of resulting data)
            {
                return;
            }
            if(hp==1)
            {
                document.getElementById(listBox).scrollTop=parseInt(document.getElementById(listBox).scrollTop)-23;
            }
            if(hp>1)
            {
                hp--;
            }
            
            lb[lbSel].className='item';
            lbSel--;
            DynamicDisplaySelectedTextNoHide(listBox, textBox, key);
            return;
        }
        else if (key == 40 && lbSel<totalCT-1) //down arrow key
        {
            if(hp==4)
            {
                document.getElementById(listBox).scrollTop=parseInt(document.getElementById(listBox).scrollTop)+23;
            }
            if(hp<4)
            {
                hp++;
            }
            if(lbSel>-1) 
            {
                lb[lbSel].className='item';
            }
            
            lbSel++;  
            DynamicDisplaySelectedTextNoHide(listBox, textBox, key);    
            return;
        }
        else if(key == 40 && totalCT>0 && lbSel==totalCT-1)
        {
        
        }
        else    //finally time to get data
        { 
            var searchText = document.getElementById(textBox).value;
            var ctUrl = "";
            lbSel=-1; hp=0;document.getElementById(listBox).scrollTop=0;
            var time=Math.random();
          
            if(Value == 1)          	 
             ctUrl = "Ajax.aspx?searchCampusCollege=" + encodeURIComponent(searchText)+"&"+time;
            if(Value == 2)
             ctUrl = "Ajax.aspx?searchInternsCampusCollege=" + encodeURIComponent(searchText)+"&"+time;         	 
            CreateXmlHttp();            	
            if(XmlHttp)
            {
                XmlHttp.onreadystatechange = getResultData;            		
                XmlHttp.open("GET", ctUrl,  true);
                XmlHttp.send(null);	
            }  
        }
    }
    else
    {
        document.getElementById(listBox).style.display ='none';
    }
}
     
   
// function used to fill actual data in the result div.
//it sets the complete HTML, value, CSS etc.
function fillDivWithData(ListItems)
{
    var listBox = document.getElementById(HandleListBox);
    var obj = document.getElementById(HandleTextBox);
    var textValueId = '';    	
    listBox.innerHTML = null;
    listText = ListItems.getElementsByTagName('College');	    
    listBox.className = 'autocomplete1';
    totalCT=listText.length;

    var tbl="<table>";
    for (var count = 0; count < listText.length; count++)
    {
        listTextValue = GetInnerText(listText[count]);		
        tbl=tbl+"<tr><td><div class='item' onmouseover=this.className='itemHighLight' onmouseout=this.className='item' onclick=ClickItem(this.innerHTML,'ctl00_cphContent_divAutoComp','ctl00_cphContent_txtSearch');>"+listTextValue+"</div></td></tr>";
    }
    tbl=tbl+"</table>";
    document.getElementById('ctl00_cphContent_divAutoComp').innerHTML=tbl;
    document.getElementById('ctl00_cphContent_divAutoComp').className = 'autocomplete1';

    var matchCount = listText.length;      	
    if (matchCount > 0 && obj.value!='')
    {
        listBox.style.display = 'block';
    }
    else if (matchCount > 0)
    {
        listBox.style.display = 'block';
    }
    else
    {     
        listBox.style.display = 'none';
    }
    if(obj.value == "" || (NonEvaluateText !=null && NonEvaluateText!='')) //if nothing in textbox then hide the listbox
    {
        listBox.style.display = 'none'; 
    }
} 

// function called, when request is sent to server for retrieving data to fill the div.
// when data is retrieved, this XML data is passed to another function to fill the div.
function getResultData()
{
    if(XmlHttp.readyState == 4)
    {
        if(XmlHttp.status == 200)
        {	  
            fillDivWithData(XmlHttp.responseXML.documentElement);
        }
        else
        {
            alert("There was a problem retrieving data from the server." );
        }
    }	
}

// function called, when any item is clicked in the result div.
// it fills the main textbox with items value.
function ClickItem(cityname,listBox,obj)
{
    listBox = document.getElementById(listBox); 
    textBox = document.getElementById(obj);        
    textBox.value = cityname;
    listBox.style.display = 'none'; 
    textBox.focus();
    document.getElementById('ctl00_cphContent_hdnLastFocus').value = 0;
}
   
// function is called when up/down arrow keys are pressed, to navigation purpose.
// it sets the appropriate CSS to the selected/highlighted item, as well fills the main textbox with the highlighted value.
function DynamicDisplaySelectedTextNoHide(listBox, obj, key)
{
    listBox = document.getElementById(listBox); 
    if(lbSel>-1)
    {       
       listBox =listBox.getElementsByTagName('div'); 
       textBox = document.getElementById(obj);       
       listBox[lbSel].className='itemHighLight';
       textBox.value = listBox[lbSel].innerHTML; 
    }
    else
    {
        listBox.style.display = 'none'; 
    }
    if(key == null || key == 0) 
    {
        listBox.style.display = 'none'; 
    }
}
 
//Retrieves the actual HTML content of node
function GetInnerText (node)
{
    if(node)
    {
        return (node.textContent || node.innerText || node.text);	 
    }
}