//############################# WIDELY USED VARS (globals, shame shame)
var searchBox;
var suggest_box;
var stat;
var nn= document.getElementById && !document.all;
var ie= (document.all );

var interestNum=null;
var nextInterest=null;
var prevInterest=null;
var maxInterests=null;
var hideMenu;
var TO=null;
var dynamicListMemebers=[];
//############################# ONLOAD FUNCTION THAT DEFINES COMMON USED VARIABLES
function searchBarElements()
{
	hideMenu=false;
	searchBox=document.getElementById("searchBox");
	suggest_box= document.getElementById("suggestBox");
	
	//SET STYLES TO BROWSER 
	//NOTE_ SAFARI HAS PROPRIETARY SEARCH BOX- USE IT by hiding our wings	
	
	if(navigator.userAgent.indexOf("Safari")!=-1)
	{	
		document.getElementById("leftCorner").style.display="none";
		document.getElementById("rightCorner").style.display="none"		
	}
	
	
	
	searchBox.onkeyup=prepCall;	
	searchBox.onfocus=focusHandler;
	searchBox.onblur=hideResults;	
}

//############################# DEFINE THE XMLHTTPREQUEST
/*
 * ###########################################################
 * ##  searchURL path should be switched if 				##
 * ##	 zephyr ever upgrades to mysql 4.x or higher		##
 * ##  use:  api/quick_search_mysql.php?search_string=		##
 * ###########################################################
 */
var xmlhttp;
var searchURL="/v2/api/quick_search_mysql.php?search_string=";
function defineXHR()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 
return xmlHttp;
}

//############################# DEFINE WHICH KEY IS PRESSED AND THEN WHAT TO DO
function prepCall(e)
{
	var keyName;
	if(e){
		keyName=e.which;
	}else
	{
		keyName=window.event.keyCode
	}
	switch (keyName)
	{
		case 40://arrow down
		selectDown();
		break;
		case 38://arrow up
		selectUp();
		break;
		case 13://enter 
		enterHandler();		
		break;
		case 27://esc
		hideResults(e);
		break;
		default:
		searchCall();
	}
}

//############################# CALL THE XMLHTTPREQUEST
function searchCall()
{
	
	//SEARCH BOX RESULTS TITLE BAR
	xmlhttp=defineXHR();

	xmlhttp.onreadystatechange=searchResults;
	xmlhttp.open("GET",searchURL+searchBox.value,true);
	xmlhttp.send(null);
			
}

//############################# PARSE RESULTS WHEN RESPONSE IS READY
function searchResults()
{
	if(xmlhttp.readyState==4)
	{
		if(xmlhttp.status==200)
		{
			//DELETE/REPLACE OLD RESULTS
			var result_wrapper=document.getElementById("search_results_wrapper");
			suggest_box.removeChild(result_wrapper);
			resetCounter();
			//RECREATE WRAPPER FOR RESULTS OBJECTS
			var result_wrapper= document.createElement("div")
			result_wrapper.id="search_results_wrapper";
			if(ie)
			{	
			
				result_wrapper.className="search_results_wrapper_IE";
			}
			if(window.XMLHttpRequest)
			{
				result_wrapper.className=""
			}
			suggest_box.appendChild(result_wrapper);
			//############################# IF NO RESULTS, TELL USER NICELY, NO RESULTS
			var noResultTest=xmlhttp.responseXML.getElementsByTagName("search_results");
			
			if(noResultTest.length==1 )
			{
				suggest_box.className="results"
				var noResultsText=noResultTest[0].getElementsByTagName("match");
				if (noResultsText.length<=0 && searchBox.value!="")
				{
					var noResultsLI=createTitlebar();
					result_wrapper.appendChild(noResultsLI);
					
					var noResultsLI_tx=document.createTextNode("Your search produced no results");
					noResultsLI.appendChild(noResultsLI_tx)
				}
			}	
			//############################# IF RESULTS, BEGIN LIST CREATION
			var resultXML=xmlhttp.responseXML.getElementsByTagName("match");
			if(resultXML.length>0)
			{
				createNewList(resultXML)
			}
			
		}
	}
}
function createTitlebar()
{
	var titleBarDiv=document.createElement("div")
	
	if(window.XMLHttpRequest)
	{
		titleBarDiv.className="result_titleBar"
		
	}
	else
	{
		titleBarDiv.className="result_titleBar_IE"
	}
	return titleBarDiv;
}

