/**
 * 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 acResultsURL 	= null;
var acResultsData = new Array;

function setAutoComplete( field_id, results_id, get_url, ll_url ) {
	// initialize vars
	acSearchId  = "#" + field_id;
	acResultsId = "#" + results_id;
	acURL 			= get_url;
	acResultsURL = ll_url;
	
	// create the results div
	$("body").append('<div class="jquery-results" id="' + results_id + '"></div>');

	// register mostly used vars
	acSearchField	= $(acSearchId);
	acResultsDiv	= $(acResultsId);
	
	// 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 an treat up and down arrows
		if( updownArrow(keyCode) ) {
			return;
		}
		
		// check for an ENTER or ESC
		if(keyCode == 13 || keyCode == 27) {
			clearAutoComplete();
			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;
	}
	
	var url = acURL + encodeURIComponent(part);
	if( selected_category_id ) {
		url += '&category_id='+ selected_category_id;
	}
	if( selected_attribute_id ) {
		url += '&attribute_id='+ selected_attribute_id;
	}
//	alert(url);
	
	// get remote data as JSON
	$.getJSON(url, function(json) {
		
		if( !json || typeof(json['totalCount']) == 'Undefined' ) {
			clearAutoComplete();
			return;
		}
		
		// get the total of results
		var ansLength = acListTotal = json['totalCount'];
		
		// if there are results populate the results div
		if( ansLength > 0 ) {
			// reposition div
			repositionResultsDiv();
			
			var newData = '';
			var source 	= json['data'];
			var page 		= json['page'];
			
			// create a div for each result
			for( i in source ) {
				newData += '<div class="unselected" onmouseover="acListCurrent='+ i +';" onclick="gotoUrlAutoComplete('+ i +')">' + source[i]['title'] + '</div>';
				
				if( page == 'search' ) {
					if( source[i]['link_url'] ) {
						acResultsData[i] = source[i]['link_url'];
					}
					else {
						acResultsData[i] = acResultsURL
						+ '&page=shop.browse&category_id='+ selected_category_id +'&attribute_id='
						+ selected_attribute_id +'&keyword='+ encodeURIComponent(source[i]['title'])
						;
					}
				}
				else {
					if( source[i]['link_url'] ) {
						acResultsData[i] = source[i]['link_url'];
					}
					else {
						acResultsData[i] = acResultsURL
						+ '&page=shop.product_details&flypage=shop.flypage&category_id='
						+ source[i]['category_id'] +'&product_id='+ source[i]['product_id']
						;
					}
				}
			}
			
			// update the results div
			if( acListTotal > 10 ) {
				acResultsDiv.css("height","200px");
			}
			else {
				acResultsDiv.css("height","auto");
			}
			acResultsDiv.html(newData);
			acResultsDiv.css("display","block");
			
			// 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.html('');
	acResultsDiv.css("display","none");
}

// clear auto complete box
function gotoUrlAutoComplete( index ) {
	if( typeof(index) == 'undefined' ) {
		index = acListCurrent;
	}
	
	if( index != -1 && typeof(acResultsData[index]) != 'undefined' ) {
//		alert(acResultsData[index]);
		window.location = acResultsData[index];
	}
}

// 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 - 1);
	acResultsDiv.css("top", sf_top + sf_height + 3);
//	acResultsDiv.css("width", sf_width - 2);
}


// 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 if( keyCode == 13 ) {
		gotoUrlAutoComplete();
	}
	else {
		// reset
		acListCurrent = -1;
		return false;
	}
}