/**
 * AutoComplete Field - JavaScript Code
 *
 */

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

var acTimeout     = null;

function setAutoComplete(field_id, results_id, get_url) {
    // initialize vars
    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)
        acTimeout = 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;
	}

	// get remote data as JSON
	//$.getJSON(acURL + '?part=' + part, function(json){
	//ac = $.getJSON(acURL + '?part=' + part, function(json) {
	ac = $.ajax({
	    url: acURL + '?part=' + part,
	    dataType: 'json',
	    scriptCharset: 'utf-8', 
	    contentType: 'application/json; charset=utf-8',
	    success: function(json) {

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

	        // 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++) {
	                //newData += '<div class="unselected">' + json[i] + '</div>';
	                newData += '<div class="unselected">';
	                newData += '<a href="' + resolveUrl("~/Entries/DetailFull/") + json[i].id;
	                newData += '" class="search-go"><img src="/Content/Images/action_go.gif"/></a><span class="search-item">';
	                newData += json[i].item + '</span></div>';
	            }

	            // create last row with close link
	            newData += '<div class="closerow"><a class="closelink" href="javascript:void(0);">close</a></div>';

	            // update the results div
	            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() { if (this.className != "closerow") this.className = "unselected"; });
	                if (this.className != "closerow") this.className = "selected";
	            })

	            // on click copy the result text to the search field and hide
	            var items = divs.children(".search-item");
	            //divs.click(function() {
	            items.click(function() {
	                //if (this.className != "closerow") {
	                //                      acSearchField.val(getSelectedValue(part, this.childNodes[0].nodeValue));
	                //acSearchField.val(getSelectedValue(part, $(this.childNodes[1]).text()));
	                acSearchField.val(getSelectedValue(part, $(this).text()));
	                clearAutoComplete();
	                //}
	            });

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

function getSelectedValue(part, selection){
//    alert(selection);
//    acSearchField.val(this.childNodes[0].nodeValue);
    var delimiterPos = selection.indexOf("-->")
    var word1 = selection.substring(0, delimiterPos - 1);
//    alert(word1);
//    alert(word2);
    //if (word1.indexOf(part) != -1){
    if (word1.toLowerCase().indexOf(part.toLowerCase()) != -1){
        //acSearchField.val(word1);
        return word1;
    }
    else {
        var endIdx = selection.lastIndexOf("{");
        if (endIdx == -1)   // remove pos
            endIdx = selection.length;
        else
            endIdx--;
        var word2 = selection.substring(delimiterPos + 4, endIdx);
        //acSearchField.val(word2);
        return word2;        
    }
}

// clear auto complete box
function clearAutoComplete(){
	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 + 5);
	//acResultsDiv.css("width", sf_width - 2);	
	acResultsDiv.css("left", sf_left);
	acResultsDiv.css("top", sf_top + sf_height + 8);
	acResultsDiv.css("width", sf_width + 20);
}

// 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 (this.className != "closerow"){
		        if (i == acListCurrent){
//		            acSearchField.val(this.childNodes[0].nodeValue);
		            acSearchField.val($(this.childNodes[1]).text());
		            this.className = "selected";
		        }else{
		            this.className = "unselected";
		        }
		    }
		});

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