<?php

$idField = "id";

$tableName = $_POST['tableName'];
$questionId = $_POST['questionId'];
$pluginDir = $_POST['pluginDir'];
$projectId = $_POST['projectId'];

$gridName = "settingsGrid_" . $tableName;

$ajax = $pluginDir . "/_forms/_ajax/ajax.settings.php";


?>

var <?php echo $gridName;?> = new Ext.grid.PropertyGrid({
        id : '<?php echo $gridName; ?>',
        title: "Basic settings",
        editable : true,
        border : false,
        layout: 'fit',
        height: 300,
        source: {
            button_image_normal: '',
            button_image_clicked: '',
            button_color_normal: '',
            button_width: 0,
            button_height : 0,
            answer_box_width: 0,
            answer_box_height: 0
        },
        propertyNames: {
            button_image_normal: 'Button normal image',
            button_image_clicked: 'Button clicked image',
            button_color_normal: 'Button color normal',
            button_width: 'Button width',
            button_height : 'Button height',
            answer_box_width: 'Answer box width',
            answer_box_height: 'Answer box height'
            
        },
        loadData: function() 
        {
            new Ext.data.JsonStore({
                url : '<?php echo $ajax; ?>',
                root : 'rows',
                autoLoad: true,
                idProperty : '<?php echo $idField; ?>',
                baseParams: {
                    action: 'get',
                    projectId: '<?php echo $projectId; ?>',
                    questionId: '<?php echo $questionId; ?>'
                    
                    },
                fields:[
                         { name:"button_image_clicked", type: 'string' },
                         { name:"button_color_normal", type: 'string' },
                         { name:"answer_box_height", type: 'int' },
                         { name:"answer_box_width", type: 'int' },
                         { name:"button_height", type: 'int' },
                         { name:"button_width", type: 'int' },
                         { name:"button_image_normal", type: 'string' },
                         
                ],
                listeners: {
                    load: {
                        fn: function(store, records, options){
                                <?php echo $gridName; ?>.setSource(store.getAt(0).data);
                        }
                    }
                }
           });
        },
        saveData: function()
        {
            var source = <?php echo $gridName; ?>.getSource();
            
            var jsonData = Ext.encode(source);
            
            CallScript('<?php echo $ajax; ?>', {
                action: 'Save',
                data: jsonData,
                projectId: <?php echo $projectId; ?>,
                questionId: <?php echo $questionId; ?>
            }) 
        },
        listeners:{
            propertychange: function(record){
                    <?php echo $gridName; ?>.saveData();
                    <?php echo $gridName; ?>.loadData();
            }
        }
        
}).show();

<?php echo $gridName; ?>.loadData();

Ext.getCmp('pluginSettings_<?php echo $tableName; ?>').insert(0, <?php echo $gridName; ?>);
Ext.getCmp('pluginSettings_<?php echo $tableName; ?>').setActiveTab(<?php echo $gridName; ?>);
