/*!
 * Ext JS Library
 * Copyright(c) 2006-2014 Sencha Inc.
 * [email protected]
 * 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;
    }
});