Ext.onReady(function(){
    /*
     * Functions for the product group filter & associated buttons above the grid
     */
    selectedProductGroup = -1;
    selectedProductCount = 0;
    selectedProductGroupType = -1;
    selectedProductGroupName = '';

     if(document.getElementById('editproductgroupbtn') != null){
        editproductgroup = new Ext.Button({
            id:"editproductgroup",
            renderTo:"editproductgroupbtn",
            text: lang('Edit Group'),
            width: '50',
            cls: 'x-box-text-small',
            style: {paddingLeft:'7px'},
            hidden: true,
            handler:function(){
                editProductGroup(selectedProductGroup, selectedProductCount);
            }
        });
    }

    if(document.getElementById('addproductgroupbtn') != null){
        new Ext.Button({
            id:"addproductgroup",
            renderTo:"addproductgroupbtn",
            text: lang('+'),
            tooltip: 'Add a new Product Group',
            hidden: false,
            cls: 'x-box-text-small',
            style: {paddingLeft:'10px'},
            handler:addProductGroup
        });
    }
    storeItem = Ext.data.Record.create([{name:'myId',type:'string'},{name:'displayText',type:'string'},{name:'productCount',type:'string'},{name:'typeid',type:'string'}]);
    productfiltercombo = new Ext.form.ComboBox({
        triggerAction: 'all',
        lazyRender:false,
        editable:false,
        value:" - All -",
        mode: 'local',
        store: new Ext.data.ArrayStore({
            idIndex: 0,
            fields: [
                'myId',
                'displayText',
                'productCount',
                'typeid',
                'type'
            ]
        }),
        valueField: 'myId',
        width: 280,
        displayField: 'displayText',
        tpl: '<tpl for=".">' +
             '<div class="x-combo-list-item">'  +
             '{displayText}' +
             '</div></tpl>'
        ,
        applyTo: 'productfilter',
        // all of your config options
        listeners:{
             'select': function(cb,record){
                 selectedProductGroup = record.data.myId;
                 selectedProductCount = record.data.productCount;
                 selectedProductGroupType = record.data.typeid;
                 selectedProductGroupName = record.data.displayText;
                 
                if (record.data.myId == -1) {
                    editproductgroup.hide();
                    if(viewingWhat == 'products') {
                       addProductButton.setDisabled(true);
                       //document.getElementById('blueGridBox').style.visibility = 'hidden';
                    } else {
                       addAddon.setDisabled(true);
                       //document.getElementById('blueGridBox').style.visibility = 'hidden';
                    }
                } else {
                    editproductgroup.show();
                    if(viewingWhat == 'products') {
                       addProductButton.setDisabled(false);
                       //document.getElementById('blueGridBox').style.visibility = 'visible';
                    } else {
                       addAddon.setDisabled(false);
                       //document.getElementById('blueGridBox').style.visibility = 'visible';
                    }
                }

                FilterGrid('group', record.data.myId);
             }
        }
    });

    populateCategoryCombo();
});

function populateCategoryCombo()
{
    //get list of categories
    Ext.Ajax.request({
       url: 'index.php?fuse=admin&action=Admin_GetProductGroups',
       success: function(xhr) {
            var data = ce.parseAjaxResponse(xhr);
            if(!data.error){
                //clear the items from our combobox
                productfiltercombo.getStore().removeAll();
                productfiltercombo.getStore().removeAll(true);

                if(viewingWhat == 'products') {
                    productassigncombo.getStore().removeAll();
                    productassigncombo.getStore().removeAll(true);
                }

                //go through our options and add to the UI
                var allitem= new Array()
                allitem["id"] = -1;
                allitem["name"] = " - All -";
                updateCategoryCombo(allitem);
                
                //data.productGroups.forEach(updateCategoryCombo);
                for ( var i in data.productGroups )
                {
                    if(data.productGroups[i].name != undefined
                      && data.productGroups[i].name != ''){
                        updateCategoryCombo(data.productGroups[i]);
                    }
                }
            }
       },
       failure: function() {
            Ext.Msg.alert("Failed to load product groups.");
       },
       params: {groupsOnly:1}
    });
}

function updateCategoryCombo(data)
{
    // Make the display name
    if(data.type != undefined) {
        data.name = data.name+" ("+data.type+")";
    }
    var comboitem = new storeItem({myId:data.id,displayText:data.name,productCount:data.productCount,typeid:data.typeid});
    productfiltercombo.getStore().insert(
       productfiltercombo.getStore().getCount(),
       comboitem
    );
    if(viewingWhat == 'products' && data.name != ' - All -') {
        productassigncombo.getStore().insert(
           productassigncombo.getStore().getCount(),
           comboitem
        );
    }
}

function FilterGrid(filtername, filter){
    if(filter != null){
        gridstore.setBaseParam(filtername, filter);
    }
    gridstore.load({params:{start:0}});
}