/**

 * Pimcore

 *

 * LICENSE

 *

 * This source file is subject to the new BSD license that is bundled

 * with this package in the file LICENSE.txt.

 * It is also available through the world-wide-web at this URL:

 * http://www.pimcore.org/license

 *

 * @copyright  Copyright (c) 2009-2014 pimcore GmbH (http://www.pimcore.org)

 * @license    http://www.pimcore.org/license     New BSD License

 */



pimcore.registerNS("pimcore.settings.videothumbnail.panel");

pimcore.settings.videothumbnail.panel = Class.create({



    initialize: function () {



        this.getTabPanel();

    },



    activate: function () {

        var tabPanel = Ext.getCmp("pimcore_panel_tabs");

        tabPanel.activate("pimcore_videothumbnails");

    },



    getTabPanel: function () {



        if (!this.panel) {

            this.panel = new Ext.Panel({

                id: "pimcore_videothumbnails",

                title: t("video_thumbnails"),

                iconCls: "pimcore_icon_videothumbnails",

                border: false,

                layout: "border",

                closable:true,

                items: [this.getTree(), this.getEditPanel()]

            });



            var tabPanel = Ext.getCmp("pimcore_panel_tabs");

            tabPanel.add(this.panel);

            tabPanel.setActiveItem("pimcore_videothumbnails");



            this.panel.on("destroy", function () {

                pimcore.globalmanager.remove("videothumbnails");

            }.bind(this));



            pimcore.layout.refresh();

        }



        return this.panel;

    },

    

    getTree: function () {

        if (!this.tree) {

            var store = Ext.create('Ext.data.TreeStore', {

                autoLoad: false,

                autoSync: true,

                proxy: {

                    type: 'ajax',

                    url: '/admin/settings/video-thumbnail-tree',

                    reader: {

                        type: 'json'

                        //,

                        //totalProperty : 'total',

                        //rootProperty: 'nodes'



                    }

                },

                root: {

                    iconCls: "pimcore_icon_thumbnails"

                }

            });



            this.tree = new Ext.tree.TreePanel({

                store: store,

                id: "pimcore_panel_videothumbnail_tree",

                region: "west",

                useArrows:true,

                autoScroll:true,

                animate:true,

                containerScroll: true,

                border: true,

                width: 200,

                split: true,

                root: {

                    id: '0',

                    expanded: true

                },

                listeners: this.getTreeNodeListeners(),

                rootVisible: false,

                tbar: {

                    items: [

                        {

                            text: t("add_thumbnail"),

                            iconCls: "pimcore_icon_add",

                            handler: this.addField.bind(this)

                        }

                    ]

                }

            });



            this.tree.on("render", function () {

                this.getRootNode().expand();

            });

        }



        return this.tree;

    },



    getEditPanel: function () {

        if (!this.editPanel) {

            this.editPanel = new Ext.TabPanel({

                region: "center",

                plugins:

                    [

                        Ext.create('Ext.ux.TabCloseMenu', {

                            showCloseAll: true,

                            showCloseOthers: true

                        }),

                        Ext.create('Ext.ux.TabReorderer', {})

                    ]

            });

        }



        return this.editPanel;

    },





    getTreeNodeListeners: function () {

        var treeNodeListeners = {

            'itemclick' : this.onTreeNodeClick.bind(this),

            'itemcontextmenu': this.onTreeNodeContextmenu.bind(this),

            'beforeitemappend': function( thisNode, newChildNode, index, eOpts ) {

                newChildNode.data.leaf = true;

                newChildNode.data.iconCls = "pimcore_icon_videothumbnails";

            }

        };



        return treeNodeListeners;

    },



    onTreeNodeClick: function (tree, record, item, index, e, eOpts ) {

        this.openThumbnail(record.data.id);

    },



    openThumbnail: function (id) {

        var existingPanel = Ext.getCmp("pimcore_videothumbnail_panel_" + id);

        if(existingPanel) {

            this.editPanel.setActiveItem(existingPanel);

            return;

        }



        Ext.Ajax.request({

            url: "/admin/settings/video-thumbnail-get",

            params: {

                name: id

            },

            success: function (response) {

                var data = Ext.decode(response.responseText);



                var fieldPanel = new pimcore.settings.videothumbnail.item(data, this);

                pimcore.layout.refresh();

            }.bind(this)

        });

    },



    onTreeNodeContextmenu: function (tree, record, item, index, e, eOpts ) {

        e.stopEvent();



        tree.select();



        var menu = new Ext.menu.Menu();

        menu.add(new Ext.menu.Item({

            text: t('delete'),

            iconCls: "pimcore_icon_delete",

            handler: this.deleteField.bind(this, tree, record)

        }));



        menu.showAt(e.pageX, e.pageY);

    },



    addField: function () {

        Ext.MessageBox.prompt(t('add_thumbnail'), t('enter_the_name_of_the_new_thumbnail'),

                                                this.addFieldComplete.bind(this), null, null, "");

    },



    addFieldComplete: function (button, value, object) {



        var regresult = value.match(/[a-zA-Z0-9_\-]+/);

        if (button == "ok" && value.length > 2 && regresult == value) {



            var thumbnails = this.tree.getRootNode().childNodes;

            for (var i = 0; i < thumbnails.length; i++) {

                if (thumbnails[i].text == value) {

                    Ext.MessageBox.alert(t('add_thumbnail'),

                                         t('the_key_is_already_in_use_in_this_level_please_choose_an_other_key'));

                    return;

                }

            }



            Ext.Ajax.request({

                url: "/admin/settings/video-thumbnail-add",

                params: {

                    name: value

                },

                success: function (response) {

                    var data = Ext.decode(response.responseText);



                    this.tree.getStore().load();



                    if(!data || !data.success) {

                        Ext.Msg.alert(t('add_thumbnail'), t('problem_creating_new_thumbnail'));

                    } else {

                        this.openThumbnail(data.id);

                    }

                }.bind(this)

            });

        }

        else if (button == "cancel") {

            return;

        }

        else {

            Ext.Msg.alert(t('add_thumbnail'), t('problem_creating_new_thumbnail'));

        }

    },



    deleteField: function (tree, record) {

        Ext.Ajax.request({

            url: "/admin/settings/video-thumbnail-delete",

            params: {

                name: record.data.id

            }

        });



        this.getEditPanel().removeAll();

        record.remove();

    }

});



