/*
 * Copyright (C) eZ Systems AS. All rights reserved.
 * For full copyright and license information view LICENSE file distributed with this source code.
 */
/* global CKEDITOR */
YUI.add('ez-alloyeditor-plugin-embed', function (Y) {
    "use strict";
 
    var IMAGE_TYPE_CLASS = 'ez-embed-type-image',
        DATA_ALIGNMENT_ATTR = 'ezalign';
 
    if (CKEDITOR.plugins.get('ezembed')) {
        return;
    }
 
    /**
     * CKEditor plugin to configure the widget plugin so that it recognizes the
     * `div[data-ezelement="embed"]` elements as widget.
     *
     * @class ezembed
     * @namespace CKEDITOR.plugins
     * @constructor
     */
    CKEDITOR.plugins.add('ezembed', {
        requires: 'widget,ezaddcontent',
 
        init: function (editor) {
            editor.widgets.add('ezembed', {
                defaults: {
                    href: "ezcontent://57",
                    content: "home",
                    view: "embed",
                },
                draggable: false,
                template: '<div data-ezelement="ezembed" data-href="{href}" data-ezview="{view}">{content}</div>',
                requiredContent: 'div',
 
                upcast: function (element) {
                    return (
                        element.name === 'div' &&
                        element.attributes['data-ezelement'] === 'ezembed'
                    );
                },
 
                /**
                 * Insert an `ezembed` widget in the editor. It overrides the
                 * default implementation to make sure that in the case where an
                 * embed widget is focused, a new one is added after it.
                 *
                 * @method insert
                 */
                insert: function () {
                    var element = CKEDITOR.dom.element.createFromHtml(this.template.output(this.defaults)),
                        wrapper = editor.widgets.wrapElement(element, this.name),
                        temp = new CKEDITOR.dom.documentFragment(wrapper.getDocument()),
                        instance;
 
                    temp.append(wrapper);
                    editor.widgets.initOn(element, this.name);
                    editor.eZ.appendElement(wrapper);
 
                    instance = editor.widgets.getByElement(wrapper);
                    instance.ready = true;
                    instance.fire('ready');
                    instance.focus();
                },
 
                /**
                 * It's not possible to *edit* an embed widget in AlloyEditor,
                 * so `edit` directly calls `insert` instead. This is needed
                 * because by default, the CKEditor engine calls this method
                 * when an embed widget has the focus and the `ezembed` command
                 * is executed. In AlloyEditor, we want to insert a new widget,
                 * not to `edit` the focused widget as the editing process is
                 * provided by the style toolbar.
                 *
                 * @method edit
                 */
                edit: function () {
                    this.insert();
                },
 
                init: function () {
                    this.on('focus', this._fireEditorInteraction);
                    this._syncAlignment();
                    this._getEzConfigElement();
                    this.setWidgetContent('');
                    this._cancelEditEvents();
                },
 
                /**
                 * Cancels the widget events that trigger the `edit` event as
                 * an embed widget can not be edited in a *CKEditor way*.
                 *
                 * @method _cancelEditEvents
                 * @private
                 */
                _cancelEditEvents: function () {
                    var cancel = function (e) {
                            e.cancel();
                        };
 
                    this.on('doubleclick', cancel, null, null, 5);
                    this.on('key', cancel, null, null, 5);
                },
 
                /**
                 * Initializes the alignment on the widget wrapper if the widget
                 * is aligned.
                 *
                 * @method _syncAlignment
                 * @protected
                 */
                _syncAlignment: function () {
                    var align = this.element.data(DATA_ALIGNMENT_ATTR);
 
                    if ( align ) {
                        this._setAlignment(align);
                    } else {
                        this._unsetAlignment();
                    }
                },
 
                /**
                 * Sets the alignment of the embed widget to `type`. The
                 * alignment is set by adding the `data-ezalign` attribute
                 * on the widget wrapper and the widget element.
                 *
                 * @method _setAlignment
                 * @protected
                 * @param {String} type
                 */
                _setAlignment: function (type) {
                    this.wrapper.data(DATA_ALIGNMENT_ATTR, type);
                    this.element.data(DATA_ALIGNMENT_ATTR, type);
                },
 
                /**
                 * Sets the alignment of the embed widget to `type` and fires
                 * the corresponding `editorInteraction` event.
                 *
                 * @method setAlignment
                 * @param {String} type
                 */
                setAlignment: function (type, fireEvent) {
                    this._setAlignment(type);
                    this._fireEditorInteraction('setAlignment' + type);
                },
 
                /**
                 * Removes the alignment of the widget.
                 *
                 * @method _unsetAlignment
                 * @protected
                 */
                _unsetAlignment: function () {
                    this.wrapper.data(DATA_ALIGNMENT_ATTR, false);
                    this.element.data(DATA_ALIGNMENT_ATTR, false);
                },
 
                /**
                 * Removes the alignment of the widget and fires the
                 * corresponding `editorInteraction` event.
                 *
                 * @method unsetAlignment
                 */
                unsetAlignment: function () {
                    this._unsetAlignment();
                    this._fireEditorInteraction('unsetAlignment');
                },
 
                /**
                 * Checks whether the embed is aligned with `type` alignment.
                 *
                 * @method isAligned
                 * @param {String} type
                 * @return {Boolean}
                 */
                isAligned: function (type) {
                    return (this.wrapper.data(DATA_ALIGNMENT_ATTR) === type);
                },
 
                /**
                 * Set the embed as an embed representing an image
                 *
                 * @method setImageType
                 * @return {CKEDITOR.plugins.widget}
                 */
                setImageType: function () {
                    this.element.addClass(IMAGE_TYPE_CLASS);
                    return this;
                },
 
                /**
                 * Check whether the embed widget represents an image or not.
                 *
                 * @method isImage
                 * @return {Boolean}
                 */
                isImage: function () {
                    return this.element.hasClass(IMAGE_TYPE_CLASS);
                },
 
                /**
                 * Sets the `href` of the embed is URI to the embed content or
                 * location. (ezcontent://32 for instance).
                 *
                 * @method setHref
                 * @param {String} href
                 * @return {CKEDITOR.plugins.widget}
                 */
                setHref: function (href) {
                    this.element.data('href', href);
                    return this;
                },
 
                /**
                 * Returns the `href`of the embed.
                 *
                 * @method getHref
                 * @return {String}
                 */
                getHref: function () {
                    return this.element.data('href');
                },
 
                /**
                 * Sets the widget content. It makes sure the config element is
                 * not overwritten.
                 *
                 * @method setWidgetContent
                 * @param {String|CKEDITOR.dom.node} content
                 * @return {CKEDITOR.plugins.widget}
                 */
                setWidgetContent: function (content) {
                    var element = this.element.getFirst(), next;
 
                    while ( element ) {
                        next = element.getNext();
                        if ( !element.data || !element.data('ezelement') ) {
                            element.remove();
                        }
                        element = next;
                    }
                    if ( content instanceof CKEDITOR.dom.node ) {
                        this.element.append(content);
                    } else {
                        this.element.appendText(content);
                    }
                    return this;
                },
 
                /**
                 * Moves the widget after the given element. It also fires the
                 * `editorInteraction` event so that the UI can respond to that
                 * change.
                 *
                 * @method moveAfter
                 * @param {CKEDITOR.dom.element} element
                 */
                moveAfter: function (element) {
                    this.wrapper.insertAfter(element);
                    this._fireEditorInteraction('moveAfter');
                },
 
                /**
                 * Moves the widget before the given element. It also fires the
                 * `editorInteraction` event so that the UI can respond to that
                 * change.
                 *
                 * @method moveAfter
                 * @param {CKEDITOR.dom.element} element
                 */
                moveBefore: function (element) {
                    this.wrapper.insertBefore(element);
                    this._fireEditorInteraction('moveBefore');
                },
 
                /**
                 * Sets a config value under the `key` for the embed.
                 *
                 * @method setConfig
                 * @param {String} key
                 * @param {String} value
                 * @return {CKEDITOR.plugins.widget}
                 */
                setConfig: function (key, value) {
                    var valueElement = this._getValueElement(key);
 
                    if ( !valueElement ) {
                        valueElement = new CKEDITOR.dom.element('span');
                        valueElement.data('ezelement', 'ezvalue');
                        valueElement.data('ezvalue-key', key);
                        this._getEzConfigElement().append(valueElement);
                    }
                    valueElement.setText(value);
                    return this;
                },
 
                /**
                 * Returns the config value for the `key` or undefined if the
                 * config key is not found.
                 *
                 * @method getConfig
                 * @return {String}
                 */
                getConfig: function (key) {
                    var valueElement = this._getValueElement(key);
 
                    return valueElement ? valueElement.getText() : undefined;
                },
 
                /**
                 * Returns the Element holding the config under `key`
                 *
                 * @method _getValueElement
                 * @param {String} key
                 * @return {CKEDITOR.dom.element}
                 */
                _getValueElement: function (key) {
                    return this.element.findOne('[data-ezelement="ezvalue"][data-ezvalue-key="' + key + '"]');
                },
 
                /**
                 * Returns the element used as a container the config values. if
                 * it does not exist, it is created.
                 *
                 * @method _getEzConfigElement
                 * @private
                 * @return {CKEDITOR.dom.element}
                 */
                _getEzConfigElement: function () {
                    var config = this.element.findOne('[data-ezelement="ezconfig"]');
 
                    if ( !config ) {
                        config = new CKEDITOR.dom.element('span');
                        config.data('ezelement', 'ezconfig');
                        this.element.append(config, true);
                    }
                    return config;
                },
 
                /**
                 * Fires the editorInteraction event so that AlloyEditor editor
                 * UI remains visible and is updated. This method also computes
                 * `selectionData.region` and the `pageX` and `pageY` properties
                 * so that the add toolbar is correctly positioned on the
                 * widget.
                 *
                 * @method _fireEditorInteraction
                 * @protected
                 * @param {Object|String} evt this initial event info object or
                 * the event name for which the `editorInteraction` is fired.
                 */
                _fireEditorInteraction: function (evt) {
                    var wrapperRegion = this._getWrapperRegion(),
                        name = evt.name || evt,
                        e = {
                            editor: editor,
                            target: this.element.$,
                            name: "widget" + name,
                            pageX: wrapperRegion.left,
                            pageY: wrapperRegion.top + wrapperRegion.height,
                        };
 
                    editor.focus();
                    this.focus();
 
                    editor.fire('editorInteraction', {
                        nativeEvent: e,
                        selectionData: {
                            element: this.element,
                            region: wrapperRegion,
                        },
                    });
                },
 
                /**
                 * Returns the wrapper element region.
                 *
                 * @method _getWrapperRegion
                 * @private
                 * @return {Object}
                 */
                _getWrapperRegion: function () {
                    var scroll = this.wrapper.getWindow().getScrollPosition(),
                        region = this.wrapper.getClientRect();
 
                    region.top += scroll.y;
                    region.bottom += scroll.y;
                    region.left += scroll.x;
                    region.right += scroll.x;
                    region.direction = CKEDITOR.SELECTION_TOP_TO_BOTTOM;
                    return region;
                },
            });
        },
    });
});