/**
 * 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       = 500;
var acURL         = null;
var acSearchId    = null;
var acResultsId   = null;
var acSearchField = null;
var acResultsDiv  = 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 + '" class="autocomplete"></div>');

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

    // reposition div
    repositionResultsDiv(field_id, results_id, get_url);
    
    // on blur listener
  //  acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200); });

    $('body').click(function() {
 setTimeout("clearAutoComplete()", 200);
 });

 acResultsDiv.click(function(event){
     event.stopPropagation();
 });


    // 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, field_id, results_id, get_url)){
            return;
        }

        // check for an ENTER or ESC
        if(keyCode == 13 || keyCode == 27){
            clearAutoComplete();
            return;
        }

        // if is text, call with delay
        setTimeout(function () {autoComplete(lastVal, field_id, results_id, get_url)}, acDelay);
    });
    acResultsDiv.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, field_id, results_id, get_url)){
            return;
        }

        // check for an ENTER or ESC
        if(keyCode == 13 || keyCode == 27){
            clearAutoComplete();
            if(keyCode == 13)
            {
                // submit form
                submitParentform(field_id);
            }
            return;
        }

        // if is text, call with delay
        setTimeout(function () {autoComplete(lastVal, field_id, results_id, get_url)}, acDelay);
    });
    acResultsDiv.keydown(function (e) {

        return false;
    });
}

// treat the auto-complete action (delayed function)
function autoComplete(lastValue, field_id, results_id, get_url)
{
    acSearchId  = "#" + field_id;
    acResultsId = "#" + results_id;
    acURL       = get_url;

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

    // 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;

        // 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>';
            }

            // 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(){ 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);
                // submit form
                submitParentform(field_id);
                clearAutoComplete();
            });

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

function submitParentform(child)
{
  var parent = document.getElementById(child).parentNode;
  while(parent.nodeName.toLowerCase() != "form")
  {
      parent = parent.parentNode;
  }
  parent.submit();
}
// clear auto complete box
function clearAutoComplete()
{

  for(i=1; i < 10; i++)
  {
    tempid = "#results" + i;
    resultdiv    = $(tempid);

    resultdiv.html('');
    resultdiv.css("display","none");
  }

}

// reposition the results div accordingly to the search field
function repositionResultsDiv(field_id, results_id, get_url)
{
    acSearchId  = "#" + field_id;
    acResultsId = "#" + results_id;
    acURL       = get_url;

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

    // 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);
}


// treat up and down key strokes defining the next selected element
function updownArrow(keyCode, field_id, results_id, get_url) {
    acSearchId  = "#" + field_id;
    acResultsId = "#" + results_id;
    acURL       = get_url;

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

    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";
                scrollIntoView(this,results_id);
            } else {
                this.className = "unselected";
            }
        });

        return true;
    } else {
        // reset
        acListCurrent = -1;
        return false;
    }
}
function scrollIntoView(node,parentID) {
var parent  = document.getElementById(parentID);
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
}