var modelIDs = [];
Ext.onReady(function () {
    var model = Ext.getDom('Model');

    model.onchange = function () {
        var trim = Ext.getDom('Trim');
        var option;
        trim.length = 0;


        if (this.selectedIndex == 0) {
            Ext.getDom('TrimLI').className = 'hidden';
            return;
        }

        Ext.Ajax.request({
            url:'services/GetTrimOptions.php?Send=true&CategoryID=' + modelIDs[this.selectedIndex - 1],
            method:'GET',
            success: function (r) {
                if (r.responseText == 'null' || r.responseText == 'false') {
                    Ext.getDom('TrimLI').className = 'hidden';
                    return;
                }

                option = new Option('Please Select a Trim', '', true, true);
                trim.options[0] = option;

                var trims = Ext.decode(r.responseText);

                for (var i = 0 ; i < trims.attributes.length ; i++) {
                    option = new Option(trims.attributes[i].Value, trims.attributes[i].Value, false, false);

                    trim.options[i + 1] = option;
                }

                Ext.getDom('TrimLI').className = '';
            }
        });
    };

    Ext.Ajax.request({
        url:'services/GetModels.php?Send=true',
        method:'GET',
        success: function (r) {
            if (r.responseText == 'null' || r.responseText == 'false') {
                return;
            }

            var models = Ext.decode(r.responseText);
            var option;

            for (var i = 0 ; i < models.categories.length ; i++) {
                option = new Option(models.categories[i].Name, models.categories[i].Name, false, false);
                modelIDs.push(models.categories[i].ID);

                model.options[i + 1] = option;
            }
        }
    });
});