Show:
                            /**
                             * The Editable Utility
                             *
                             * @module aui-editable
                             */
                            
                            var Lang = A.Lang,
                                LString = Lang.String,
                                isFunction = Lang.isFunction,
                            
                                getClassName = A.getClassName,
                            
                                DOC = A.config.doc,
                            
                                HOVER = 'hover',
                                ICON = 'icon',
                                NAME = 'editable',
                            
                                CSS_EDITING = getClassName(NAME, 'editing'),
                                CSS_HOVER = getClassName(NAME, HOVER),
                                CSS_ICON_OK = getClassName(ICON, 'ok'),
                                CSS_ICON_REMOVE = getClassName(ICON, 'remove'),
                            
                                CONTENT_BOX = 'contentBox';
                            
                            /**
                             * <p><img src="assets/images/aui-editable/main.png"/></p>
                             *
                             * A base class for Editable, providing:
                             * <ul>
                             *    <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li>
                             *    <li>Edit in place elements</li>
                             * </ul>
                             *
                             * Quick Example:<br/>
                             *
                             * <pre><code>var instance = new A.Editable({
                             *   node: '#editor'
                             * }).render();
                             * </code></pre>
                             *
                             * Check the list of <a href="Editable.html#configattributes">Configuration Attributes</a> available for
                             * Editable.
                             *
                             * @param config {Object} Object literal specifying widget configuration properties.
                             *
                             * @class Editable
                             * @constructor
                             * @extends Component
                             */
                            var Editable = A.Component.create({
                                /**
                                 * Static property provides a string to identify the class.
                                 *
                                 * @property Editable.NAME
                                 * @type String
                                 * @static
                                 */
                                NAME: NAME,
                            
                                /**
                                 * Static property used to define the default attribute
                                 * configuration for the Editable.
                                 *
                                 * @property Editable.ATTRS
                                 * @type Object
                                 * @static
                                 */
                                ATTRS: {
                                    /**
                                     * <a href="ButtonItem.html">ButtonItem</a> constructor Object for the
                                     * cancelButton.
                                     *
                                     * @attribute cancelButton
                                     * @default Button constructor Object.
                                     * @type String
                                     */
                                    cancelButton: {
                                        valueFn: function() {
                                            var instance = this;
                            
                                            return {
                                                icon: CSS_ICON_REMOVE,
                                                on: {
                                                    click: A.bind(instance.cancel, instance)
                                                }
                                            };
                                        }
                                    },
                            
                                    /**
                                     * Content text.
                                     *
                                     * @attribute contentText
                                     * @default ''
                                     * @type String
                                     */
                                    contentText: {
                                        value: '',
                                        setter: function(value) {
                                            var instance = this;
                            
                                            value = Lang.trim(value);
                            
                                            instance._toText(value);
                            
                                            return value;
                                        }
                                    },
                            
                                    /**
                                     * Event type to initialize the editable.
                                     *
                                     * @attribute eventType
                                     * @default 'click'
                                     * @type String
                                     */
                                    eventType: {
                                        value: 'click'
                                    },
                            
                                    /**
                                     * Function to format the input text displayed on the input.
                                     *
                                     * @attribute formatInput
                                     * @default null
                                     * @type function
                                     */
                                    formatInput: {
                                        validator: isFunction,
                                        value: null
                                    },
                            
                                    /**
                                     * Function to format the output text displayed on the input.
                                     *
                                     * @attribute formatOutput
                                     * @default null
                                     * @type function
                                     */
                                    formatOutput: {
                                        validator: isFunction,
                                        value: null
                                    },
                            
                                    /**
                                     * Array with icons for the <a href="Toolbar.html">Toolbar</a>.
                                     *
                                     * @attribute icons
                                     * @default []
                                     * @type Array
                                     */
                                    icons: {
                                        value: []
                                    },
                            
                                    /**
                                     * Type of the input used to edit the <a
                                     * href="Editable.html#config_node">node</a>.
                                     *
                                     * @attribute inputType
                                     * @default 'text'
                                     * @type String
                                     */
                                    inputType: {
                                        setter: function(value) {
                                            var instance = this;
                            
                                            if (value != 'text' && value != 'textarea') {
                                                value = A.Attribute.INVALID_VALUE;
                                            }
                            
                                            return value;
                                        },
                                        value: 'text'
                                    },
                            
                                    /**
                                     * Node to setup the editable.
                                     *
                                     * @attribute node
                                     * @type Node
                                     */
                                    node: {
                                        setter: function(value) {
                                            var node = A.one(value);
                            
                                            if (!node) {
                                                A.error('AUI.Editable: Invalid Node Given: ' + value);
                                            }
                            
                                            return node;
                                        }
                                    },
                            
                                    /**
                                     * Node to render the editable.
                                     *
                                     * @attribute renderTo
                                     * @type String | Node
                                     */
                                    renderTo: {
                                        value: DOC.body,
                                        setter: function(value) {
                                            var instance = this;
                            
                                            var node;
                            
                                            if (value == 'node') {
                                                node = instance.get(value);
                                            }
                                            else {
                                                node = A.one(value);
                                            }
                            
                                            if (!node) {
                                                A.error('AUI.Editable: Invalid renderTo Given: ' + value);
                                            }
                            
                                            return node;
                                        }
                                    },
                            
                                    /**
                                     * <a href="ButtonItem.html">ButtonItem</a> constructor Object for the
                                     * saveButton.
                                     *
                                     * @attribute saveButton
                                     * @default Button constructor Object.
                                     * @type String
                                     */
                                    saveButton: {
                                        valueFn: function() {
                                            var instance = this;
                            
                                            return {
                                                icon: CSS_ICON_OK,
                                                on: {
                                                    click: A.bind(instance.save, instance)
                                                }
                                            };
                                        }
                                    },
                            
                                    visible: {
                                        value: false
                                    }
                                },
                            
                                UI_ATTRS: ['node'],
                            
                                prototype: {
                                    /**
                                     * Construction logic executed during Editable instantiation. Lifecycle.
                                     *
                                     * @method initializer
                                     * @protected
                                     */
                                    initializer: function() {
                                        var instance = this;
                            
                                        instance._uiSetNode(instance.get('node'));
                            
                                        instance._createEvents();
                                    },
                            
                                    /**
                                     * Create the DOM structure for the Editable. Lifecycle.
                                     *
                                     * @method renderUI
                                     * @protected
                                     */
                                    renderUI: function() {
                                        var instance = this;
                            
                                        var contentBox = instance.get(CONTENT_BOX);
                                        var inputType = instance.get('inputType');
                            
                                        var comboConfig = {};
                            
                                        var icons = instance.get('icons');
                            
                                        if (icons !== false) {
                                            var cancelButton = instance.get('cancelButton');
                                            var saveButton = instance.get('saveButton');
                            
                                            if (cancelButton !== false) {
                                                icons.push(cancelButton);
                                            }
                            
                                            if (saveButton !== false) {
                                                icons.push(saveButton);
                                            }
                            
                                            comboConfig.icons = icons;
                                        }
                            
                                        if (inputType != 'text') {
                                            A.mix(
                                                comboConfig, {
                                                    field: {
                                                        autoSize: true
                                                    },
                                                    fieldWidget: A.Textarea
                                                }
                                            );
                                        }
                            
                                        var comboBox = new A.Combobox(comboConfig).render(contentBox);
                            
                                        instance._comboBox = comboBox;
                            
                                        instance.inputNode = comboBox.get('node');
                                    },
                            
                                    /**
                                     * Bind the events on the Editable UI. Lifecycle.
                                     *
                                     * @method bindUI
                                     * @protected
                                     */
                                    bindUI: function() {
                                        var instance = this;
                            
                                        var contentBox = instance.get(CONTENT_BOX);
                                        var node = instance.get('node');
                            
                                        var inputNode = instance.inputNode;
                            
                                        inputNode.on('keypress', instance._onKeypressEditable, instance);
                            
                                        instance.after('contentTextChange', instance._syncContentText);
                            
                                        contentBox.swallowEvent('click');
                            
                                        A.getDoc().after('click', instance._afterFocusedChangeEditable, instance);
                            
                                        A.on('windowresize', A.bind(instance._afterFocusedChangeEditable, instance));
                                    },
                            
                                    /**
                                     * Sync the Editable UI. Lifecycle.
                                     *
                                     * @method syncUI
                                     * @protected
                                     */
                                    syncUI: function() {
                                        var instance = this;
                            
                                        var currentText = instance.get('node').get('innerHTML');
                            
                                        currentText = currentText.replace(/\n|\r/gim, '');
                                        currentText = Lang.trim(currentText);
                            
                                        currentText = instance._toText(currentText);
                            
                                        instance._setInput(currentText);
                            
                                        instance.set(
                                            'contentText',
                                            currentText, {
                                                initial: true
                                            }
                                        );
                                    },
                            
                                    /**
                                     * Cancel the editable. Return to the original state.
                                     *
                                     * @method cancel
                                     */
                                    cancel: function() {
                                        var instance = this;
                            
                                        instance.fire('cancel');
                                    },
                            
                                    /**
                                     * Save the editable. Fires the
                                     * <a href="Editable.html#event_save">save</a> event.
                                     *
                                     * @method save
                                     */
                                    save: function(event) {
                                        var instance = this;
                            
                                        instance.fire('save');
                                    },
                            
                                    /**
                                     * Fires the <a href="Editable.html#event_stopEditing">stopEditing</a>
                                     * event.
                                     *
                                     * @method _afterFocusedChangeEditable
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _afterFocusedChangeEditable: function(event) {
                                        var instance = this;
                            
                                        instance.fire('stopEditing', instance.get('visible'));
                                    },
                            
                                    /**
                                     * Create the Events.
                                     *
                                     * @method _createEvents
                                     * @protected
                                     */
                                    _createEvents: function() {
                                        var instance = this;
                            
                                        /**
                                         * Handles the startEditing event.
                                         *
                                         * @event startEditing
                                         * @preventable _defStartEditingFn
                                         * @param {Event.Facade} event The startEditing event.
                                         * @type {Event.Custom}
                                         */
                                        instance.publish(
                                            'startEditing', {
                                                bubbles: true,
                                                defaultFn: instance._defStartEditingFn,
                                                emitFacade: true,
                                                queable: false
                                            }
                                        );
                            
                                        /**
                                         * Handles the stopEditing event.
                                         *
                                         * @event stopEditing
                                         * @preventable _defStopEditingFn
                                         * @param {Event.Facade} event The stopEditing event.
                                         * @type {Event.Custom}
                                         */
                                        instance.publish(
                                            'stopEditing', {
                                                bubbles: true,
                                                defaultFn: instance._defStopEditingFn,
                                                emitFacade: true,
                                                queable: false
                                            }
                                        );
                            
                                        /**
                                         * Handles the save event.
                                         *
                                         * @event save
                                         * @preventable _defSaveFn
                                         * @param {Event.Facade} event The save event.
                                         * @type {Event.Custom}
                                         */
                                        instance.publish(
                                            'save', {
                                                bubbles: true,
                                                defaultFn: instance._defSaveFn,
                                                emitFacade: true,
                                                queable: false
                                            }
                                        );
                            
                                        /**
                                         * Handles the cancel event.
                                         *
                                         * @event cancel
                                         * @preventable _defCancelFn
                                         * @param {Event.Facade} event The cancel event.
                                         * @type {Event.Custom}
                                         */
                                        instance.publish(
                                            'cancel', {
                                                bubbles: true,
                                                defaultFn: instance._defCancelFn,
                                                emitFacade: true,
                                                queable: false
                                            }
                                        );
                                    },
                            
                                    /**
                                     * Fires the cancel event.
                                     *
                                     * @method _defCancelFn
                                     * @param {EventFacade} event cancel event facade
                                     * @protected
                                     */
                                    _defCancelFn: function(event) {
                                        var instance = this;
                            
                                        instance.fire('stopEditing', false);
                                    },
                            
                                    /**
                                     * Fires the save event.
                                     *
                                     * @method _defSaveFn
                                     * @param {EventFacade} event save event facade
                                     * @protected
                                     */
                                    _defSaveFn: function(event) {
                                        var instance = this;
                            
                                        instance.fire('stopEditing', true);
                                    },
                            
                                    /**
                                     * Fires the startEditing event.
                                     *
                                     * @method _defStartEditingFn
                                     * @param {EventFacade} event startEditing event facade
                                     * @protected
                                     */
                                    _defStartEditingFn: function(event) {
                                        var instance = this;
                            
                                        var boundingBox = instance.get('boundingBox');
                                        var node = instance.get('node');
                            
                                        var inputNode = instance.inputNode;
                            
                                        var nodeHeight = node.get('offsetHeight');
                                        var nodeWidth = node.get('offsetWidth');
                            
                                        instance.show();
                            
                                        node.addClass(CSS_EDITING);
                            
                                        var xy = node.getXY();
                            
                                        boundingBox.setStyles({
                                            height: nodeHeight + 'px',
                                            left: xy[0] + 'px',
                                            top: xy[1] + 'px',
                                            width: nodeWidth + 'px'
                                        });
                            
                                        var inputField = instance._comboBox._field;
                            
                                        inputField.set('width', nodeWidth);
                                        inputField.fire('adjustSize');
                            
                                        inputNode.focus();
                                        inputNode.select();
                                    },
                            
                                    /**
                                     * Fires the stopEditing event.
                                     *
                                     * @method _defStopEditingFn
                                     * @param {EventFacade} event stopEditing event facade
                                     * @protected
                                     */
                                    _defStopEditingFn: function(event, save) {
                                        var instance = this;
                            
                                        instance.hide();
                            
                                        instance.get('node').removeClass(CSS_EDITING);
                            
                                        if (save) {
                                            instance.set('contentText', instance.inputNode.get('value'));
                                        }
                                        else {
                                            instance._setInput(instance.get('contentText'));
                                        }
                                    },
                            
                                    /**
                                     * Fires <code>onkeypress</code> occurs on the editable element.
                                     *
                                     * @method _onKeypressEditable
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _onKeypressEditable: function(event) {
                                        var instance = this;
                            
                                        if (event.isKey('ESC')) {
                                            event.preventDefault();
                            
                                            instance.cancel();
                                        }
                                        else if (event.isKey('ENTER') && (instance.get('inputType') == 'text')) {
                                            instance.save();
                                        }
                                    },
                            
                                    /**
                                     * Fires <code>onmouseenter</code> occurs on the editable element.
                                     *
                                     * @method _onMouseEnterEditable
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _onMouseEnterEditable: function(event) {
                                        var instance = this;
                            
                                        instance.get('node').addClass(CSS_HOVER);
                                    },
                            
                                    /**
                                     * Fires <code>onmouseleave</code> occurs on the editable element.
                                     *
                                     * @method _onMouseLeaveEditable
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _onMouseLeaveEditable: function(event) {
                                        var instance = this;
                            
                                        instance.get('node').removeClass(CSS_HOVER);
                                    },
                            
                                    /**
                                     * Set the value of the <a
                                     * href="Editable.html#property_inputNode">inputNode</a>.
                                     *
                                     * @method _setInput
                                     * @param {String} value Value of the input.
                                     * @protected
                                     */
                                    _setInput: function(value) {
                                        var instance = this;
                            
                                        var inputFormatter = instance.get('formatInput');
                            
                                        if (inputFormatter) {
                                            value = inputFormatter.call(instance, value);
                                        }
                                        else {
                                            value = instance._toText(value);
                                        }
                            
                                        instance.inputNode.set('value', LString.unescapeEntities(value));
                                    },
                            
                                    /**
                                     * Set the <code>innerHTML</code> of the <a
                                     * href="Editable.html#config_node">node</a>.
                                     *
                                     * @method _setOutput
                                     * @param {String} value
                                     * @protected
                                     */
                                    _setOutput: function(value) {
                                        var instance = this;
                            
                                        var outputFormatter = instance.get('formatOutput');
                            
                                        if (outputFormatter) {
                                            value = outputFormatter.call(instance, value);
                                        }
                                        else {
                                            value = instance._toHTML(value);
                                        }
                            
                                        instance.get('node').set('innerHTML', A.Escape.html(value));
                                    },
                            
                                    /**
                                     * Fires when start editing.
                                     *
                                     * @method _startEditing
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _startEditing: function(event) {
                                        var instance = this;
                            
                                        if (!instance.get('rendered')) {
                                            instance.render(instance.get('renderTo'));
                                        }
                            
                                        instance.fire('startEditing');
                            
                                        event.halt();
                                    },
                            
                                    /**
                                     * Sync the content text.
                                     *
                                     * @method _syncContentText
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _syncContentText: function(event) {
                                        var instance = this;
                            
                                        if (!event.initial) {
                                            var contentText = event.newVal;
                            
                                            instance._setInput(contentText);
                                            instance._setOutput(contentText);
                                        }
                                    },
                            
                                    /**
                                     * Converts the new lines <code>\n</code> to <code><br/></code> (i.e.,
                                     * nl2br).
                                     *
                                     * @method _toHTML
                                     * @param {String} text Input text.
                                     * @protected
                                     * @return {String}
                                     */
                                    _toHTML: function(text) {
                                        var instance = this;
                            
                                        return String(text).replace(/\n/gim, '<br/>');
                                    },
                            
                                    /**
                                     * Converts HTML to text.
                                     *
                                     * @method _toText
                                     * @param {String} text HTML input.
                                     * @protected
                                     * @return {String}
                                     */
                                    _toText: function(text) {
                                        var instance = this;
                            
                                        text = String(text);
                            
                                        text = text.replace(/<br\s*\/?>/gim, '\n');
                            
                                        text = text.replace(/(<\/?[^>]+>|\t)/gim, '');
                            
                                        return text;
                                    },
                            
                                    /**
                                     * Handles the updating of the UI when the node is set.
                                     *
                                     * @method _uiSetNode
                                     * @param {Node} node.
                                     * @protected
                                     */
                            
                                    _uiSetNode: function(node) {
                                        var instance = this;
                            
                                        if (instance._mouseEnterHandler) {
                                            instance._mouseEnterHandler.detach();
                                        }
                            
                                        if (instance._mouseLeaveHandler) {
                                            instance._mouseLeaveHandler.detach();
                                        }
                            
                                        if (instance._interactionHandler) {
                                            instance._interactionHandler.detach();
                                        }
                            
                                        var eventType = instance.get('eventType');
                            
                                        instance._mouseEnterHandler = node.on('mouseenter', instance._onMouseEnterEditable, instance);
                                        instance._mouseLeaveHandler = node.on('mouseleave', instance._onMouseLeaveEditable, instance);
                            
                                        instance._interactionHandler = node.on(eventType, instance._startEditing, instance);
                                    }
                                }
                            });
                            
                            A.Editable = Editable;