var arrayResult = new Array();
var cur = -1;
var layer;
var textbox;


function AutoSuggestControl(){
    textbox = document.getElementById("txt1");
    StateSuggestions();
}
 
function StateSuggestions() {

    Retrove.DemoMethods.GetCityZip("NJ",callback_MLS_City);
}
//Return the City from back end transaction 
function callback_MLS_City(res){
	
    if(res != null && res.value != null && res.value.Tables != 0 && res.value.Tables.length == 1) {
        for(var i=0; i<res.value.Tables[0].Rows.length; i++)
        {
         arrayResult[arrayResult.length] = res.value.Tables[0].Rows[i].city; 
        }       
    }
    //init();
}
function  requestSuggestions(bTypeAhead ) {
    var aSuggestions = [];
    var sTextboxValue = textbox.value;
    
    if (sTextboxValue.length > 0){
    
        //search for matching states
        for (var i=0; i < this.arrayResult.length; i++) { 
            if (this.states[i].indexOf(sTextboxValue) == 0) {
                aSuggestions.push(this.arrayResult[i]);
            } 
        }
    }

    //provide suggestions to the control
    autosuggest(aSuggestions, bTypeAhead);
}



function autosuggest (aSuggestions,bTypeAhead ) {
    
    //make sure there's at least one suggestion
    if (aSuggestions.length > 0) {
        if (bTypeAhead) {
           typeAhead(aSuggestions[0]);
        }
        
         showSuggestions(aSuggestions);
    } else {
        hideSuggestions();
    }
}

function typeAhead (sSuggestion) {

    //check for support of typeahead functionality
    if (textbox.createTextRange || textbox.setSelectionRange){
        var iLen = textbox.value.length; 
        textbox.value = sSuggestion; 
        selectRange(iLen, sSuggestion.length);
    }
}


function createDropDown() {

    var oEvent;
    //create the layer and assign styles
    layer = document.createElement("div");
    layer.className = "suggestions";
    layer.style.visibility = "hidden";
    layer.style.width = textbox.offsetWidth;
    
    //when the user clicks on the a suggestion, get the text (innerHTML)
    //and place it into a textbox
    layer.onmousedown = layer.onmouseup = layer.onmouseover(oEvent);
        oEvent = oEvent || window.event;
        oTarget = oEvent.target || oEvent.srcElement;

        if (oEvent.type == "mousedown") {
            textbox.value = oTarget.firstChild.nodeValue;
            hideSuggestions();
        } else if (oEvent.type == "mouseover") {
            highlightSuggestion(oTarget);
        } else {
            textbox.focus();
        }
        
    document.body.appendChild(layer);
}

function getLeft() /*:int*/ {

    var oNode = textbox;
    var iLeft = 0;
    
    while(oNode.tagName != "BODY") {
        iLeft += oNode.offsetLeft;
        oNode = oNode.offsetParent;        
    }
    
    return iLeft;
}


function getTop() /*:int*/ {

    var oNode = textbox;
    var iTop = 0;
    
    while(oNode.tagName != "BODY") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
    }
    
    return iTop;
}


function handleKeyDown(oEvent) {

    switch(oEvent.keyCode) {
        case 38: //up arrow
            previousSuggestion();
            break;
        case 40: //down arrow 
            nextSuggestion();
            break;
        case 13: //enter
            hideSuggestions();
            break;
    }

}

function handleKeyUp (oEvent) {

    var iKeyCode = oEvent.keyCode;

    //for backspace (8) and delete (46), shows suggestions without typeahead
    if (iKeyCode == 8 || iKeyCode == 46) {
        requestSuggestions(false);
        
    //make sure not to interfere with non-character keys
    } else if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode < 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {
        //ignore
    } else {
        //request suggestions from the suggestion provider with typeahead
        requestSuggestions(true);
    }
}

function hideSuggestions() {
    layer.style.visibility = "hidden";
}

function highlightSuggestion(oSuggestionNode) {
    
    for (var i=0; i < layer.childNodes.length; i++) {
        var oNode = layer.childNodes[i];
        if (oNode == oSuggestionNode) {
            oNode.className = "current"
        } else if (oNode.className == "current") {
            oNode.className = "";
        }
    }
}

function init(e) {
        var key = e;
        alert(key);
  		textbox.onkeydown = handleKeyDown(key); //needed for Opera...
		textbox.onkeyup = handleKeyUp(key);  
        textbox.onblur = hideSuggestions()
        createDropDown()
}

function nextSuggestion() {
    var cSuggestionNodes = layer.childNodes;

    if (cSuggestionNodes.length > 0 && cur < cSuggestionNodes.length-1) {
        var oNode = cSuggestionNodes[++cur];
        highlightSuggestion(oNode);
        textbox.value = oNode.firstChild.nodeValue; 
    }
}

function previousSuggestion() {
    var cSuggestionNodes = layer.childNodes;

    if (cSuggestionNodes.length > 0 && cur > 0) {
        var oNode = cSuggestionNodes[--cur];
        highlightSuggestion(oNode);
        textbox.value = oNode.firstChild.nodeValue;   
    }
}

function selectRange(iStart,iLength) {

    //use text ranges for Internet Explorer
    if (textbox.createTextRange) {
        var oRange = textbox.createTextRange(); 
        oRange.moveStart("character", iStart); 
        oRange.moveEnd("character", iLength - textbox.value.length);      
        oRange.select();
        
    //use setSelectionRange() for Mozilla
    } else if (textbox.setSelectionRange) {
        textbox.setSelectionRange(iStart, iLength);
    }     

    //set focus back to the textbox
    textbox.focus();      
} 

function showSuggestions(aSuggestions /*:Array*/) {
    
    var oDiv = null;
    layer.innerHTML = "";  //clear contents of the layer
    
    for (var i=0; i < aSuggestions.length; i++) {
        oDiv = document.createElement("div");
        oDiv.appendChild(document.createTextNode(aSuggestions[i]));
        layer.appendChild(oDiv);
    }
    
    layer.style.left = getLeft() + "px";
    layer.style.top = (getTop()+textbox.offsetHeight) + "px";
    layer.style.visibility = "visible";

}