/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

(function() {
    // Load image preview.
    var IMAGE = 1,
    CLEANUP = 8;

    var imageDialog = function(editor) {
        var onImgLoadEvent = function() {
            // Image is ready.
            var original = this.originalElement;
            original.setCustomData('isReady', 'true');
            original.removeListener('load', onImgLoadEvent);
            original.removeListener('error', onImgLoadErrorEvent);
            original.removeListener('abort', onImgLoadErrorEvent);

        };

        var onImgLoadErrorEvent = function() {
            // Error. Image is not loaded.
            var original = this.originalElement;
            original.removeListener('load', onImgLoadEvent);
            original.removeListener('error', onImgLoadErrorEvent);
            original.removeListener('abort', onImgLoadErrorEvent);

            // Set Error image.
            var noimage = CKEDITOR.getUrl(editor.skinPath + 'images/noimage.png');

        };
        return {
            title: editor.lang.image.title,
            minWidth: 420,
            minHeight: 310,
            onShow: function() {
                this.imageElement = false;
                this.imageEditMode = false;

                var editor = this.getParentEditor(),
                sel = this.getParentEditor().getSelection(),
                element = sel.getSelectedElement();

                // Copy of the image
                this.originalElement = editor.document.createElement('img');
                this.originalElement.setAttribute('rel', '');
                this.originalElement.setCustomData('isReady', 'false');

                if (element && element.getName() == 'img' && ! element.getAttribute('_cke_protected_html')) this.imageEditMode = 'img';

                if (this.imageEditMode || this.imageElement) {
                    if (!this.imageElement) this.imageElement = element;

                    // Fill out all fields.
                    this.setupContent(IMAGE, this.imageElement);
                }
            },
            onOk: function() {
                // Create a new image
                if (!this.imageEditMode) {
                    // Image dialog -> create IMG element.
                    this.imageElement = editor.document.createElement('img');
                    this.imageElement.setAttribute('rel', '');
                }

                // Set attributes.
                this.commitContent(IMAGE, this.imageElement);

                // Insert a new Image.
                if (!this.imageEditMode) {
                    editor.insertElement(this.imageElement);
                }
            },
            onLoad: function() {
                var doc = this._.element.getDocument();
            },
            onHide: function() {
                if (this.originalElement) {
                    this.originalElement.removeListener('load', onImgLoadEvent);
                    this.originalElement.removeListener('error', onImgLoadErrorEvent);
                    this.originalElement.removeListener('abort', onImgLoadErrorEvent);
                    this.originalElement.remove();
                    this.originalElement = false; // Dialog is closed.
                }
            },
            contents: [{
                id: 'info',
                label: editor.lang.image.infoTab,
                accessKey: 'I',
                elements: [{
                    type: 'vbox',
                    padding: 0,
                    children: [
                    {
                        type: 'hbox',
                        widths: ['280px', '110px'],
                        align: 'right',
                        children: [{
                            id: 'txtUrl',
                            type: 'text',
              label : editor.lang.common.url,
                            onChange: function() {
                                var dialog = this.getDialog(),
                                newUrl = this.getValue();

                                //Update original image
                                if (newUrl.length > 0) //Prevent from load before onShow
                                {
                                    dialog = this.getDialog();
                                    var original = dialog.originalElement;

                                    original.setCustomData('isReady', 'false');

                                    original.on('load', onImgLoadEvent, dialog);
                                    original.on('error', onImgLoadErrorEvent, dialog);
                                    original.on('abort', onImgLoadErrorEvent, dialog);
                                    original.setAttribute('src', newUrl);

                                }
                            },
                            setup: function(type, element) {
                                if (type == IMAGE) {
                                    var url = element.data('cke-saved-src') || element.getAttribute('src');
                                    var field = this;

                                    // In IE7 the dialog is being rendered improperly when loading
                                    // an image with a long URL. So we need to delay it a bit. (#4122)
                                    setTimeout(function() {
                                        field.setValue(url); // And call this.onChange()
                                        field.focus();
                                    },
                                    0);
                                }
                            },
                            commit: function(type, element) {
                                if (type == IMAGE && (this.getValue() || this.isChanged())) {
                                    element.data('cke-saved-src', decodeURI(this.getValue()));
                                    element.setAttribute('src', decodeURI(this.getValue()));
                                    element.removeAttribute('width');
                                    element.removeAttribute('height');
                                }
                                else if (type == CLEANUP) {
                                    element.setAttribute('src', ''); // If removeAttribute doesn't work.
                                    element.removeAttribute('src');
                                }
                            }
                        },
                        {
                            type: 'button',
                            id: 'browse',
                            align: 'center',
                            label: editor.lang.common.browseServer,
                            hidden: true,
                            filebrowser: 'info:txtUrl'
                        }]
                    }]
                },
                {
                    id: 'txtRel',
                    type: 'text',
                    label: "Relação (rel)",
                    accessKey: 'R',
                    'default': '',
                    onChange: function() {},
                    setup: function(type, element) {
                        if (type == IMAGE) this.setValue(element.getAttribute('rel'));
                    },
                    commit: function(type, element) {
                        if (type == IMAGE) {
                            if (this.getValue() || this.isChanged()) element.setAttribute('rel', this.getValue());
                        }
                        else if (type == CLEANUP) {
                            element.removeAttribute('rel');
                        }
                    }
                },
                {
                    id: 'txtAlt',
                    type: 'text',
                    label: editor.lang.image.alt,
                    accessKey: 'A',
                    'default': '',
                    onChange: function() {},
                    setup: function(type, element) {
                        if (type == IMAGE) this.setValue(element.getAttribute('alt'));
                    },
                    commit: function(type, element) {
                        if (type == IMAGE) {
                            if (this.getValue() || this.isChanged()) element.setAttribute('alt', this.getValue());
                        }
                        else if (type == CLEANUP) {
                            element.removeAttribute('alt');
                        }
                    }
                }]
            }]
        };
    };

    CKEDITOR.dialog.add('image', function(editor) {
        return imageDialog(editor);
    });
})();