/**
 * AutoComplete Field - JavaScript Code
 *
 * This is a sample source code provided by fromvega.
 * Search for the complete article at http://www.fromvega.com
 *
 * Enjoy!
 *
 * @author fromvega
 *
 */

// global variables
var acListTotal   =  0;
var acListCurrent = -1;
var acDelay = 200;
var acURL = null;
var acSearchId	  = null;
var acResultsId	  = null;
var acSearchField = null;
var acResultsDiv  = null;
var Json_array = null;

function setAutoComplete(field_id, results_id, get_url)
{
	acSearchId  = "#" + field_id;
	acResultsId = "#" + results_id;
	acURL 		= get_url;

	// create the results div
	$("body").append('<div id="' + results_id + '"></div>');

	// register mostly used vars
	acSearchField	= $(acSearchId);
	acResultsDiv	= $(acResultsId);

	// reposition div
	repositionResultsDiv();

	// on blur listener
	acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });

	// on key up listener
	acSearchField.keyup(function (e)
	{
		// get keyCode (window.event is for IE)
		var keyCode = e.keyCode || window.event.keyCode;
		var lastVal = acSearchField.val();

		// check for an ENTER or ESC
		if(keyCode == 13 || keyCode == 27)
		{
			if(keyCode == 13)
			{
				if(acListCurrent >= 0)
					window.location=Json_array[acListCurrent][3];
			}
			clearAutoComplete();
			return;
		}

		if(updownArrow(keyCode))// check an treat up and down arrows
			return;
		// if is text, call with delay
		setTimeout(function () {autoComplete(lastVal)}, acDelay);
	});
}

// treat the auto-complete action (delayed function)
function autoComplete(lastValue)
{
	// get the field value
	var part = acSearchField.val();

	// if it's empty clear the resuts box and return
	if(part == '')
	{
		clearAutoComplete();
		return;
	}

	// if it's equal the value from the time of the call, allow
	if(lastValue != part)
		return;

	// get remote data as JSON
	$.getJSON(acURL + part, function(json){

		// get the total of results
		var ansLength = acListTotal = json.length;
		Json_array = json;

		// if there are results populate the results div
		if(ansLength > 0){

			var newData = '';

			// create a div for each result
			for(i=0; i < ansLength; i++)
			{
				if(json[i][0] != -1)
				{
					newData += '<div class="unselected">';
					if(json[i][2])
						newData += '<a href="' + json[i][3] + '"><img width="80" height="60" src="'+json[i][2]+'"></a>';
					newData += '<p><a "href="' + json[i][3] + '">'+json[i][0]+'</a><br/>'+ json[i][1]+'</p>';
					newData += '</div>';
				}
			}

			// update the results div
			acResultsDiv.html(newData);
			//acResultsDiv.css("display","block");
			acResultsDiv.fadeIn();

			// for all divs in results
			var divs = $(acResultsId + " > div");

			// on mouse over clean previous selected and set a new one
			divs.mouseover( function() {
				divs.each(function(){ this.className = "unselected"; });
				this.className = "selected";
			})

			// on click copy the result text to the search field and hide
			divs.click( function()
			{
				//acSearchField.val(this.childNodes[0].nodeValue);
				clearAutoComplete();
			});

		} else {
			clearAutoComplete();
		}
	});
}

// clear auto complete box
function clearAutoComplete()
{
	acResultsDiv.fadeOut();
	//acResultsDiv.html('');
	//acResultsDiv.css("display","none");
}

// reposition the results div accordingly to the search field
function repositionResultsDiv()
{
	// get the field position
	var sf_pos    = acSearchField.offset();
	var sf_top    = sf_pos.top;
	var sf_left   = sf_pos.left;

	// get the field size
	var sf_height = acSearchField.height();
	var sf_width  = acSearchField.width();

	// apply the css styles - optimized for Firefox
	acResultsDiv.css("position","absolute");
	acResultsDiv.css("left", sf_left - 2);
	acResultsDiv.css("top", sf_top + sf_height + 1);
	acResultsDiv.css("width", sf_width - 2);
	acResultsDiv.css("z-index", 3002);
}


// treat up and down key strokes defining the next selected element
function updownArrow(keyCode)
{
	if(keyCode == 40 || keyCode == 38)
	{

		if(keyCode == 38)
		{ // keyUp
			if(acListCurrent == 0 || acListCurrent == -1)
			{
				acListCurrent = acListTotal-1;
			}else
			{
				acListCurrent--;
			}
		}
		else
		{ // keyDown
			if(acListCurrent == acListTotal-1)
			{
				acListCurrent = 0;
			}
			else
			{
				acListCurrent++;
			}
		}

		// loop through each result div applying the correct style
		acResultsDiv.children().each(function(i)
		{
			if(i == acListCurrent)
			{
				//acSearchField.val(this.childNodes[0].nodeValue);
				this.className = "selected";
			} else
			{
				this.className = "unselected";
			}
		});

		return true;
	}
	else
	{
		// reset
		acListCurrent = -1;
		return false;
	}
}