/*
* @class Images.ImageSets
* @extends Ext.Panel
*
* Extension to Panel for ImageSets functionality
*
* @constructor accepts config object
*/

MSDImages.ImageSets = Ext.extend(Ext.tree.TreePanel, {

    id: 'ImageSets',

    initComponent: function() {
        Ext.apply(this, {
            region: 'center',
            split: true,
            animate: true,
            enableDD: true,
            containerScroll: true,
            rootVisible: false
        });

        if (MSDImages.Config.loggedIn) {
            Ext.apply(this, {
                ddGroup: 'ImageSetsDD',
                dropConfig: {
                    ddGroup: 'ImageSetsDD',
                    dropAllowed: 'x-dd-drop-ok-add',
                    allowContainerDrop: true,
                    onContainerDrop: function(source, e, data) {
                        //console.log("container has dropped");
                        if (data.resultData) {
                            this.tree.addImage(data.resultData);
                            return true;
                        }
                        return false;
                    },
                    onContainerOver: function(source, e, data) {
                        return data.resultData ? this.dropAllowed : false;
                    }
                },
                lines: false,
                singleExpand: true,
                autoScroll: true,
                root: new Ext.tree.AsyncTreeNode({
                    expanded: true,
                    children: imageSetsData,
                    allowDrop: false,
                    listeners: {
                        'load': function() {
                            this.on({
                                'beforenodedrop': this.checkDrop,
                                'insert': this.onChange,
                                'append': this.onChange,
                                'dragdrop': this.onChange,
                                'textchange': this.onChange

                            });
                        },
                        scope: this
                    }
                }),
                tbar: [
					{
					    text: 'New Set',
					    id: 'btnAddImageSet1',
					    iconCls: 'icon-folder',
					    handler: function(btn, evt) {
					        if (!this.checkAdd()) { return; }
					        var node = this.root.appendChild(new Ext.tree.TreeNode({
					            text: "Image Set " + (this.root.childNodes.length + 1),
					            allowDrag: false,
					            iconCls: 'set-node',
					            allowDelete: true,
					            singleClickExpand: true
					        }));

					        if (node) {
					            this.getSelectionModel().select(node);
					            (function() {
					                this.getTreeEl().scroll('down', 9999);
					                this.treeEditor.editNode = node;
					                this.treeEditor.startEdit(node.ui.textNode);
					            }).defer(100, this);
					        }
					    },
					    scope: this
					}
				]
            });

            this.treeEditor = new Ext.tree.TreeEditor(this, {
                id: 'ImageSetsEditor',
                allowBlank: false,
                ignoreNoChange: true,
                selectOnFocus: true,
                editDelay: 500,
                minLength: 1,
                maxLength: 20
            });

            this.updateTask = new Ext.util.DelayedTask();

            this.on('click', function(node, e) {
                if (node.isLeaf()) {
                    return false;
                }
                else {
                    node.expand();
                }
            });
            this.on('dblclick', function(node, e) {
                if (node.getDepth() === 1) {
                    this.treeEditor.triggerEdit(node);
                }
            });
            this.on('beforeexpandnode', function(node) {
                node.select();
            });
        }
        else {
            this.root = {};
            Ext.apply(this, { contentEl: 'logged-off-image-sets' });
        }
        MSDImages.ImageSets.superclass.initComponent.call(this, arguments);
    },

    onRender: function(ct, position) {
        MSDImages.ImageSets.superclass.onRender.call(this, ct, position);

        if (MSDImages.Config.loggedIn) {
            (function() { Ext.getCmp('ImageSets').dropZone.setPadding(0, 0, Ext.getCmp('ImageSets').getInnerHeight(), 0); }).defer(1000);
        }

    },

    checkDrop: function(de) {
        //console.log(de.target, de.dropNode);
        if (de.dropNode.parentNode && de.target.parentNode.id === de.dropNode.parentNode.id) {
            return true; //move within set
        }
        else {
            return this.checkAdd(de.tree, de.target, de.dropNode);
        }
    },

    checkAdd: function(tree, targetNode, node) {
        var retVal = true;

        if (targetNode && targetNode.leaf) {
            targetNode = targetNode.parentNode;
        }

        var isLeaf = (node && ((node.attributes && node.attributes.leaf) || node.leaf));
        if (isLeaf) {
            targetNode.select();
            targetNode.expand();

            //check ok to append/insert figure
            var full = targetNode.childNodes.length == MSDImages.Config.maxImageSetSize;
            var fullAfter = targetNode.childNodes.length == MSDImages.Config.maxImageSetSize - 1;
            var duplicate = (node.parentNode != targetNode) && (targetNode.findChild('id', node.attributes.id) != null);

            if (!full && !duplicate) {
                if (fullAfter) { MSDImages.Utils.Message.show("Image collection is now full"); }
            }
            else {
                if (full) { MSDImages.Utils.Message.show("This image collection is now full"); }
                else if (duplicate) { MSDImages.Utils.Message.show("This image is already in the collection"); }
                retVal = false;
            }
        }
        //new set
        else if (this.root.childNodes.length === MSDImages.Config.maxImageSets) {
            MSDImages.Utils.Message.show("You have reached the maximum number of image sets");
            retVal = false;
        }
        return retVal;
    },

    addImage: function(data) {
        //check logged in
        if (!MSDImages.Config.loggedIn) {
            MSDImages.Utils.Message.show(Images.Lang.not_logged_in);
            return false;
        }

        //try to work out which set to add to..
        var root = this.root;
        var sets = root.childNodes.length;
        var node = null;
        if (sets === 0) {
            //first add new set
            node = this.root.appendChild(new Ext.tree.TreeNode({
                text: "New image set" + (this.root.childNodes.length + 1),
                allowDrag: false,
                allowDelete: true,
                singleClickExpand: true
            }));
        }
        else {
            //default to first slideset then look for selected node
            node = root.firstChild;
            var sel = this.getSelectionModel().getSelectedNode();
            if (sel) {
                if (sel.isLeaf()) {
                    node = sel.parentNode;
                }
                else if (sel != root) {
                    node = sel;
                }
            }
        }

        //check image sets is open
        Ext.getCmp('UserPanel').expand();

        //expand/select node and append new nodes
        node.expand(false, false);

        //console.log('append', data);

        var nodeAppend = new Ext.tree.TreeNode(data);
        nodeAppend.leaf = true;

        if (!this.checkAdd(this, node, nodeAppend)) { return false; }

        var appended = node.appendChild(nodeAppend);
        if (appended) {
            node.select();
            appended.ensureVisible();
            try { appended.ui.highlight('D9E8FB'); }
            catch (e) { }
        }
        return false;
    },

    download: function(nodeId) {
        var node = this.getNodeById(nodeId);
        node.expand();
        var images = node.childNodes.length;

        if (images === 0) {
            MSDImages.Utils.Message.show('This image set is empty');
            return false;
        }

        var downloadWin = new Ext.Window({
            layout: 'fit',
            title: "Download",
            maximizable: false,
            width: 400,
            height: 300,
            autoScroll: true,
            closeAction: 'close',
            modal: true,
            plain: true,
            html: '<div id="download-window"><p>Please wait while your image set is saved...</p></div>'
        });

        downloadWin.show();

        MSDImages.Utils.Log('Slidesets downloaded');

        var tpl = new Ext.XTemplate.from('tplDownload');
        tpl.overwrite('download-window', {
            title: node.text,
            count: images,
            slidesetid: nodeId
        });

    },

    generateFile: function(slidesetId, format) {
        Ext.fly('download-inner').update('<div class="loading-indicator">' + 'Generating your Image Set' + '</div>');
        var root = this.getNodeById(slidesetId);
        var slides = root.childNodes;

        var xml = ['<set>'];
        xml.push('<title>');
        xml.push(root.text);
        xml.push('</title><images>');
        for (var j = 0; j < slides.length; j++) {
            xml.push('<image>');
            xml.push(slides[j].attributes.id);
            xml.push('</image>');
        }
        xml.push('</images></set>');

        xml = xml.join('');

        //Send AJAX request:
        Ext.Ajax.request({
            url: '/ImageCollection/Download',
            method: 'POST',
            params: { format: format, data: xml },
            failure: function() {
                Ext.fly('download-window').update('Unable to download');
            },
            success: function(response, o) {
                if (response && response.responseText) {
                    var data = Ext.decode(response.responseText);

                    if (data.error) {
                        Ext.fly('download-window').update('Download error');
                        return;
                    }

                    var path = data.path;
                    var extension = path.substring(path.lastIndexOf('.') + 1, path.length);

                    var tplData = {
                        title: root.text,
                        format: format,
                        path: path + "?name=" + encodeURIComponent(root.text),
                        size: data.size
                    };

                    var tpl = new Ext.XTemplate.from('tplSaveTemplate');
                    tpl.overwrite('download-window', tplData);

                }
                else {
                    Ext.fly('download-window').update('Download error');
                }
            }
        });
    },

    deleteNode: function(nodeId) {
        var nodeToRemove = this.getNodeById(nodeId);

        //delete if image, confirm if set
        if (nodeToRemove.isLeaf() || nodeToRemove.childNodes.length === 0) {
            nodeToRemove.remove();
            this.onChange();
        }
        else {
            Ext.MessageBox.show({
                title: 'Delete image set',
                msg: 'Are you sure you want to delete the image set?',
                buttons: Ext.Msg.YESNO,
                width: 200,
                fn: function(btn) {
                    if (btn == 'yes') {
                        nodeToRemove.remove();
                        Ext.getCmp("ImageSets").onChange();
                    }
                }
            });
        }
        return false;
    },


    onChange: function() {
        this.updateTask.delay(1000, this.updateServer, this);
    },

    updateServer: function() {
        //send tree to server for persisting
        var xml = ['<sets>'];
        var sets = this.root.childNodes;
        for (var i = 0; i < sets.length; i++) {
            xml.push('<set><title>');
            xml.push(sets[i].text);
            xml.push('</title><images>');
            var imgs = sets[i].childNodes;
            for (var j = 0; j < imgs.length; j++) {
                xml.push('<image>');
                xml.push(imgs[j].attributes.id);
                xml.push('</image>');
            }
            xml.push('</images>');

            xml.push('<selected>');
            xml.push(sets[i].expanded);
            xml.push('</selected>');

            xml.push('</set>');
        }
        xml.push('</sets>');

        xml = xml.join('');

        Ext.Ajax.request({
            url: '/ImageCollection/Save',
            method: 'POST',
            params: { xml: xml}/*,
            failure: function() {
                console.log('error saving', arguments);
            },
            success: function(response, o) {
                console.log('saved');
            }*/
        });

    }

});

