/*
 * Ext JS Library
 * Copyright(c) 2006-2020 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */

/**
 * @class Ext.ux.desktop.Wallpaper
 * @extends Ext.Component
 * <p>This component renders an image that stretches to fill the component.</p>
 */
Ext.define('Ext.ux.desktop.Wallpaper', {
    extend: 'Ext.Component',

    alias: 'widget.wallpaper',

    cls: 'ux-wallpaper',
    html: '<img src="' + Ext.BLANK_IMAGE_URL + '">',

    stretch: false,
    wallpaper: null,
    stateful: true,
    stateId: 'desk-wallpaper',

    afterRender: function() {
        var me = this;

        me.callParent();
        me.setWallpaper(me.wallpaper, me.stretch);
    },

    applyState: function() {
        var me = this,
            old = me.wallpaper;

        me.callParent(arguments);

        if (old !== me.wallpaper) {
            me.setWallpaper(me.wallpaper);
        }
    },

    getState: function() {
        return this.wallpaper && { wallpaper: this.wallpaper };
    },

    setWallpaper: function(wallpaper, stretch) {
        var me = this,
            imgEl, bkgnd;

        me.stretch = (stretch !== false);
        me.wallpaper = wallpaper;

        if (me.rendered) {
            imgEl = me.el.dom.firstChild;

            if (!wallpaper || wallpaper === Ext.BLANK_IMAGE_URL) {
                Ext.fly(imgEl).hide();
            }
            else if (me.stretch) {
                imgEl.src = wallpaper;

                me.el.removeCls('ux-wallpaper-tiled');
                Ext.fly(imgEl).setStyle({
                    width: '100%',
                    height: '100%'
                }).show();
            }
            else {
                Ext.fly(imgEl).hide();

                bkgnd = 'url(' + wallpaper + ')';
                me.el.addCls('ux-wallpaper-tiled');
            }

            me.el.setStyle({
                backgroundImage: bkgnd || ''
            });

            if (me.stateful) {
                me.saveState();
            }
        }

        return me;
    }
});