YUI.add('content-editable', function (Y, NAME) {

    /*jshint maxlen: 500 */

    /**

    * Creates a component to work with an elemment.

    * @class ContentEditable

    * @for ContentEditable

    * @extends Y.Plugin.Base

    * @constructor

    * @module editor

    * @submodule content-editable

    */

    var Lang = Y.Lang,

        YNode = Y.Node,

        EVENT_CONTENT_READY = 'contentready',

        EVENT_READY = 'ready',

        TAG_PARAGRAPH = 'p',

        BLUR = 'blur',

        CONTAINER = 'container',

        CONTENT_EDITABLE = 'contentEditable',

        EMPTY = '',

        FOCUS = 'focus',

        HOST = 'host',

        INNER_HTML = 'innerHTML',

        KEY = 'key',

        PARENT_NODE = 'parentNode',

        PASTE = 'paste',

        TEXT = 'Text',

        USE = 'use',

    ContentEditable = function() {

        ContentEditable.superclass.constructor.apply(this, arguments);

    };

    Y.extend(ContentEditable, Y.Plugin.Base, {

        /**

        * Internal reference set when render is called.

        * @private

        * @property _rendered

        * @type Boolean

        */

        _rendered: null,

        /**

        * Internal reference to the YUI instance bound to the element

        * @private

        * @property _instance

        * @type YUI

        */

        _instance: null,

        /**

        * Initializes the ContentEditable instance

        * @protected

        * @method initializer

        */

        initializer: function() {

            var host = this.get(HOST);

            if (host) {

                host.frame = this;

            }

            this._eventHandles = [];

            this.publish(EVENT_READY, {

                emitFacade: true,

                defaultFn: this._defReadyFn

            });

        },

        /**

        * Destroys the instance.

        * @protected

        * @method destructor

        */

        destructor: function() {

            new Y.EventHandle(this._eventHandles).detach();

            this._container.removeAttribute(CONTENT_EDITABLE);

        },

        /**

        * Generic handler for all DOM events fired by the Editor container. This handler

        * takes the current EventFacade and augments it to fire on the ContentEditable host. It adds two new properties

        * to the EventFacade called frameX and frameY which adds the scroll and xy position of the ContentEditable element

        * to the original pageX and pageY of the event so external nodes can be positioned over the element.

        * In case of ContentEditable element these will be equal to pageX and pageY of the container.

        * @private

        * @method _onDomEvent

        * @param {EventFacade} e

        */

        _onDomEvent: function(e) {

            var xy;

            e.frameX = e.frameY = 0;

            if (e.pageX > 0 || e.pageY > 0) {

                if (e.type.substring(0, 3) !== KEY) {

                    xy = this._container.getXY();

                    e.frameX = xy[0];

                    e.frameY = xy[1];

                }

            }

            e.frameTarget = e.target;

            e.frameCurrentTarget = e.currentTarget;

            e.frameEvent = e;

            this.fire('dom:' + e.type, e);

        },

        /**

        * Simple pass thru handler for the paste event so we can do content cleanup

        * @private

        * @method _DOMPaste

        * @param {EventFacade} e

        */

        _DOMPaste: function(e) {

            var inst = this.getInstance(),

                data = EMPTY, win = inst.config.win;

            if (e._event.originalTarget) {

                data = e._event.originalTarget;

            }

            if (e._event.clipboardData) {

                data = e._event.clipboardData.getData(TEXT);

            }

            if (win.clipboardData) {

                data = win.clipboardData.getData(TEXT);

                if (data === EMPTY) { // Could be empty, or failed

                    // Verify failure

                    if (!win.clipboardData.setData(TEXT, data)) {

                        data = null;

                    }

                }

            }

            e.frameTarget = e.target;

            e.frameCurrentTarget = e.currentTarget;

            e.frameEvent = e;

            if (data) {

                e.clipboardData = {

                    data: data,

                    getData: function() {

                        return data;

                    }

                };

            } else {

                Y.log('Failed to collect clipboard data', 'warn', 'contenteditable');

                e.clipboardData = null;

            }

            this.fire('dom:paste', e);

        },

        /**

        * Binds DOM events and fires the ready event

        * @private

        * @method _defReadyFn

        */

        _defReadyFn: function() {

            var inst = this.getInstance(),

                container = this.get(CONTAINER);

            Y.each(

                ContentEditable.DOM_EVENTS,

                function(value, key) {

                    var fn = Y.bind(this._onDomEvent, this),

                        kfn = ((Y.UA.ie && ContentEditable.THROTTLE_TIME > 0) ? Y.throttle(fn, ContentEditable.THROTTLE_TIME) : fn);

                    if (!inst.Node.DOM_EVENTS[key]) {

                        inst.Node.DOM_EVENTS[key] = 1;

                    }

                    if (value === 1) {

                        if (key !== FOCUS && key !== BLUR && key !== PASTE) {

                            if (key.substring(0, 3) === KEY) {

                                //Throttle key events in IE

                                this._eventHandles.push(container.on(key, kfn, container));

                            } else {

                                this._eventHandles.push(container.on(key, fn, container));

                            }

                        }

                    }

                },

                this

            );

            inst.Node.DOM_EVENTS.paste = 1;

            this._eventHandles.push(

                container.on(PASTE, Y.bind(this._DOMPaste, this), container),

                container.on(FOCUS, Y.bind(this._onDomEvent, this), container),

                container.on(BLUR, Y.bind(this._onDomEvent, this), container)

            );

            inst.__use = inst.use;

            inst.use = Y.bind(this.use, this);

        },

        /**

        * Called once the content is available in the ContentEditable element and calls the final use call

        * @private

        * @method _onContentReady

        * on the internal instance so that the modules are loaded properly.

        */

        _onContentReady: function(event) {

            if (!this._ready) {

                this._ready = true;

                var inst = this.getInstance(),

                    args = Y.clone(this.get(USE));

                this.fire(EVENT_CONTENT_READY);

                Y.log('On content available', 'info', 'contenteditable');

                if (event) {

                    inst.config.doc = YNode.getDOMNode(event.target);

                }

                args.push(Y.bind(function() {

                    Y.log('Callback from final internal use call', 'info', 'contenteditable');

                    if (inst.EditorSelection) {

                        inst.EditorSelection.DEFAULT_BLOCK_TAG = this.get('defaultblock');

                        inst.EditorSelection.ROOT = this.get(CONTAINER);

                    }

                    this.fire(EVENT_READY);

                }, this));

                Y.log('Calling use on internal instance: ' + args, 'info', 'contentEditable');

                inst.use.apply(inst, args);

            }

        },

        /**

        * Retrieves defaultblock value from host attribute

        * @private

        * @method _getDefaultBlock

        * @return {String}

        */

        _getDefaultBlock: function() {

            return this._getHostValue('defaultblock');

        },

        /**

        * Retrieves dir value from host attribute

        * @private

        * @method _getDir

        * @return {String}

        */

        _getDir: function() {

            return this._getHostValue('dir');

        },

        /**

        * Retrieves extracss value from host attribute

        * @private

        * @method _getExtraCSS

        * @return {String}

        */

        _getExtraCSS: function() {

            return this._getHostValue('extracss');

        },

        /**

        * Get the content from the container

        * @private

        * @method _getHTML

        * @param {String} html The raw HTML from the container.

        * @return {String}

        */

        _getHTML: function() {

            var html, container;

            if (this._ready) {

                container = this.get(CONTAINER);

                html = container.get(INNER_HTML);

            }

            return html;

        },

        /**

        * Retrieves a value from host attribute

        * @private

        * @method _getHostValue

        * @param {attr} The attribute which value should be returned from the host

        * @return {String|Object}

        */

        _getHostValue: function(attr) {

            var host = this.get(HOST);

            if (host) {

                return host.get(attr);

            }

        },

        /**

        * Set the content of the container

        * @private

        * @method _setHTML

        * @param {String} html The raw HTML to set to the container.

        * @return {String}

        */

        _setHTML: function(html) {

            if (this._ready) {

                var container = this.get(CONTAINER);

                container.set(INNER_HTML, html);

            } else {

                //This needs to be wrapped in a contentready callback for the !_ready state

                this.once(EVENT_CONTENT_READY, Y.bind(this._setHTML, this, html));

            }

            return html;

        },

        /**

        * Sets the linked CSS on the instance.

        * @private

        * @method _setLinkedCSS

        * @param {String} css The linkedcss value

        * @return {String}

        */

        _setLinkedCSS: function(css) {

            if (this._ready) {

                var inst = this.getInstance();

                inst.Get.css(css);

            } else {

                //This needs to be wrapped in a contentready callback for the !_ready state

                this.once(EVENT_CONTENT_READY, Y.bind(this._setLinkedCSS, this, css));

            }

            return css;

        },

        /**

        * Sets the dir (language direction) attribute on the container.

        * @private

        * @method _setDir

        * @param {String} value The language direction

        * @return {String}

        */

        _setDir: function(value) {

            var container;

            if (this._ready) {

                container = this.get(CONTAINER);

                container.setAttribute('dir', value);

            } else {

                //This needs to be wrapped in a contentready callback for the !_ready state

                this.once(EVENT_CONTENT_READY, Y.bind(this._setDir, this, value));

            }

            return value;

        },

        /**

        * Set's the extra CSS on the instance.

        * @private

        * @method _setExtraCSS

        * @param {String} css The CSS style to be set as extra css

        * @return {String}

        */

        _setExtraCSS: function(css) {

            if (this._ready) {

                if (css) {

                    var inst = this.getInstance(),

                        head = inst.one('head');

                    if (this._extraCSSNode) {

                        this._extraCSSNode.remove();

                    }

                    this._extraCSSNode = YNode.create('<style>' + css + '</style>');

                    head.append(this._extraCSSNode);

                }