function CityListingDiv(oPositionAnchor /*:Anchor to use as position offset point */,
									oLeftOffset, oTopOffset, cityFieldId, zipFieldId, countyFieldId) {
    this.selectionNodeStartIndex = 2;
    this.cur = this.selectNodeStartIndex - 1;
    this.leftOffset = oLeftOffset;
    this.topOffset = oTopOffset;
    this.cityFieldId = "locationCityName";
    if (cityFieldId) {
    	this.cityFieldId = cityFieldId;
    }
    this.zipFieldId = "locationZipCode";
    if (zipFieldId) {
    	this.zipFieldId = zipFieldId;
    }
    this.countyFieldId = "";
    if (countyFieldId) {
    this.countyFieldId = countyFieldId;
    }
    this.isIE = false;
    if (navigator.appName == "Microsoft Internet Explorer") {
     isIE = true;
    }

    /**
     * The dropdown list layer.
     * @scope private
     */
    this.layer = null;
    
    /**
     * An anchor to use as an offset"WebContent/script/cityListingDiv.js" position point
     * @scope private
     */
    this.positionAnchor /*:HTMLInputElement*/ = oPositionAnchor;
   /**
     * The selected location code
     * @scope private
     */
   	this.cellPrefix = "";
   	this.cellSuffix = " ";
   	
   	this.estScrollBarWidth = 26;

    //initialize the control
    this.init();
    
}

/**
 * Creates Layer
 * Initializes layer with event functions
 * auto suggest functionality.
 * @scope private
 */
CityListingDiv.prototype.init = function () {

    //save a reference to this object
    var oThis = this;
    //create the suggestions dropdown
    this.createDropDown();
    //assign onkeydown event handler
    this.layer.onkeydown = function (oEvent) {
    
        //check for the proper location of the event object
        if (!oEvent) {
            oEvent = window.event;
        }    
        
        //call the handleKeyDown() method with the event object
        oThis.handleKeyDown(oEvent);
    };
    this.layer.onmousedown = 
	this.layer.onmouseup = 
	this.layer.onmouseover = function (oEvent) {
        oEvent = oEvent || window.event;
        oTarget = oEvent.target || oEvent.srcElement;
        var eventX = oThis.isIE ? oEvent.offsetX : oEvent.pageX - oThis.layer.offsetLeft;
        var layerWidth = oThis.layer.offsetWidth - oThis.estScrollBarWidth;
        var eventY = oThis.isIE ? oEvent.offsetY : oEvent.pageY - oThis.layer.offsetTop;
        // assume there will never be a horizontal scroll bar
       var layerHeight = oThis.layer.offsetHeight;
        //alert ("eventX is " + eventX + " layerWidth is " + layerWidth + " eventY is " + eventY + " layerheight is " + layerHeight);
		if (eventX > layerWidth || eventY > layerHeight) {
		   return;
		}
	    if (oTarget.nodeName != "TR") {
	    	oTarget = oThis.getSelectedRow(oTarget);
	    } 
        if (oEvent.type == "mousedown") {
            if (oTarget.rowIndex >= oThis.selectionNodeStartIndex) {
        		oThis.setCityFields(oTarget);
        	}
        } else if (oEvent.type == "mouseover") {
            oThis.highlightSuggestion(oTarget);
        } else {
        	if (oTarget.rowIndex >= oThis.selectionNodeStartIndex) {
            	oThis.hideSuggestions();
        	}
        }
    };
};

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

    var oThis = this;
	this.layer = document.getElementById('cityDiv');
	if (!this.layer) {
    	//create the layer and assign styles
    	this.layer = document.createElement("div");
    	this.layer.id = "cityDiv";
    	this.layer.className = "citySuggestions";
    	this.layer.style.visibility = "hidden";
    }
    document.body.appendChild(this.layer);
};

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

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

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

    var oNode = this.positionAnchor;
    var iTop = 0;
    
    while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
    }
    
    return iTop + this.topOffset;
};
/**
 * Returns the table rows in the div
 * @scope private
 */
CityListingDiv.prototype.getSelectionNodes = function ()  {
    return this.layer.childNodes[0].childNodes[0].childNodes;
};

/**
 * Handles three keydown events.
 * @scope private
 * @param oEvent The event object for the keydown event.
 */
CityListingDiv.prototype.handleKeyDown = function (oEvent /*:Event*/) {
 		oEvent = oEvent || window.event;
        oTarget = oEvent.target || oEvent.srcElement;
    switch(oEvent.keyCode) {
        case 38: //up arrow
            this.previousSuggestion();
            this.layer.focus();
            break;
        case 40: //down arrow 
            this.nextSuggestion();
            this.layer.focus();
            break;
        case 13: //enter
            this.setCityFields(this.getSelectionNodes()[this.cur]);
            this.hideSuggestions();
            break;
    }

};
CityListingDiv.prototype.getSelectedRow = function(oTarget) {
    if (oTarget.nodeName == "TR") return oTarget;
	else if (oTarget.nodeName == "DIV" || oTarget.nodeName == "TABLE" || oTarget.nodeName == "TBODY") {
		return this.getSelectedRow(oTarget.childNodes[0]);
	} else {
	    return this.getSelectedRow(oTarget.parentNode);
	}
};

