// JavaScript Document
/*
	This is the JavaScript file for the AJAX Suggest Tutorial

	You may use this code in your own projects as long as this 
	copyright is left	in place.  All code is provided AS-IS.
	This code is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
	
	For the rest of the code visit http://www.DynamicAJAX.com
	
	Copyright 2006 Ryan Smith / 345 Technical / 345 Group.	

*/
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/html');
		}
		return http_request;
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Your Browser does not support.");
	}
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest(e) {

	if(e.keyCode!=40 && e.keyCode!=38 && e.keyCode!=13){   
		if (searchReq.readyState == 4 || searchReq.readyState == 0) {
			var str = escape(document.getElementById('txtSearch').value);	
			searchReq.open("GET", '/bin/search/search_suggest.php?search=' + str, true);
			searchReq.onreadystatechange = handleSearchSuggest; 
			searchReq.send(null);
			gl_org_text = str;
		}
	} else {
		gl_item = -1;
		var ss = document.getElementById('search_suggest')
		var A=ss.getElementsByTagName("div");
		for(i=0;i<A.length;i++)
			if(A[i].className == 'suggest_link_over')
				gl_item = i;
		
		if(e.keyCode == 38) { //up
			suggestClear();
			if(	gl_item > 0 ) {
				gl_item -= 1;
				A[gl_item].className = 'suggest_link_over';
				setSearchBoxText(gl_data_array[gl_item]);
			} else 
				setSearchBoxText(gl_org_text);
		}
		if(e.keyCode == 40) { //down
			suggestClear();
			if( gl_totalitem > 0 && gl_item == -1 )
				ss.style.visibility = "visible";
			if(	gl_item < gl_totalitem ) {
				if(	gl_item < gl_totalitem-1 )
					gl_item += 1;
				A[gl_item].className = 'suggest_link_over';
				setSearchBoxText(gl_data_array[gl_item]);
			}
		}
		//div_value.className = 'suggest_link_over';
	}

}

var gl_totalitem = 0;
var gl_item = -1;
var gl_org_text = '';
var gl_data_array = new Array(10);

//Called when the AJAX response is returned.
function handleSearchSuggest() {
	if (searchReq.readyState == 4) {
		var ss = document.getElementById('search_suggest');
		
		if ( ss ){
			ss.innerHTML = '';
			
			if ( (searchReq.responseText != null) && (searchReq.responseText.length > 0) ){
				var str = searchReq.responseText.split("\n");
				if(str.length > 1)
					ss.style.visibility = "visible";
				else
					ss.style.visibility = "hidden";
		
				var contenttmp = '';
				var display = '';
				var content = '';
				var times = '';
				var maxtimes = '';
				
				for(i=0; i < str.length - 1; i++) {
					contenttmp = str[i].split("\t");
					display = contenttmp[0];
					content = contenttmp[1];
					times = contenttmp[2];
					if( i == 0 )
						maxtimes = contenttmp[2];
					
					gl_data_array[i] = escape(content);
					
					//Build our element string.  This is cleaner using the DOM, but
					//IE doesn't support dynamically added attributes.
					var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
					suggest += 'onmouseout="javascript:suggestOut(this, ' + (i%2) + ');" ';
					suggest += 'onclick="javascript:setSearch(\'' + escape(content) + '\');" ';
					suggest += 'class="suggest_link' + (i%2) + '"><table cellpadding="0" cellspacing="0" width="100%"><tr><td>' + display + '</td>';
					suggest += '<td align="right"><table cellpadding="0" cellspacing="0" bgcolor="#c2c2c2" width="'+ (80 * parseInt(times) / parseInt(maxtimes) ) +'"><tr><td height=10></td></tr></table>';
					suggest += '</td></tr></table></div>';
					ss.innerHTML += suggest;
				}
				var suggest = '<div class="suggest_footer" align=right><a href="#" onclick="javascript:document.getElementById(\'search_suggest\').style.visibility = \'hidden\';gl_item=-1;setSearchBoxText(gl_org_text);"><img src="/skin/skin1/images/common/btn/btn_icon_close.gif" border="0"/></a></div>';
				ss.innerHTML += suggest;
						
				gl_totalitem = str.length - 1;
				gl_item = -1;
			}else{
				ss.style.visibility = "hidden";
			}
		}
	}
}


//Clear mouse over
function suggestClear() {
	var A=document.getElementById('search_suggest').getElementsByTagName("div");
	for(i=0;i<A.length-1;i++)
		A[i].className = 'suggest_link'+(i%2);
}

//Mouse over function
function suggestOver(div_value) {
	suggestClear();
	div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value, i) {
	div_value.className = 'suggest_link'+i;
}
//Click function
function setSearch(value) {
	setSearchBoxText(value);
	document.getElementById('search_suggest').innerHTML = '';
	document.getElementById('search_suggest').style.visibility = "hidden";
	gl_org_text = '';
}
function setSearchBoxText(value) {
	document.getElementById('txtSearch').value = (unescape(value)).replace("&#039;","'");
	document.getElementById('txtSearch').focus();
}