<?php

include_once("_dirinfo.php");
include_once (PATH_TO_ROOT."init.php");
include_once(PATH_TO_ROOT."config.php");

$idField = "id";

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

$cmpName = "imageListPanel_" . $tableName;

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

?>
var <?php echo $cmpName; ?> = new Ext.form.FormPanel({
        width:500,
        height:300,
        autoScroll:true,
        layout: 'fit', 
        closable: 'true',
        title: 'Image list',
        items:[new Ext.grid.EditorGridPanel({
                height: 200,
                id: 'grid_<?php echo $tableName; ?>',
                autoScroll: true,
                clicksToEdit: 1,
                border: 0,
                listeners: {
                    afteredit: function(e)
                    {
                        Ext.Ajax.request({
                            url:'<?php echo $ajax;?>',
                            params: 
                            { 
                                        action  : 'update' ,                                    
                                            id  : e.record.data.id_plugin_gallery_image,
                                        idField : 'id_plugin_gallery_image',
                                         field  : e.field,
                                         value  : e.value,
                                         oldValue: e.originalValue,
                                         table  : '_plugin_gallery_image'                                                   
                            },
                            success : function(resp,opt)
                            { 
                               e.record.commit();
                            }                                                       
                               
                        });
                    }
                },
                tbar:[{
                    icon: '<?php echo $pluginDir; ?>/_img/ico-add.png',
                    handler:function(){
                        /*CallScript('<?php echo $pluginDir; ?>/_forms/window.addImage.php', {
                           tableName : '<?php echo $tableName; ?>',
                           questionId:  '<?php echo $questionId; ?>',
                           pluginDir: '<?php echo $pluginDir; ?>',
                           projectId : '<?php echo $projectId; ?>'
                        });*/
                      /*  CallScript('<?php echo PATH_TO_ROOT . "warpitDevelopment/_plugins/tinyMCE/jscripts/tiny_mce/plugins/imagemanager/rpc/index.php";?>',{
                            jsonData: '{"result":null,"id":null,"error":{"errstr":"Could not get raw post data.","errfile":"","errline":null,"errcontext":"","level":"FATAL"}}'
                        });*/
                       
                       //mcImageManager.browse('example7','url','','',{document_base_url : 'http://tinymce.moxiecode.com/', remember_last_path : 1});
                       mcImageManager.browse({
                            'oninsert': function(rtn)
                            {
                                //console.log(rtn);
                                CallScript('<?php echo $ajax; ?>', {
                                    action: 'insertPath',
                                    projectId: <?php echo $projectId; ?>,
                                    questionId: <?php echo $questionId; ?>,
                                    path: rtn.files[0].url
                                },function(){
                                    Ext.getCmp('grid_<?php echo $tableName; ?>').getStore().reload();
                                })
                            },
                            'relative_urls' : false,
                        });
                    }
                    
                }],
                store: new Ext.data.JsonStore({
                        url : '<?php echo $ajax; ?>',
                        root : 'rows',
                        autoLoad: true,
                        baseParams: {
                            action: 'getImageList',
                            projectId: <?php echo $projectId; ?>,
                            questionId: <?php echo $questionId; ?>
                            },
                        fields:[
                                 {name: 'id_plugin_gallery_image', type:'int'},
                                 {name: 'path', type:'string'}
                        ]}),
                    colModel: new Ext.grid.ColumnModel({
                        defaults: {
                            width: 120,
                            sortable: true
                    },
                    columns: [
                        {
                            menuDisabled: true,
                            sortable: false,
                            xtype: 'actioncolumn',
                            width: 25,
                            items: 
                            [
                            // -------------------------
                            // DELETE
                            // -------------------------
                            {
                                icon: '<?php echo $pluginDir; ?>/_img/delete.png',
                                handler: function(grid, rowIndex, colIndex) {
                                    
                                    Ext.MessageBox.confirm('Delate image confirmation', 'Are you sure you want to do that?', function(btn){
                                        if (btn == 'yes') {
                                            var rec = grid.getStore().getAt(rowIndex);
                                            Ext.Ajax.request({
                                                url:'<?php echo $ajax;?>',
                                                params: 
                                                { 
                                                    action  : 'delete_image' ,                                    
                                                    id  : rec.get('id_plugin_gallery_image')
                                                },
                                                success : function(resp,opt)
                                                { 
                                                     grid.getStore().removeAll();                                            
                                                     grid.getStore().reload();
                                                }                                                       
                                            })
                                        }
                                    });
                                }
                            }
                           
                            ]
                        },{
                            header: 'Preview', 
                            width:400,
                            renderer: function(value, metaData, record, rowIndex, colIndex, store){
                                    return "<img width='250px' height='150px' src='" + record.get('path') +"'/>";
                            }
                        },{
                            header: 'Image', 
                            dataIndex: 'path',
                            width:400,
                            listeners:{
                                dbclick: function(){
                                 //   console.log("tu sem");
                                }
                            }
                         
                        }
                        
                    ],
                    }),
                    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
                    frame: true,
                })]
    }).show();
    
Ext.getCmp('pluginSettings_<?php echo $tableName; ?>').add(<?php echo $cmpName; ?>);
Ext.getCmp('pluginSettings_<?php echo $tableName; ?>').setActiveTab(<?php echo $cmpName; ?>);