<script type="text/javascript">
    var ExtGridEditorAutomailer = {};

    $(document).ready(function() {
        function renderTemplateName(value, p, record){
            //You can just look at this store and find the match for the name
            var elementIndex = ExtGridEditorAutomailer.templateNameDropDownStore.find('optionvalue', value);
            if(elementIndex > -1){
                var elementObject = ExtGridEditorAutomailer.templateNameDropDownStore.getAt(elementIndex);
                return elementObject.data['optionname'];
            }else if(value == 'Choose One...'){
                return value;
            }else{
                return lang('TEMPLATE WITH ID % NOT FOUND!', value);
            }
        }

        function renderEventName(value, p, record){
            //You can just look at this store and find the match for the name
            var elementIndex = ExtGridEditorAutomailer.eventNameDropDownStore.find('optionvalue', value);
            if(elementIndex > -1){
                var elementObject = ExtGridEditorAutomailer.eventNameDropDownStore.getAt(elementIndex);
                return elementObject.data['optionname'];
            }else if(value == 'Choose One...'){
                return value;
            }else{
                return lang('EVENT WITH ID % NOT FOUND!', value);
            }
        }

        ExtGridEditorAutomailer.gridstore = new Ext.data.ArrayStore({
            fields:   ["templateid","days","event"],
            data:     <?php echo $this->gridData; ?>
        });

        ExtGridEditorAutomailer.templateNameDropDownStore =  new Ext.data.ArrayStore({
            fields: ['optionvalue', 'optionname'],
            data: <?php echo $this->emailTemplates; ?>
       });

        ExtGridEditorAutomailer.eventNameDropDownStore =  new Ext.data.ArrayStore({
            fields: ['optionvalue', 'optionname'],
            data: <?php echo $this->productEvents; ?>
       });

        ExtGridEditorAutomailer.grid = new Ext.grid.EditorGridPanel({
            id:               'automailergrid',
            name:             'automailergrid',
            renderTo:         'ExtGridEditorAutomailer',
            autoHeight:       true,
            store:            ExtGridEditorAutomailer.gridstore,
            trackMouseOver:   true,
            loadMask:         true,
            selModel:         new Ext.grid.RowSelectionModel(),
            clicksToEdit:     1,
            x:                5,
            y:                40,
            width:            516,
            height:           250,
            columns:[
                {
                id:             'templateid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                header:         lang("Template Name"),
                width:          120,
                dataIndex :     "templateid",
                sortable:       false,
                align:          "left",
                menuDisabled:   true,
                renderer:       renderTemplateName,
                editor:         new Ext.form.ComboBox({
                    store :         ExtGridEditorAutomailer.templateNameDropDownStore,
                    typeAhead:      true,
                    triggerAction:  'all',
                    mode:           'local',
                    editable:       false,
                    displayField:   'optionname',
                    valueField:     'optionvalue'
                })
            },{
                id:             'days', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                header:         lang("Days"),
                width:          30,
                dataIndex :     "days",
                sortable:       false,
                menuDisabled:   true,
                editor:         new Ext.form.NumberField({allowDecimals: false, allowNegative: false})
            },{
                id:             'event', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                header:         lang("Event"),
                width:          140,
                dataIndex :     "event",
                sortable:       false,
                menuDisabled:   true,
                renderer:       renderEventName,
                editor:         new Ext.form.ComboBox({
                    store :         ExtGridEditorAutomailer.eventNameDropDownStore,
                    typeAhead:      true,
                    triggerAction:  'all',
                    mode:           'local',
                    editable:       false,
                    displayField:   'optionname',
                    valueField:     'optionvalue'
                })
            }],
            tbar: [
            {
                text:       'Add',
                //disabled: true,
                id:         'ExtGridEditorAutomailerAdd',
                handler:    function(){
                    var Record = ExtGridEditorAutomailer.grid.getStore().recordType;
                    var p = new Record({templateid: 'Choose One...', days: 0, event: 'Choose One...'});
                    // Code to insert a new row
                    ExtGridEditorAutomailer.grid.stopEditing();
                    var rownum = ExtGridEditorAutomailer.gridstore.getCount();
                    ExtGridEditorAutomailer.gridstore.insert(rownum,p);
                    ExtGridEditorAutomailer.grid.startEditing(rownum, 0);
                }
            },
            '-',
            {
                text:     'Delete',
                //disabled: true,
                id:       'ExtGridEditorAutomailerDelete',
                handler:  function(){
                    var rec = ExtGridEditorAutomailer.grid.getSelectionModel().getSelected();
                    if (!rec) {
                        return false;
                    }
                    ExtGridEditorAutomailer.grid.store.remove(rec);
                }
            },
            '-',
            {
                text:     'Save',
                //disabled: true,
                id:       'ExtGridEditorAutomailerSave',
                handler:  function(){
                    var rec = ExtGridEditorAutomailer.grid.getStore();
                    if (!rec) {
                        return false;
                    }else{
                        var ArrayData = {};

                        rows = rec.data['items'];
                        for(x=0; x<rows.length; x++){
                            rows2 = rows[x].data;

                            for(var item in rows2) {
                                if(rows2[item] == 'Choose One...'){
                                    Ext.Msg.alert('Error', lang('There are some invalid values. Please correct them and try again.'));
                                    exit;
                                }
                            }
                            ArrayData[x] = rows[x].data;
                        }

                        Ext.Ajax.request({
                            url:      "index.php?fuse=admin&action=updatePluginSettingGrid",
                            params:{
                                settingId:  <?php echo $this->settingId;?>,
                                settingValues: Ext.util.JSON.encode(ArrayData)
                            },
                            success: function(xhr){
                                var data = Ext.util.JSON.decode(xhr.responseText);
                                if(data.error){
                                    msg(lang("There was an error performing this action"));
                                }else if(data.message){
                                    msg(data.message);
                                }else{
                                    msg(lang("The action has been performed"));
                                }
                                ExtGridEditorAutomailer.gridstore.commitChanges();
                            },
                            failure: function(){
                                var data = Ext.util.JSON.decode(xhr.responseText);

                                if(data.error){
                                    msg(lang("There was an error performing this action"));
                                }else if(data.message){
                                    msg(data.message);
                                }else{
                                    msg(lang("The action has been performed"));
                                }
                            }
                        });
                    }
                }
            }
            ],
            stripeRows:       true,
            viewConfig:       {
                forceFit:       true,
                enableRowBody:  true,
                emptyText:      lang("There are no items to display"),
                scrollOffset:   1
            }
        });

        ExtGridEditorAutomailer.grid.render();
    });

</script>
<span id='ExtGridEditorAutomailer'></span>