// JavaScript Document

//global variables
var browser = navigator.appName;

/*--------------------------------------------------
definition: ajax function that will create an 
            autosuggest field

parameter: none
--------------------------------------------------*/
function autosuggest ()
{
	//create object
	var xmlHttp = ajaxFunction();
	var box = document.getElementById('autoSuggestContainer');
	var searchBox = document.getElementById('search_term').value;
	var searchCat = document.getElementById('search_cat').value;
	
	//set the container display options
	if(browser == 'Netscape')
	{
		box.style.width = '171px';
		box.style.top = '0px';
	}
	else
	{
		box.style.width = '173px';
		box.style.top = '-1px';
		box.style.left = '164px';
	}
	
	//parameters to send
	var params = 'term='+searchBox+'&cat='+searchCat;
	
	//ajax communication
	xmlHttp.onreadystatechange=function()
    {
    	if(xmlHttp.readyState==4)
      	{
			//if results were returned
			if(xmlHttp.responseText != " \n")
				box.innerHTML = xmlHttp.responseText;
			
			//if the autosuggest box is not already faded in
			if(opacity <= 0 && xmlHttp.responseText != " \n")
			{
				//set opacity to 0, then start the fade process
				box.style.display = 'block';
				clearInterval(intervalID);
				fade('autoSuggestContainer','in');
			}
			else if(opacity > 0 && xmlHttp.responseText == " \n")
			{
				hideAutoSuggest();
			}
      	}
	}
	xmlHttp.open("POST","../../../php_inc/ajax/autosuggest/autosuggest.php",true);
	xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", params.length);
	xmlHttp.setRequestHeader("Connection", "close");
  	xmlHttp.send(params);
	
	return;
}





/*--------------------------------------------------
definition: Hide the autosuggest field

parameter: none
--------------------------------------------------*/
function hideAutoSuggest()
{	
	var box = document.getElementById('autoSuggestContainer');
	clearInterval(intervalID);
	fade('autoSuggestContainer','out');
		
	return;
}





/*--------------------------------------------------
definition: create the ajax object

parameter: none
--------------------------------------------------*/
function ajaxFunction()
{
	var xmlHttp;
	try
  	{
  		// Firefox, Opera 8.0+, Safari
  		xmlHttp=new XMLHttpRequest();
  	}
	catch (e)
  	{
  		// Internet Explorer
  		try
    	{
    		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    	}
  		catch (e)
    	{
    		try
      		{
      			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      		}
    		catch (e)
      		{
      			alert("Your browser does not support AJAX!");
      			return false;
      		}
    	}
  	}
	
	return xmlHttp;
}





/*--------------------------------------------------
definition: The fade function and animateFade 
            function works together to create a fade
			in and fade out animation.

parameter: eid - element id to fade in
           direction - the direction of the fade
		               'in' or 'out'
--------------------------------------------------*/
var intervalID;
var opacity = 0;
var fadein = false;
function fade(eid,direction)
{
	//determine if the element exists
	var element = document.getElementById(eid);
	if(element == null)
		return;
		
	//if the direction is in
	if(direction == 'in')
		opacity = 0; //set opacity to 0
	//or the wrong value
	else if(direction != 'out')
		return;
		
	//set the initial opacity
	element.style.opacity = opacity/100;
	element.style.filter = 'alpha(opacity = '+opacity+')';
	
	//create a time interval that calls animate fade
	intervalID = setInterval('animateFade("'+eid+'","'+direction+'")',1);
	
	return;
}






/*--------------------------------------------------
definition: The actual animation function that will
            fade in and fade out

parameter: eid - element id to fade in
           direction - the direction of the fade
		               'in' or 'out'
--------------------------------------------------*/
function animateFade(eid,direction)
{
	//create the element object
	var element = document.getElementById(eid);
	
	//if the direction is in, add 4
	if(direction == 'in')
		opacity = opacity + 6;
	//else subtract 4
	else if(direction == 'out')
		opacity = opacity - 6;
	//else it was not the right value
	else
	{
		clearInterval(intervalID);
		return;
	}
	
	//set the opacity level for firefox or ie
	element.style.opacity = opacity/100;
	element.style.filter = 'alpha(opacity = '+opacity+')'; 
	
	//if is greater than or equal to 100 clear interval
	if(opacity >= 100 && direction == 'in')
	{
		clearInterval(intervalID);
	}
	if(opacity <= 0 && direction == 'out')
	{
		clearInterval(intervalID);
		element.style.display = 'none';
	}
		
	return;
}





/*--------------------------------------------------
definition: creates a hover in the back of each row
            on the autocomplete. change the
			background color.

parameter: over - true - mouse over
                  false - mouse out
		   id - the id of the row element to hover
--------------------------------------------------*/
function hover (over,id)
{
	var row = document.getElementById(id);
	
	//if the mouse is over
	if(over)
	{
		//change the background color
		row.style.backgroundColor = '#EFEAE0'; 
	}
	//if the mouse is out
	else
	{
		//change the background back to white
		row.style.backgroundColor = '#FFFFFF';
	}
	
	return;
}