/*
Custom tree node rendering
Adapted from Ext.tree.ColumnNodeUI
*/
Ext.override(Ext.tree.TreeNodeUI, {
    focus: Ext.emptyFn, // prevent odd scrolling behavior

    renderElements: function(n, a, targetNode, bulkRender) {
        if (!a.icon) { a.icon = a.image; }

        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
        var leaf = n.leaf;
        var t = n.getOwnerTree();
        var buf = [
				'<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf ', leaf ? 'image-node' : 'set-node', '">',
				'<table cellpadding="0" cellspacing="0" width="100%"><tbody><tr valign="top" class="tree-node-tr"><td class="tree-indent' + (leaf ? '2' : '1') + '" valign="top"><span class="x-tree-node-indent">', this.indentMarkup, "</span>",
				'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
				leaf ? '<a onclick="return MSDImages.Utils.OpenWindow(this.href, \''+n.text+'\', 830,900, this);" href="/Image/Popup/' + n.id + '" onclick="self.location=this.href">' : '',
				'<img ext:qtip="', leaf ? 'View image' : 'Edit title', '" src="', leaf ? a.icon || '/images/table.gif' : this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" />',
				leaf ? '</a>' : '',
				'</td><td class="x-tree-node-textcell"><a></a><span unselectable="on">',
				(n.text.length > 70) ? n.text.substring(0, 70) + '<span ext:qtip="' + n.text.replace("'", "&apos;") + '">&hellip;</span>' : n.text,
				'</span></td><td style="width:', (leaf ? '23' : '56'), 'px" valign="top">',
				leaf ? '' : '<a class="x-tree-node-download" href="#" onclick="return Ext.getCmp(\'ImageSets\').download(\'' + n.id + '\')"><img ext:qtip="Export image set to PPT or PDF" src="' + Ext.BLANK_IMAGE_URL + '" width="25" height="25"/></a>',
				'<a class="x-tree-node-delete" href="#" onclick="return Ext.getCmp(\'ImageSets\').deleteNode(\'', n.id, '\')"><img ext:qtip="Delete', (leaf ? '' : ' entire set'), '" width="', leaf ? '19' : '25', '" height="', leaf ? '19' : '25', '" src="', Ext.BLANK_IMAGE_URL, '"/></a></td>',
				'</tr></tbody></table></div><ul class="x-tree-node-ct" style="display:none;"></ul>',
				"</li>"].join('');

        var nel;
        if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())) {
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
        } else {
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
        }

        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];

        var tr = this.elNode.firstChild.firstChild.firstChild;

        var cs = tr.childNodes[0].childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];

        this.anchor = tr.childNodes[1].firstChild;
        this.textNode = tr.childNodes[1].childNodes[1];
    }
});