//
// Convert an existing single-<select> in HTML markup
// into a combo box.
//
function convertToExtjsCombo (selectId, hiddenFormValueId, opts)
{
    if (!opts) opts = {};

    var convertOpts = {
        allowBlank:     false,
        forceSelection: true,
        hideLabel:      true,
        hiddenName:     hiddenFormValueId,
        transform:      selectId,
        triggerAction:  'all',
        width:          opts.width || 190    // fits in sidebar
    };
    if (typeof opts.readOnly != 'undefined') {
        convertOpts.readOnly = opts.readOnly;
    }

    var converted = new Ext.form.ComboBox(convertOpts);
}


//----------------------------------------------------------

// Convert an existing multi-<select> in HTML markup
// into a multi-select combo box.
//
function convertToExtjsMultiCombo (selectId, hiddenFormValueId, opts)
{
    if (!opts) opts = {};

    // The Ext comboBox conversion only works for single-select lists.
    // So the default conversion only picks up the last selected item
    // if there are multiple selected.
    //
    // Before the conversion, we need to remember the original
    // selections, and then select them manually after the conversion.
    //
    var options  = $(selectId).options;
    var len      = options.length;
    var selected = new Array();
    for (var i = 0; i < len; i++) {
        if (options[i].selected) {
            selected.push(i);
        }
    }

    var convertOpts = {
        allowBlank:     false,
        clearTrigger:   false,
        forceSelection: true,
        hideLabel:      true,
        hiddenName:     hiddenFormValueId,
        minLength:      1,
        multiSelect:    true,
        readOnly:       true,
        transform:      selectId,
        triggerAction:  'all',
        width:          opts.width || 190    // fits in sidebar
    };

    var converted = new Ext.ux.Andrie.Select(convertOpts);

    // Make sure initial selections are re-selected:
    //
    len = selected.length;
    if (len) {
        for (var i = 0; i < len; i++) {
            selectIndexExtjsMultiCombo(converted, selected[i]);
        }
    }

    var hasSelectOneHeader = opts.hasSelectOneHeader;

    converted.on('change', function (sel, oldValues, newValues)
        {
            var numNewValues = newValues.length;
            if (numNewValues == 0) {

                // If we got here, the only selected item
                // was just deselected.
                //
                // If header exists then select that,
                // otherwise keep previous selection:
                //
                var index = hasSelectOneHeader ? 0 : this.preClickSelections[0];
                selectIndexExtjsMultiCombo(this, index);
            }
            else if (hasSelectOneHeader && (numNewValues > 1)) {

                // If we got here, the list has a headar
                // and more than one item is selected.
                //
                var headerIndexInNewValues = newValues.indexOf('0');
                if (headerIndexInNewValues != -1) {

                    // Header is selected in addition to
                    // other options, so deselect it:
                    //
                    deselectIndexExtjsMultiCombo(this, 0);
                }

            } else if (numNewValues == 2 && sel.lastSelectionText.indexOf('None') == 0) {
				// 'None' will be first in the list, so the index is 0 for a true match
                // 'None' is the first element so we get rid of that.
				var optStore = sel.getStore();
				var none_idx = optStore.indexOfId(newValues[0]);
				deselectIndexExtjsMultiCombo(sel, none_idx);
			}
        }, converted);
}

//----------------------------------------------------------

function selectIndexExtjsMultiCombo (sel, index)
{
    var record = sel.store.getAt(index);
    if (record) {

        if (sel.inKeyMode) {
            sel.view.select(index, true);
        }

        var field = sel.valueField || sel.displayField;
        sel.addValue(record.data[field]);
    }
}

function deselectIndexExtjsMultiCombo (sel, index)
{
    var record = sel.store.getAt(index);
    if (record) {

        var field = sel.valueField || sel.displayField;
        sel.removeValue(record.data[field]);

        if (sel.inKeyMode){
            sel.view.deselect(index, true);
        }
    }
}