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

/**
 * @class Ext.dirac.views.tabs.Wallpaper
 * @extends Ext.Component
 *          <p>
 *          This component renders an image that stretches to fill the
 *          component.
 *          </p>
 */
Ext.define("Ext.dirac.views.tabs.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;
  },
});
