Ext.ns('Ext.ux');

Ext.ux.simpleWizard = function(config){
   config = config || {};
   Ext.apply(this, config);
   Ext.ux.simpleWizard.superclass.constructor.call(this);
   this.insert(0,{
      xtype:'panel',
      border: false, 
      cls:'',
      bodyStyle: 'margin-top:0px;',
      items: [{
        xtype: 'panel',
        border: false, 
        listeners: {
              render : function(panel) {
                tpl = new Ext.XTemplate(
                  '<tpl for=".">',
                      '<div class="printwizardTop">',
                        '<img src="{icon}"/>',
                        '<div class="printwizardTopInner">',
                          '<h3>{title}</h3>',
                          '<p>{info}</p>',
                        '</div>',
                      '</div>',
                  '</tpl>'
                );
                headerData = {title: config.headerText, info: config.info, icon: config.icon};
                tpl.overwrite(panel.body, headerData);  
              }
        }
     }]
   }); 
   this.doLayout();
};

Ext.extend(Ext.ux.simpleWizard, Ext.Window, {
  width: 550,
  height: 400,
  closeAction: 'hide',
  modal: true,
  plain: true,
  cls: 'simpleWizard', 
  autoScroll:true,
  defaults: {bodyStyle: 'background:none !important;', border:false, bodyStyle: 'margin-top:20px;'},
  fbar: {
        xtype: 'toolbar',
        items: [
            {
                xtype: 'button',
                text: 'Close',
                handler: function(btn){
                    this.ownerCt.ownerCt.hide();
                }
            }
        ]
    }
});

Ext.ComponentMgr.registerType('simplewizard', Ext.ux.simpleWizard);