var autocomplete_game_lastval = 'go to a game...';
var autocomplete_game_selectedindex = 0;
var autocomplete_game_gameids = [];
var autocomplete_game_loadTimer = 0; // Timer off
var autocomplete_game_suggestionHtml = []; // Associate array (key = text, value = suggestion html)

function autocomplete_game_keyup(inEvent, inDialogX, inDialogY) {

	// Position the dialog
	dialog = document.getElementById('autocomplete_game_dialog');
	dialog.style.left = inDialogX + 'px';
	dialog.style.top = inDialogY + 'px';

	// Redirect according to keycode
	var keyCode = (window.event)?window.event.keyCode:inEvent.which;
	if (keyCode == 13) // Enter
		autocomplete_game_key_enter();
	else if (keyCode == 27) // Escape
		autocomplete_game_key_escape();
	else if (keyCode == 38) // Up
		autocomplete_game_key_updown(-1);
	else if (keyCode == 40) // Down
		autocomplete_game_key_updown(1);
	else // Input
		autocomplete_game_key_other();
	
	return true;
		
}

function autocomplete_game_key_enter() {

	// Hide dialog and blur input in case user returns to this page
	document.getElementById('autocomplete_game_dialog').style.display = 'none';
	document.getElementById('autocomplete_game_input').blur();

	// Forward to the game listing
	window.location = '/pbbg/index.php?id=' + autocomplete_game_gameids[autocomplete_game_selectedindex];
	
}

function autocomplete_game_key_escape() {

	// Hide dialog and blur input in case user returns to this page
	document.getElementById('autocomplete_game_dialog').style.display = 'none';
	
}

function autocomplete_game_key_updown(inMove) {

	// Get the dialog
	var dialog = document.getElementById("autocomplete_game_dialog");

	// Do nothing if the dialog is hidden
	if (dialog.style.display != 'block')
		return false;
		
	// Get the new index and stop if out-of-bounds
	var newIndex = autocomplete_game_selectedindex + inMove;
	if (newIndex < 0 || newIndex >= autocomplete_game_gameids.length)
		return true;
	
	// Update currently selected
	autocomplete_game_selectedindex = newIndex;
	
	// Unhighligh the old option and highlight the new option
	autocomplete_game_highlightselected();
	
}

function autocomplete_game_key_other() {

	// Get the dialog div
	var dialog = document.getElementById("autocomplete_game_dialog");

	// Get the new and old textbox values
	var newValue = document.getElementById('autocomplete_game_input').value.toLowerCase();
	var oldValue = autocomplete_game_lastval.toLowerCase();
	autocomplete_game_lastval = newValue;
	
	// Close the dialog if the box is empty
	if (newValue == '') {
		dialog.style.display = 'none';
		return true;
	}
	
	// Do nothing if the textbox value hasn't changed (i.e. handle non-printing keystrokes)
	if (newValue == oldValue)
		return true;
	
	// Now we are loading suggestions
	
	// Show loading notification
	buildHTML  = '<div class="autocomplete_game_dialog_loading">';
	buildHTML += '<img src="/images/loading.gif" style="height: 28px; width: 28px;" />';
	buildHTML += '</div>';
	dialog.innerHTML = buildHTML;
	dialog.style.display = 'block';
	
	// Restart load suggestion timer
	// This timer minimizes the number of requests made to the server
	// as a user types in part of a game name
	autocomplete_game_restartLoadTimer();
	
}



function autocomplete_game_restartLoadTimer() {

	// Start loading suggestions after half a second
	// Restart timer on keystrokes within that timeframe
	autocomplete_game_loadTimer = 500;
	
	// Start the timer if it is off
	if (autocomplete_game_loadTimer > 0)
		autocomplete_game_countdown();

}



function autocomplete_game_countdown() {
	
	// Decrement countdown timer
	autocomplete_game_loadTimer -= 50;
	
	// Set the timer for next iteration, or load suggestions if finished
	if (autocomplete_game_loadTimer > 0)
		setTimeout("autocomplete_game_countdown()", 50);
	else
		autocomplete_game_loadsuggestions();
	
}
	