/**
 * Hides the suggestion dropdown.
 * @scope private
 */
CityListingDiv.prototype.hideSuggestions = function () {
    this.layer.style.visibility = "hidden";
};

/**
 * Highlights the given node in the suggestions dropdown.
 * @scope private
 * @param oSuggestionNode The node representing a suggestion in the dropdown.
 */
CityListingDiv.prototype.highlightSuggestion = function (tableRow) {
    //alert ("in highlight suggestion");
    var tableRows = this.getSelectionNodes();
    
    for (var i=this.selectionNodeStartIndex; i < tableRows.length; i++) {
        var oNode = tableRows[i];
        if (oNode == tableRow) {
            oNode.className = "CityCurrent"
            this.cur = i;
        } else if (oNode.className == "CityCurrent") {
            oNode.className = "";
        }
    }
    this.layer.focus();
};



/**
 * Highlights the next suggestion in the dropdown
 * @scope private
 */
CityListingDiv.prototype.nextSuggestion = function () {
   
    var cSuggestionNodes = this.getSelectionNodes();
    if (cSuggestionNodes.length > this.selectionNodeStartIndex && this.cur < cSuggestionNodes.length-1) {
        var oNode = cSuggestionNodes[++this.cur];
        this.highlightSuggestion(oNode);
    }
    this.layer.focus();
};

/**
 * Highlights the previous suggestion in the dropdown
 * @scope private
 */
CityListingDiv.prototype.previousSuggestion = function () {
    var cSuggestionNodes = this.getSelectionNodes();

    if (cSuggestionNodes.length > 0 && this.cur > this.selectionNodeStartIndex) {
        var oNode = cSuggestionNodes[--this.cur];
        this.highlightSuggestion(oNode);
    }
    this.layer.focus();
};
/**
 * Builds the suggestion layer contents, moves it into position,
 * and displays the layer.
 * @scope private
 * @param aSuggestions An array of suggestions for the control.
 */
CityListingDiv.prototype.showSuggestions = function (aSuggestions /*:Array*/) {
    var oThis = this;
    this.layer.innerHTML = "";  //clear contents of the layer
    var tableEl = document.createElement("table");
    this.layer.appendChild(tableEl);
    var tbody = document.createElement("tbody");
    tableEl.appendChild(tbody);
    tbody.appendChild(this.getHeaderRow1());
    tbody.appendChild(this.getHeaderRow2());
    
    for (var i=0; i < aSuggestions.length; i++) {
        tableRow = document.createElement("tr");
        tbody.appendChild(tableRow);
        for (var k = 0; k < aSuggestions[i].length; k++) {
            var nextCell = document.createElement("td");
            nextCell.className = "CityCol" + k;
            tableRow.appendChild(nextCell);
        	nextCell.innerHTML = this.cellPrefix + aSuggestions[i][k] + this.cellSuffix;
        }
    }
    this.layer.style.left = this.getLeft() + "px";
    this.layer.style.top = this.getTop() + "px";
    this.layer.style.visibility = "visible";
    this.layer.focus();
    this.highlightSuggestion(this.layer.childNodes[0].childNodes[0].childNodes[this.selectionNodeStartIndex]);

};
CityListingDiv.prototype.getHeaderRow1 = function () {
    var oThis = this;
 	var tableRow = document.createElement("tr");
 	var cell = document.createElement("td");
 	cell.colSpan = 3;
 	cell.className = "titleText";
 	var closeWindow = document.createElement("img");
 	closeWindow.src = "/LTMSLite/images/closeSearchResults.gif";
 	closeWindow.width=197;
 	closeWindow.height=22;
 	closeWindow.hspace=25;
 	closeWindow.onclick = function (){
 		oThis.hideSuggestions();
 	}; 
	cell.appendChild(closeWindow);
	tableRow.appendChild(cell);
    return tableRow;
};
CityListingDiv.prototype.getHeaderRow2 = function () {
 	var tableRow = document.createElement("tr");
    var header1 = document.createElement("td");
    header1.className="CityHeader";
    header1.innerHTML = this.cellPrefix + 'City Name' + this.cellSuffix;
    tableRow.appendChild(header1);
    var header2 = document.createElement("td");
    header2.className="CityHeader";
    header2.innerHTML = this.cellPrefix + 'Zip Code' + this.cellSuffix;
    tableRow.appendChild(header2);
    var header3 = document.createElement("td");
    header3.className="CityHeader";
    header3.innerHTML = this.cellPrefix + 'County' + this.cellSuffix;
    tableRow.appendChild(header3);
    return tableRow;
};
CityListingDiv.prototype.setCityFields = function (tableRow) {
    var cityName = tableRow.cells[0].innerHTML;
    var zipCode = tableRow.cells[1].innerHTML;
    var county = tableRow.cells[2].innerHTML;
    setValue(this.cityFieldId, cityName.substring(this.cellPrefix.length, cityName.length - this.cellSuffix.length).toUpperCase());
    setValue(this.zipFieldId, zipCode.substring(this.cellPrefix.length, zipCode.length - this.cellSuffix.length));
    setValue(this.countyFieldId, county.substring(this.cellPrefix.length, county.length - this.cellSuffix.length));
    setValue('validatedCity', 'true');
    setValue('cityValidated','true');
    setInnerHTML('cityError','');
};