/**
* @author Shea Frederick - http://www.vinylfox.com
* @class Ext.ux.form.HtmlEditor.Image
* @extends Ext.util.Observable
* <p>A plugin that creates an image button in the HtmlEditor toolbar for inserting an image. The method to select an image must be defined by overriding the selectImage method. Supports resizing of the image after insertion.</p>
* <p>The selectImage implementation must call insertImage after the user has selected an image, passing it a simple image object like the one below.</p>
* <pre>
*      var img = {
*         Width: 100,
*         Height: 100,
*         ID: 123,
*         Title: 'My Image'
*      };
* </pre>
*/


Ext.ux.form.HtmlEditor.Image = Ext.extend(Ext.util.Observable, {
    // Link language text
    langTitle: 'Insert Image',
    langInsert: 'Insert',
    langCancel: 'Cancel',
    langURL: 'Image URL',
    init: function (cmp) {
        cmp.enableLinks = false;
        this.cmp = cmp;
        this.cmp.on('render', this.onRender, this);
    },
    onRender: function () {
        var cmp = this.cmp;
        var btn = this.cmp.getToolbar().addButton({
            iconCls: 'x-edit-image',
            handler: function () {
                var sel = this.cmp.getSelectedText();
                if (!this.imgWindow) {
                    this.imgWindow = new Ext.Window({
                        title: this.langTitle,
                        closeAction: 'hide',
                        width: 250,
                        height: 160,
                        items: [{
                            xtype: 'form',
                            itemId: 'insert-img',
                            border: false,
                            plain: true,
                            bodyStyle: 'padding: 10px;',
                            labelWidth: 50,
                            labelAlign: 'right',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: this.langURL,
                                vtype: 'url',
                                name: 'urlField',
                                anchor: '100%',
                                value: 'http://'
                            }]
                        }],
                        buttons: [{
                            text: this.langInsert,
                            handler: function () {
                                var frm = this.imgWindow.getComponent('insert-img').getForm();

                                if (frm.isValid()) {
                                    var afterSpace = '', sel = this.cmp.getSelectedText(true), url = frm.findField('urlField').getValue();
                                    if (sel.hasHTML) {
                                        text = sel.html;
                                    }
                                    var html = '<img src="' + url + '" />' + afterSpace;
                                    this.cmp.insertAtCursor(html);
                                    this.imgWindow.hide();
                                } else {
                                    if (!frm.findField('urlField').isValid()) {
                                        frm.findField('urlField').getEl().frame();
                                    }
                                }

                            },
                            scope: this
                        }, {
                            text: this.langCancel,
                            handler: function () {
                                this.imgWindow.close();
                            },
                            scope: this
                        }],
                        listeners: {
                            show: {
                                fn: function () {
                                    var frm = this.imgWindow.getComponent('insert-img').getForm();
                                    
                                    if (frm.findField('urlField').reset())
                                        frm.findField('urlField').reset().focus(true, 50);
                                    else
                                        frm.findField('urlField').focus(true, 50);
                                },
                                scope: this,
                                defer: 350
                            }
                        }
                    });
                    this.imgWindow.show();
                } else {
                    this.imgWindow.show();
                    this.imgWindow.getEl().frame();
                }
            },
            scope: this,
            tooltip: this.langTitle
        });
    }
});







/*




Old version



Ext.ux.form.HtmlEditor.Image = Ext.extend(Ext.util.Observable, {
    // Image language text
    langTitle: 'Insert Image',
    urlSizeVars: ['width', 'height'],
    basePath: 'image.php',
    init: function (cmp) {
        this.cmp = cmp;
        this.cmp.on('render', this.onRender, this);
        this.cmp.on('initialize', this.onInit, this, { delay: 100, single: true });
    },
    onEditorMouseUp: function (e) {
        Ext.get(e.getTarget()).select('img').each(function (el) {
            var w = el.getAttribute('width'), h = el.getAttribute('height'), src = el.getAttribute('src') + ' ';
            src = src.replace(new RegExp(this.urlSizeVars[0] + '=[0-9]{1,5}([&| ])'), this.urlSizeVars[0] + '=' + w + '$1');
            src = src.replace(new RegExp(this.urlSizeVars[1] + '=[0-9]{1,5}([&| ])'), this.urlSizeVars[1] + '=' + h + '$1');
            el.set({ src: src.replace(/\s+$/, "") });
        }, this);

    },
    onInit: function () {
        Ext.EventManager.on(this.cmp.getDoc(), {
            'mouseup': this.onEditorMouseUp,
            buffer: 100,
            scope: this
        });
    },
    onRender: function () {
        var btn = this.cmp.getToolbar().addButton({
            iconCls: 'x-edit-image',
            handler: this.selectImage,
            scope: this,
            tooltip: {
                title: this.langTitle
            },
            overflowText: this.langTitle
        });
    },
    selectImage: Ext.emptyFn,
    insertImage: function (img) {
        this.cmp.insertAtCursor('<img src="' + this.basePath + '?' + this.urlSizeVars[0] + '=' + img.Width + '&' + this.urlSizeVars[1] + '=' + img.Height + '&id=' + img.ID + '" title="' + img.Name + '" alt="' + img.Name + '">');
    }
});


*/