function autocomplete_game_loadsuggestions() {

	// Get the current textbox value
	var textValue = document.getElementById('autocomplete_game_input').value.toLowerCase();

	// Get the dialog div
	var dialog = document.getElementById("autocomplete_game_dialog");
	
	// Quit if the text is empty
	if (textValue == '')
		return true;
	
	// Have these suggestions already been loaded?
	if (autocomplete_game_suggestionHtml[textValue] !== undefined) {
		// Set dialog contents and exit
		dialog.innerHTML = autocomplete_game_suggestionHtml[textValue];
		return true;
	}
	
	// Begin AJAX request
	var http;
	if (window.XMLHttpRequest)
		http = new XMLHttpRequest();
	else if (window.ActiveXObject)
		http = new ActiveXObject("Microsoft.XMLHTTP");
	http.open('GET', 'http://www.pbbgwarp.com/ajax/mainpage-autogame.php?q=' + encodeURIComponent(textValue));	
	http.onreadystatechange = function () {

		// When ready with data
		if (http.readyState == 4) {

			// Success
			if (http.status == 200) {
				
				// Build HTML and set for dialog
				buildHtml = '';
				var root = http.responseXML.getElementsByTagName("matches").item(0);
				
				// Are there no matches?
				if (root.getElementsByTagName("match").length == 0) {
					buildHtml = '<div class="autocomplete_game_dialog_nomatches">No matches found.</div>';
					dialog.innerHTML = buildHtml;
				}
				else {
				
					// Add matches to display
					for (var i = 0; i < root.getElementsByTagName("match").length; i++) {
						var match = root.getElementsByTagName("match")[i];
						buildHtml += '<a class="autocomplete_game_dialog_match" href="/pbbg/index.php?id=' + match.getAttribute("gameid") + '">';
							buildHtml += '<div>';
								buildHtml += '<div class="autocomplete_game_dialog_match_left">';
									buildHtml += autocomplete_highlightsubstring(match.getAttribute("title"), document.getElementById('autocomplete_game_input').value);
								buildHtml += '</div>';
								buildHtml += '<div class="autocomplete_game_dialog_match_right">';
									buildHtml += match.getAttribute("numfans") + ' fans';
								buildHtml += '</div>';
								buildHtml += '<div class="clr"></div>';
							buildHtml += '</div>';
							buildHtml += '<div class="autocomplete_game_dialog_match_theme">';
								buildHtml += match.getAttribute("theme");
							buildHtml += '</div>';
						buildHtml += '</a>';
					}
					
					// Add matches to array
					autocomplete_game_gameids = [];
					for (var i = 0; i < root.getElementsByTagName("match").length; i++) {
						var match = root.getElementsByTagName("match")[i];
						autocomplete_game_gameids.push(match.getAttribute("gameid"));
					}
					
					// Set dialog contents
					dialog.innerHTML = buildHtml;
					
					// Reset the selection option
					autocomplete_game_selectedindex = 0;
					autocomplete_game_highlightselected();

					// Save the dialog contents
					autocomplete_game_suggestionHtml[textValue] = buildHtml;
					
				}
				
				
			}
		}
	}
	http.send(null);
	
	
}

function autocomplete_game_highlightselected() {

	// Unhighlight all
	for (i = 0; i < dialog.childNodes.length; i++)
		dialog.childNodes[i].className = 'autocomplete_game_dialog_match';
		
	// Highlight selected
	dialog.childNodes[autocomplete_game_selectedindex].className = 'autocomplete_game_dialog_match_selected';
	
}

function autocomplete_highlightsubstring (inString, inSubstring) {
	
	// Highlight the first matching term
	var outString = '';
	var highlighted = false;
	
	// Get terms array (ex: Age of Empires, of Empires, Empires)
	var words = inString.split(' ');
	var terms = [];
	for (i = 0; i < words.length; i++) {
		term = words[i];
		for (j = i + 1; j < words.length; j++) {
			term += ' ' + words[j];
		}
		terms.push(term);
	}
	
	// Find the first matching term
	for (i = 0; i < terms.length; i++) {
		if (inSubstring.toLowerCase() == terms[i].substring(0, inSubstring.length).toLowerCase()) {
		
			// Get the first part of the game title (unhighlighted)
			termStart = '';
			if (i > 0)
				termStart = inString.substring(0, inString.length - terms[i].length);
			
			// Set the final string
			outString = termStart + '<span style="text-decoration: underline;">' + terms[i].substring(0, inSubstring.length) + '</span>' + terms[i].substring(inSubstring.length);
			break;
		}			
	}
	
	return outString;

}


// Hide game and member dialogs on click
globalOnclickCode += "document.getElementById('autocomplete_game_dialog').style.display = 'none';";