Show:
                                /*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);
                                            }
                                        } else {
                                            //This needs to be wrapped in a contentready callback for the !_ready state
                                            this.once(EVENT_CONTENT_READY, Y.bind(this._setExtraCSS, this, css));
                                        }
                            
                                        return css;
                                    },
                            
                                    /**
                                    * Sets the language value on the instance.
                                    * @private
                                    * @method _setLang
                                    * @param {String} value The language to be set
                                    * @return {String}
                                    */
                                    _setLang: function(value) {
                                        var container;
                            
                                        if (this._ready) {
                                            container = this.get(CONTAINER);
                            
                                            container.setAttribute('lang', value);
                                        } else {
                                            //This needs to be wrapped in a contentready callback for the !_ready state
                                            this.once(EVENT_CONTENT_READY, Y.bind(this._setLang, this, value));
                                        }
                            
                                        return value;
                                    },
                            
                                    /**
                                    * Called from the first YUI instance that sets up the internal instance.
                                    * This loads the content into the ContentEditable element and attaches the contentready event.
                                    * @private
                                    * @method _instanceLoaded
                                    * @param {YUI} inst The internal YUI instance bound to the ContentEditable element
                                    */
                                    _instanceLoaded: function(inst) {
                                        this._instance = inst;
                            
                                        this._onContentReady();
                            
                                        var doc = this._instance.config.doc;
                            
                                        if (!Y.UA.ie) {
                                            try {
                                                //Force other browsers into non CSS styling
                                                doc.execCommand('styleWithCSS', false, false);
                                                doc.execCommand('insertbronreturn', false, false);
                                            } catch (err) {}
                                        }
                                    },
                            
                            
                                    /**
                                    * Validates linkedcss property
                                    *
                                    * @method _validateLinkedCSS
                                    * @private
                                    */
                                    _validateLinkedCSS: function(value) {
                                        return Lang.isString(value) || Lang.isArray(value);
                                    },
                            
                                    //BEGIN PUBLIC METHODS
                                    /**
                                    * This is a scoped version of the normal YUI.use method & is bound to the ContentEditable element
                                    * At setup, the inst.use method is mapped to this method.
                                    * @method use
                                    */
                                    use: function() {
                                        Y.log('Calling augmented use after ready', 'info', 'contenteditable');
                            
                                        var inst = this.getInstance(),
                                            args = Y.Array(arguments),
                                            callback = false;
                            
                                        if (Lang.isFunction(args[args.length - 1])) {
                                            callback = args.pop();
                                        }
                            
                                        if (callback) {
                                            args.push(function() {
                                                Y.log('Internal callback from augmented use', 'info', 'contenteditable');
                            
                                                callback.apply(inst, arguments);
                                            });
                                        }
                            
                                        return inst.__use.apply(inst, args);
                                    },
                            
                                    /**
                                    * A delegate method passed to the instance's delegate method
                                    * @method delegate
                                    * @param {String} type The type of event to listen for
                                    * @param {Function} fn The method to attach
                                    * @param {String, Node} cont The container to act as a delegate, if no "sel" passed, the container is assumed.
                                    * @param {String} sel The selector to match in the event (optional)
                                    * @return {EventHandle} The Event handle returned from Y.delegate
                                    */
                                    delegate: function(type, fn, cont, sel) {
                                        var inst = this.getInstance();
                            
                                        if (!inst) {
                                            Y.log('Delegate events can not be attached until after the ready event has fired.', 'error', 'contenteditable');
                            
                                            return false;
                                        }
                            
                                        if (!sel) {
                                            sel = cont;
                            
                                            cont = this.get(CONTAINER);
                                        }
                            
                                        return inst.delegate(type, fn, cont, sel);
                                    },
                            
                                    /**
                                    * Get a reference to the internal YUI instance.
                                    * @method getInstance
                                    * @return {YUI} The internal YUI instance
                                    */
                                    getInstance: function() {
                                        return this._instance;
                                    },
                            
                                    /**
                                    * @method render
                                    * @param {String/HTMLElement/Node} node The node to render to
                                    * @return {ContentEditable}
                                    * @chainable
                                    */
                                    render: function(node) {
                                        var args, inst, fn;
                            
                                        if (this._rendered) {
                                            Y.log('Container already rendered.', 'warn', 'contentEditable');
                            
                                            return this;
                                        }
                            
                                        if (node) {
                                            this.set(CONTAINER, node);
                                        }
                            
                                        container = this.get(CONTAINER);
                            
                                        if (!container) {
                                            container = YNode.create(ContentEditable.HTML);
                            
                                            Y.one('body').prepend(container);
                            
                                            this.set(CONTAINER, container);
                                        }
                            
                                        this._rendered = true;
                            
                                        this._container.setAttribute(CONTENT_EDITABLE, true);
                            
                                        args = Y.clone(this.get(USE));
                            
                                        fn = Y.bind(function() {
                                            inst = YUI();
                            
                                            inst.host = this.get(HOST); //Cross reference to Editor
                            
                                            inst.log = Y.log; //Dump the instance logs to the parent instance.
                            
                                            Y.log('Creating new internal instance with node-base only', 'info', 'contenteditable');
                                            inst.use('node-base', Y.bind(this._instanceLoaded, this));
                                        }, this);
                            
                                        args.push(fn);
                            
                                        Y.log('Adding new modules to main instance: ' + args, 'info', 'contenteditable');
                                        Y.use.apply(Y, args);
                            
                                        return this;
                                    },
                            
                                    /**
                                    * Set the focus to the container
                                    * @method focus
                                    * @param {Function} fn Callback function to execute after focus happens
                                    * @return {ContentEditable}
                                    * @chainable
                                    */
                                    focus: function() {
                                        this._container.focus();
                            
                                        return this;
                                    },
                                    /**
                                    * Show the iframe instance
                                    * @method show
                                    * @return {ContentEditable}
                                    * @chainable
                                    */
                                    show: function() {
                                        this._container.show();
                            
                                        this.focus();
                            
                                        return this;
                                    },
                            
                                    /**
                                    * Hide the iframe instance
                                    * @method hide
                                    * @return {ContentEditable}
                                    * @chainable
                                    */
                                    hide: function() {
                                        this._container.hide();
                            
                                        return this;
                                    }
                                },
                                {
                                    /**
                                    * The throttle time for key events in IE
                                    * @static
                                    * @property THROTTLE_TIME
                                    * @type Number
                                    * @default 100
                                    */
                                    THROTTLE_TIME: 100,
                            
                                    /**
                                    * The DomEvents that the frame automatically attaches and bubbles
                                    * @static
                                    * @property DOM_EVENTS
                                    * @type Object
                                    */
                                    DOM_EVENTS: {
                                        click: 1,
                                        dblclick: 1,
                                        focusin: 1,
                                        focusout: 1,
                                        keydown: 1,
                                        keypress: 1,
                                        keyup: 1,
                                        mousedown: 1,
                                        mouseup: 1,
                                        paste: 1
                                    },
                            
                                    /**
                                    * The template string used to create the ContentEditable element
                                    * @static
                                    * @property HTML
                                    * @type String
                                    */
                                    HTML: '<div></div>',
                            
                                    /**
                                    * The name of the class (contentEditable)
                                    * @static
                                    * @property NAME
                                    * @type String
                                    */
                                    NAME: 'contentEditable',
                            
                                    /**
                                    * The namespace on which ContentEditable plugin will reside.
                                    *
                                    * @property NS
                                    * @type String
                                    * @default 'contentEditable'
                                    * @static
                                    */
                                    NS: CONTENT_EDITABLE,
                            
                                    ATTRS: {
                                        /**
                                        * The default text direction for this ContentEditable element. Default: ltr
                                        * @attribute dir
                                        * @type String
                                        */
                                        dir: {
                                            lazyAdd: false,
                                            validator: Lang.isString,
                                            setter: '_setDir',
                                            valueFn: '_getDir'
                                        },
                            
                                        /**
                                        * The container to set contentEditable=true or to create on render.
                                        * @attribute container
                                        * @type String/HTMLElement/Node
                                        */
                                        container: {
                                            setter: function(n) {
                                                this._container = Y.one(n);
                            
                                                return this._container;
                                            }
                                        },
                            
                                        /**
                                        * The string to inject as Editor content. Default '<br>'
                                        * @attribute content
                                        * @type String
                                        */
                                        content: {
                                            getter: '_getHTML',
                                            lazyAdd: false,
                                            setter: '_setHTML',
                                            validator: Lang.isString,
                                            value: '<br>'
                                        },
                            
                                        /**
                                        * The default tag to use for block level items, defaults to: p
                                        * @attribute defaultblock
                                        * @type String
                                        */
                                        defaultblock: {
                                            validator: Lang.isString,
                                            value: TAG_PARAGRAPH,
                                            valueFn: '_getDefaultBlock'
                                        },
                            
                                        /**
                                        * A string of CSS to add to the Head of the Editor
                                        * @attribute extracss
                                        * @type String
                                        */
                                        extracss: {
                                            lazyAdd: false,
                                            setter: '_setExtraCSS',
                                            validator: Lang.isString,
                                            valueFn: '_getExtraCSS'
                                        },
                            
                                        /**
                                        * Set the id of the new Node. (optional)
                                        * @attribute id
                                        * @type String
                                        * @writeonce
                                        */
                                        id: {
                                            writeOnce: true,
                                            getter: function(id) {
                                                if (!id) {
                                                    id = 'inlineedit-' + Y.guid();
                                                }
                            
                                                return id;
                                            }
                                        },
                            
                                        /**
                                        * The default language. Default: en-US
                                        * @attribute lang
                                        * @type String
                                        */
                                        lang: {
                                            validator: Lang.isString,
                                            setter: '_setLang',
                                            lazyAdd: false,
                                            value: 'en-US'
                                        },
                            
                                        /**
                                        * An array of url's to external linked style sheets
                                        * @attribute linkedcss
                                        * @type String|Array
                                        */
                                        linkedcss: {
                                            setter: '_setLinkedCSS',
                                            validator: '_validateLinkedCSS'
                                            //value: ''
                                        },
                            
                                        /**
                                        * The Node instance of the container.
                                        * @attribute node
                                        * @type Node
                                        */
                                        node: {
                                            readOnly: true,
                                            value: null,
                                            getter: function() {
                                                return this._container;
                                            }
                                        },
                            
                                        /**
                                        * Array of modules to include in the scoped YUI instance at render time. Default: ['node-base', 'editor-selection', 'stylesheet']
                                        * @attribute use
                                        * @writeonce
                                        * @type Array
                                        */
                                        use: {
                                            validator: Lang.isArray,
                                            writeOnce: true,
                                            value: ['node-base', 'editor-selection', 'stylesheet']
                                        }
                                    }
                                });
                            
                                Y.namespace('Plugin');
                            
                                Y.Plugin.ContentEditable = ContentEditable;