suggestion_layer = 9999;
/**
 * change class name and image for filed and image on focus search field
 * 
 * @param direction
 * @param text
 * @return
 */
function searchFocus(direction, text) {
	// change suggestion box
	document.getElementById('suggestion_box').style.textAlign = direction;
	document.getElementById('suggestion_box').innerHTML = text;
	document.getElementById('suggestion_box').style.visibility = 'visible';
}
/**
 * change class name and image for filed and image on blur search field
 * 
 * @return
 */
function searchBlur() {
	// change class name for search bar
	document.getElementById('searchField').className = 'focusSearchField';

	// change search icon
	document.getElementById('searchBar').src = 'images/searchbar.jpg';
}
/**
 * change css of row when click on up - down keys
 * 
 * @param keyword
 * @param e
 * @param suggestion_word
 * @return
 */
function suggestion(keyword, e, suggestion_word) {
	if (keyword.length > 0) {
		// get the keyboard value by browser type
		var browserName = navigator.appName;
		if (browserName == 'Microsoft Internet Explorer')
			key = event.keyCode;
		else
			key = e.which;

		if (key == 40 || key == 38) {
			if (key == 40) {
				// change layer for suggestion row
				suggestion_layer++;
				if (document.getElementById(suggestion_layer)) {
					table_rows = 10000 + document
							.getElementById('suggestion_table').rows.length - 1;
					document.getElementById(suggestion_layer).className = 'mouseOverRow';
					if (document.getElementById(suggestion_layer - 1))
						document.getElementById(suggestion_layer - 1).className = 'suggestion_row';

					// change layer id in case its last row on suggestion
					if (suggestion_layer == 10000) {
						document.getElementById(table_rows).className = 'suggestion_row';
					}
					document.getElementById('searchField').value = document
					.getElementById(suggestion_layer).firstChild.nodeValue;
				} else
					suggestion_layer = 9999;
			}
			if (key == 38) {
				// check if in first row
				if (suggestion_layer == 10000) {
					table_rows = 10000 + document
							.getElementById('suggestion_table').rows.length - 1;
					document.getElementById(table_rows).className = 'mouseOverRow';
					document.getElementById(suggestion_layer).className = 'suggestion_row';
					suggestion_layer = table_rows;
					document.getElementById('searchField').value = document
							.getElementById(suggestion_layer).firstChild.nodeValue;
				} else {
					suggestion_layer--;
					if (document.getElementById(suggestion_layer)) {
						table_rows = 10000 + document
								.getElementById('suggestion_table').rows.length - 1;
						document.getElementById(suggestion_layer).className = 'mouseOverRow';
						if (document.getElementById(suggestion_layer + 1))
							document.getElementById(suggestion_layer + 1).className = 'suggestion_row';
						document.getElementById('searchField').value = document
								.getElementById(suggestion_layer).firstChild.nodeValue;

					} else
						suggestion_layer++;
				}
			}

		} else {
			ajaxPageNoLoading('suggestion_box', 'ajax/suggestion.ajax.php',
					'name=' + keyword);
		}
	} else
		document.getElementById('suggestion_box').innerHTML = suggestion_word;
}
/**
* change the table row on mouse over and change search text field
**/
function mouseOverSuggestion(id, baby_name) {
	id.className = 'mouseOverRow';
	document.getElementById('searchField').value = id.firstChild.nodeValue;
}
function mouseOutSuggestion(id) {
	id.className = 'suggestion_row';
}
/**
* sumbit form by javascript
* @parm form_id
**/
function formSubmit(form_id) {
	document.search_form.submit();
}
/**
* empty suggestion box on blur mouse
**/
function emptySuggestionBox()
{
	suggestion_layer = 9999;
	document.getElementById('suggestion_box').innerHTML = '';
	document.getElementById('suggestion_box').style.visibility = 'hidden';
}