/**
 * This is a simple way to add an image of any size to your application and have it participate in the layout system
 * like any other component. This component typically takes between 1 and 3 configurations - a {@link #src}, and
 * optionally a {@link #height} and a {@link #width}:
 *
 *     Ext.create('Ext.Img', {
 *         src: 'path/to/my/image.jpg',
 *         height: 300,
 *         width: 400
 *     });
 *
 * It's also easy to add an image into a panel or other container using its xtype:
 *
 *     Ext.create('Ext.Panel', {
 *         layout: '{@link Ext.layout.HBox hbox}',
 *         items: [
 *             {
 *                 xtype: 'image',
 *                 src: 'path/to/my/profilePicture.jpg',
 *                 flex: 1
 *             },
 *             {
 *                 xtype: 'textareafield',
 *                 flex: 2,
 *                 label: {
 *                     text: 'My Profile',
 *                     align: 'top'
 *                 }
 *             }
 *         ]
 *     });
 *
 * Here we created a panel which contains an image (a profile picture in this case) and a text area to allow the user
 * to enter profile information about themselves. In this case we used an {@link Ext.layout.HBox hbox layout} and
 * flexed the image to take up one third of the width and the text area to take two thirds of the width. See the
 * {@link Ext.layout.HBox hbox docs} for more information on flexing items.
 */
Ext.define('Ext.Img', {
    extend: 'Ext.Component',
    xtype: ['image', 'img'],

    /**
     * @event tap
     * Fires whenever the component is tapped
     * @param {Ext.Img} this The Image instance
     * @param {Ext.EventObject} e The event object
     */

    config: {
        /**
         * @cfg {String} src The source of this image
         */
        src: null,

        // @inherit
        baseCls: Ext.baseCSSPrefix + 'img',

        mode: 'background'
    },

    initialize: function() {
        var me = this;
        me.callParent();

        me.relayEvents(me.renderElement, '*');

        me.element.on({
            tap: 'onTap',
            scope: me
        });
    },

    hide: function() {
        this.callParent();
        this.hiddenSrc = this.hiddenSrc || this.getSrc();
        this.setSrc(null);
    },

    show: function() {
        this.callParent();
        if (this.hiddenSrc) {
            this.setSrc(this.hiddenSrc);
            delete this.hiddenSrc;
        }
    },

    updateMode: function(mode) {
        if (mode === 'background') {
            if (this.imageElement) {
                this.imageElement.destroy();
                delete this.imageElement;
                this.updateSrc(this.getSrc());
            }
        }
        else {
            this.imageElement = this.element.createChild({ tag: 'img' });
        }
    },

    onTap: function(e) {
        this.fireEvent('tap', this, e);
    },

    onAfterRender: function() {
        this.updateSrc(this.getSrc());
    },

    /**
     * @private
     */
    updateSrc: function(newSrc) {
        if (this.getMode() === 'background') {
            this.element.dom.style.backgroundImage = newSrc ? 'url("' + newSrc + '")' : '';
        }
        else {
            this.imageElement.dom.setAttribute('src', newSrc);
        }
    },

    doSetWidth: function(width) {
        var sizingElement = (this.getMode() === 'background') ? this.element : this.imageElement;

        sizingElement.setWidth(width);

        this.callParent(arguments);
    },

    doSetHeight: function(height) {
        var sizingElement = (this.getMode() === 'background') ? this.element : this.imageElement;

        sizingElement.setHeight(height);

        this.callParent(arguments);
    },

    destroy: function() {
        if (this.imageElement) {
            this.imageElement.destroy();
        }

        this.callParent();
    }
});