// JScript File

/**
 * An autosuggest textbox control.
 * @class
 * @scope public
 */
function DropDownComboBoxControl(oTextbox /*:HTMLInputElement*/, 
                            oProvider /*:SuggestionProvider*/, 
                            oButton /*:HTMLInputElement*/) {
    
    /**
     * The currently selected suggestions.
     * @scope private
     */ 
    this.cur /*:int*/ = -1;

    /**
     * The currently selected .
     * @scope private
     */ 
    this.selectedItems /*:array*/ = new Array();  

    /**
     * The dropdown list layer.
     * @scope private
     */
    this.layer = null;
    
    /**
     * Suggestion provider for the autosuggest feature.
     * @scope private.
     */
    this.provider /*:SuggestionProvider*/ = oProvider;
    
    /**
     * The textbox to capture.
     * @scope private
     */
    this.textbox /*:HTMLInputElement*/ = oTextbox;
    
    
    /**
     * The button to capture.
     * @scope private
     */
    this.button /*:HTMLInputElement*/ = oButton;
    
    //initialize the control
    this.init();
    
}

/**
 * Initializes the textbox with event handlers for
 * auto suggest functionality.
 * @scope private
 */
DropDownComboBoxControl.prototype.init = function () {

    //save a reference to this object
    var oThis = this;
    
    this.button.onclick = function() {
        oThis.toggleDropDown();
    };
    
    //create the suggestions dropdown
    this.createDropDown();
};

/**
 * Creates the dropdown layer to display multiple suggestions.
 * @scope private
 */
DropDownComboBoxControl.prototype.createDropDown = function () {

    var oThis = this;

    //create the layer and assign styles
    this.layer = document.createElement("select");
    this.layer.className = "suggestions";
    this.layer.style.visibility = "hidden";
    this.layer.style.width = this.textbox.offsetWidth;
    this.layer.multiple = true;
    
    this.layer.onblur = function () {
        oThis.hideDropDown();
    }
    
    this.layer.onchange = function () {
        var txt = new Array();

        for(var i=0;i < oThis.layer.length; i++) {
            
            if(oThis.layer.options[i].selected)
                txt[txt.length] = oThis.layer.options[i].value;
        }
        
        oThis.textbox.value = txt.join(",");
    }
    
    
    document.body.appendChild(this.layer);
};

function updateTextbox(src, id) {
//alert("change");
    var txt = new Array();
    for(var i=0;i< src.length; i++) {
        if(src.options[i].selected)
            txt[txt.length] = src.options[i].value;
    }
    
    document.getElementById(id).value = txt.join(",");
}
/**
 * Builds the suggestion layer contents, moves it into position,
 * and displays the layer.
 * @scope private
 * @param aSuggestions An array of suggestions for the control.
 */
DropDownComboBoxControl.prototype.showDropDown = function () {
    
    var aItems = this.provider.items;
    var aSelectedItems = this.textbox.value.split(",");
    //alert(aSelectedItems.length);
    var oDiv = null;
    var oCheckBox = null;
    var oLabel = null;
    this.layer.length = 0;  //clear contents of the layer
    
    //alert(typeof(this.layer));
    
    for (var i=0; i < aItems.length; i++) {
    //alert(aItems[i]["value"])
       this.layer.options[this.layer.length] = new Option(aItems[i]["key"] + ": " + aItems[i]["value"], aItems[i]["key"]);
       for(var j=0; j < aSelectedItems.length; j++) {
            if(this.layer.options[this.layer.options.length-1].value == aSelectedItems[j]) {
                this.layer.options[this.layer.options.length-1].selected = true;
                break;
            }
       }
    }
    
    this.layer.style.left = this.getLeft() + "px";
    this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px";
    this.layer.style.width = this.textbox.offsetWidth + "px";
    this.layer.style.visibility = "visible";
    this.layer.focus();
    

};

DropDownComboBoxControl.prototype.handleMouseClick = function(e) {
    var oThis = this;
  if (document.all?true:false) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  //alert(oThis.getTop());
  

};

/**
 * Gets the left coordinate of the textbox.
 * @scope private
 * @return The left coordinate of the textbox in pixels.
 */
DropDownComboBoxControl.prototype.getLeft = function () /*:int*/ {

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

/**
 * Gets the top coordinate of the textbox.
 * @scope private
 * @return The top coordinate of the textbox in pixels.
 */
DropDownComboBoxControl.prototype.getTop = function () /*:int*/ {

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

/**
 * Shows or hides drop down
 * @scope private
 */
DropDownComboBoxControl.prototype.toggleDropDown = function () /*:int*/ {
    if(this.layer.style.visibility == "hidden") {
        this.showDropDown();
    } else {
        this.hideDropDown();
    }
    
};

/**
 * hides drop down
 * @scope private
 */
DropDownComboBoxControl.prototype.hideDropDown = function () /*:int*/ {

    this.layer.style.visibility = "hidden";
    
};

/**
 * Provides suggestions for state names (USA).
 * @class
 * @scope public
 */
function ComboBoxItems(itemdata) {
    var items = itemdata.split("\n");
    var item;
    
    this.items = new Array();
    for(var i=0; i<items.length;i++) {
        item = items[i].split("\t");
        this.items[i] = {
          key: item[0],
          value: item[1]
        }
    };
    
    //alert(this.items.length);
}



function mouseOverOption(src) {
    src.className = "hover";
}

function mouseOutOption(src) {
    src.className = "";
}