function createNewList(resultXML)
{
	var result_wrapper=document.getElementById("search_results_wrapper");
	suggest_box.className="results"
	//############################# ADD TITLE BAR
	var result_titleBar=createTitlebar()
	result_titleBar.innerHTML="Product Results";
	result_wrapper.appendChild(result_titleBar);
	maxInterests=resultXML.length
	
	
	//############################# ADD RESULTS
	for (var i = 0; i < resultXML.length; i++) {

		var image_link = resultXML[i].getAttribute("image");
		var url = resultXML[i].getAttribute("url");
		var product_name = resultXML[i].getAttribute("product_name");
		var category = resultXML[i].getAttribute("category");
		var copy = resultXML[i].getAttribute("copy");
		var priority = resultXML[i].getAttribute("priority");
		var product_mount = resultXML[i].getAttribute("product_mount");
		var model_num=resultXML[i].getAttribute("model_num");
	
		var rb = new ResultBox(image_link, url, product_name, category, copy, priority,product_mount,model_num,i);
		dynamicListMemebers.push(rb)
		
	}	
	//############################# ADD MORE RESULTS
	addMoreResultsBox()
	
}
function addMoreResultsBox()
{
	
	var result_wrapper=document.getElementById("search_results_wrapper");
	var div= document.createElement("li")
	div.id="moreResults";
	
	
	div.innerHTML+="See all products";
	div.onclick=function(){window.location="../v2/product_search.php";return false};
	var img=document.createElement("img");
	img.id="arrow";
	img.style.backgroundColor="#3d3d3d";
	img.src="images/suggestBox/results_arrow.png";
	if(window.XMLHttpRequest )
	{
		div.className="more_results";	
	}
	else
	{
		div.className="more_results_IE";
		//img.className="arrow_IE";
	}
	div.appendChild(img)
	result_wrapper.appendChild(div);
}
//############################# HIDE RESULTS BOX
function relocate(e)
{
	window.location
	
}
function focusHandler(e)
{
	searchBox.value="";
}
function hideResults(e)
{
	if(!e)
	{
		e=window.event
	}
	var tg= window.ActiveXObject ? e.srcElement : e.target;
	searchBox.value="Product Search"
	
	TO=setInterval(testMenuValidity,200)
		
}
function testMenuValidity()
{
	if(hideMenu="false")
	{
		suggest_box.className="no_results"
	}else
	{
		return;
	}
	window.clearInterval(TO);
}


//############################# ARROW KEY METHODS FOR DROP DOWN LIST
function selectDown()
{
	if (interestNum >= maxInterests-1) {
		interestNum=0;
	}
	else {
		switch (interestNum) {
			case null:
				interestNum = 0;
				break;
			default:
				interestNum++;
				break;
				
		}
	}
	var selectedElement=document.getElementById("search_result_"+ interestNum);
	selectedElement.className="darker";
	var anchorElement=document.getElementById("result_anchor_"+interestNum);
	anchorElement.className="result_anchor_selected"
	
	if(! prevInterest)
	{
		
	}else
	{
		prevInterest.className="result_box"
		prevInterest.firstChild.className="result_anchor"
	}
	prevInterest=selectedElement;
	
	
	
}
function selectUp()
{
	if (interestNum <=0) {
		interestNum=maxInterests-1;
	}
	else {
		switch (interestNum) {
			case null:
				interestNum = 0;
				break;
			default:
				interestNum--;
				break;
				
		}
	}
	
	var selectedElement=document.getElementById("search_result_"+ interestNum);
	selectedElement.className="darker"
	
	var anchorElement=document.getElementById("result_anchor_"+interestNum);
	anchorElement.className="result_anchor_selected"
	if(! prevInterest)
	{
		
	}else
	{
		prevInterest.className="result_box"
		prevInterest.firstChild.className="result_anchor"
	}
	prevInterest=selectedElement;
}
function enterHandler()
{
	var thisLI=document.getElementById(prevInterest.id);
	var aInLi=thisLI.firstChild
	window.location=aInLi
		
}

//############################# FUNCTIONS USED TO KEEP TRACKING OF GLOBAL VARIABLES
function resetCounter()
{
	 interestNum=null;
	 nextInterest=null;
	 prevInterest=null;
	 maxInterests=null;
}
//DELETE WHEN FINISHED
function trace(msg){
	var stat= document.getElementById("stat");
	if(!stat)
	{
	stat = document.createElement("div")
	stat.id = "stat"
	document.getElementById("wrapper").appendChild(stat);
	var stat_tx = document.createTextNode("stat: ");
	stat.setAttribute("style", "width:900px;height:800px;color:#fff")
	stat.appendChild(stat_tx)
	
	stat.innerHTML+=msg+"<br>"
	}else
	{
		stat.innerHTML+=msg+"<br>";
	}
}