function ShowList(autoCompleteExtender)
{
    autoCompleteExtender._onTimerTick(null, null);
}

function HideAutoCompleteTextBoxBackground(autoCompleteTextBox)
{
    autoCompleteTextBox.className = 'AutoCompleteDropDownClear';
}

function ShowAutoCompleteTextBoxBackground(autoCompleteTextBox, textBoxCssClass)
{
    if (autoCompleteTextBox.value == '')
    {
        autoCompleteTextBox.className = textBoxCssClass;
    }
    else
    {
        autoCompleteTextBox.className = 'AutoCompleteDropDownClear';
    }
}

function SetAutoCompleteTextBoxEnabled(autoCompleteTextBox, textBoxCssClass, enabled)
{
    if (enabled)
    {
        autoCompleteTextBox.disabled = false;
        ShowAutoCompleteTextBoxBackground(autoCompleteTextBox, textBoxCssClass);
    }
    else
    {
        autoCompleteTextBox.disabled = true;
        autoCompleteTextBox.className = 'AutoCompleteDropDownDisabled';
    }

    return textBoxCssClass;
}

function RemoveAutoCompletedOption(selectedValuesFieldId, optionToRemove, selectedValuesContainerId)
{
    var selectedValuesField = document.getElementById(selectedValuesFieldId);
    var delimitedOption = '|' + optionToRemove + '|';
    
    selectedValuesField.value = selectedValuesField.value.replace(delimitedOption, "|");

    var selectedValuesContainer = document.getElementById(selectedValuesContainerId);
    var elementToDelete;
    for (var i=0; i < selectedValuesContainer.childNodes.length; i++)
    {
        if (selectedValuesContainer.childNodes[i].id == selectedValuesContainerId + "_" + optionToRemove.replace(" ", "-"))
        {
            elementToDelete = selectedValuesContainer.childNodes[i];
        }
    }

    selectedValuesContainer.removeChild(elementToDelete);
}

function AddAutoCompletedOption(selectedValuesFieldId, optionToAdd, selectedValuesContainerId, textBoxId)
{
    var selectedValuesField = document.getElementById(selectedValuesFieldId);
    var delimitedOption = '|' + optionToAdd + '|';
    
    if (selectedValuesField.value.indexOf(delimitedOption) <= -1)
    {
        if (selectedValuesField.value == '')
        {
            selectedValuesField.value = '|';
        }
        selectedValuesField.value = selectedValuesField.value + optionToAdd + '|';

        AddAutoCompletedOptionControl(selectedValuesFieldId, optionToAdd, selectedValuesContainerId);
    }
    
    document.getElementById(textBoxId).value = '';
}

function AddAutoCompletedOptionControl(selectedValuesFieldId, optionToAdd, selectedValuesContainerId)
{
    //<span class="SelectedItem" id="<%=this.ClientID %>_SelectedItems_<%#Container.DataItem %>"><%#Container.DataItem %>&nbsp;<a href="#" title="Remove" onclick="RemoveAutoCompletedOption('<%=SelectedTextValuesHidden.ClientID %>', '<%#Container.DataItem %>', '<%=this.ClientID %>_SelectedItems'); return false;">X</a></span>
    var selectedValuesContainer = document.getElementById(selectedValuesContainerId);
    var displayOptionSpan = document.createElement("span");
    displayOptionSpan.id = selectedValuesContainerId + "_" + optionToAdd.replace(" ", "-");
    displayOptionSpan.className = "SelectedItem";
    displayOptionSpan.innerHTML = optionToAdd + "&nbsp;<a href=\"#\" title=\"Remove\" onclick=\"RemoveAutoCompletedOption('" + selectedValuesFieldId.replace('\'', '\\\'') + "', '" + optionToAdd.replace('\'', '\\\'') + "', '" + selectedValuesContainerId.replace('\'', '\\\'') + "'); return false;\">X</a>";
    selectedValuesContainer.appendChild(document.createTextNode(" "));
    selectedValuesContainer.appendChild(displayOptionSpan);
}

function InitAutoComplete(selectedValuesFieldId, selectedValuesContainerId, textboxId, textboxCssClass)
{
    var selectedValuesField = document.getElementById(selectedValuesFieldId);
    var selectedOptions = selectedValuesField.value.split("|");
    var selectedValuesContainer = document.getElementById(selectedValuesContainerId);

    //Clear field before adding to it
    while (selectedValuesContainer.hasChildNodes())
    {
        selectedValuesContainer.removeChild(selectedValuesContainer.lastChild);
    }

    for (var i = 0; i < selectedOptions.length; i++)
    {
        if (selectedOptions[i].length > 0) AddAutoCompletedOptionControl(selectedValuesFieldId, selectedOptions[i], selectedValuesContainerId);
    }

    ShowAutoCompleteTextBoxBackground(document.getElementById(textboxId), textboxCssClass);
}

function OnClientItemSelected(source, eventArgs)
{
    var optionToAdd = eventArgs.get_value();
    var container = source._element.parentNode;
    var selectedValuesHiddenField, selectedValuesContainer;
    
    for (var i=0; i < container.childNodes.length; i++)
    {
        if (container.childNodes[i].tagName &&
            container.childNodes[i].type &&
            container.childNodes[i].tagName.toLowerCase() == 'input' &&
            container.childNodes[i].type.toLowerCase() == 'hidden')
        {
            selectedValuesHiddenField = container.childNodes[i];
        }
        else if (container.childNodes[i].className &&
                 container.childNodes[i].className == 'SelectedItemList')
        {
            selectedValuesContainer = container.childNodes[i];
        }
    }

    AddAutoCompletedOption(selectedValuesHiddenField.id, optionToAdd, selectedValuesContainer.id, source._element.id);
}