var templateForm;
var FormPanel = function(form, config, help) {
    config = config || {};
    FormPanel.superclass.constructor.call(this, Ext.id(), config);
    if (!templateForm){
        var htmlForm='<div><div class="x-box-tl">'+
        '<div class="x-box-tr"><div class="x-box-tc"></div></div></div>'+
        '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">'+
        '<div id="{0}"></div></div></div></div>'+
        '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc">'+
        '</div></div></div></div>';	
        htmlForm = '<div id="{0}" style="padding: 10px 10px;"></div>';
        templateForm = new Ext.DomHelper.Template(htmlForm);
        templateForm.compile();	
    }
    this.formId = Ext.id();
    this.name = config.name || this.formId;
    this.help = help;
    templateForm.append(this.getId(),[this.formId]);
    this.formRendered = false;
    if (!config.delayRender){
        this.formRendered = true;
        form.render(this.formId);
    }
    this.form = form;	
};
Ext.extend(FormPanel, Ext.ContentPanel,{
    getForm: function(){
        return this.form;
    }
});

Ext.namespace("Ext.Widget");
Ext.Widget.Wizard =function (el, layoutDialogConfig, config){
    if (layoutDialogConfig.center === undefined){
        layoutDialogConfig.center = {
            autoScroll:true,
            tabPosition: 'top',
            alwaysShowTabs: true,
            hideTabs: config.hideTabs !== false ? true : false
        };
    }
    Ext.Widget.Wizard.superclass.constructor.call(this, el, layoutDialogConfig);
    this.events={
        "activate":true,
        "deactivate":true,
        "cancel":true,
        "finish":true
    };
    Ext.apply(this, config);	
    this.init();
}
Ext.extend(Ext.Widget.Wizard , Ext.LayoutDialog, {
    init:function(){
        this.addKeyListener(27, this.cancel, this);
        this.addButton('Cancel', this.cancel, this);
        this.btnPrev = this.addButton('Previous', this.previousStep,this);				
        this.btnNext = this.addButton('Next', this.nextStep,this);
        this.btnFinish = this.addButton('Finish', this.finish, this);				
        var layout = this.getLayout();
        layout.beginUpdate();
        Ext.each(this.steps, this.create.createDelegate(this, layout, true),this);	   
        layout.endUpdate();
        this.tabs = this.getLayout().getRegion('center').getTabs();						
        this.tabs.activate(this.tabs.items[0].id);
        this.tabs.on("tabchange",this.tabChange, this); 
        this.tabs.on("beforetabchange", this.beforeTabChange, this);
        this.toggleButtons();
    },
    create:function(el,pos,array, layout){
        Ext.apply(el.config, {autoCreate: true, delayRender:pos >0});
        layout.add('center', new FormPanel(el.form, el.config, el.help));
        if (el.help !== false){
            var el = Ext.get(el.help);
            el.setDisplayed(false);
        }
    },
    beforeTabChange:function(panel, e, newtab){
        var lastForm = this.getLayout().getRegion('center').getActivePanel().getForm();
        if (!lastForm.isValid())
            e.cancel = true;			
    },
    tabChange:function(panel, tab){
        var panel = this.getLayout().getRegion('center').getActivePanel();
        if (!panel.formRendered){
            panel.getForm().render(panel.formId);
            panel.formRendered = true;
        }
        if (panel.help !== false){
            var el = Ext.get(panel.help);
            this.getLayout().getRegion('east').getActivePanel().setContent(el.dom.innerHTML);
        } else {
            this.getLayout().getRegion('east').getActivePanel().setContent('');			
        }
        this.toggleButtons();
    },
    finish:function(){
        var lastForm = this.getLayout().getRegion('center').getActivePanel().getForm();
        if (!lastForm.isValid())
            return;
        this.fireEvent("finish",lastForm,this);
    },
    addElements:function(form,elements){
        for(var el in elements){
            fel=  new Ext.form.TextField({
                name: el,
                value:elements[el],
                hidden:true
            })
            form.add(fel);    
        }
    },
    getValues:function(name){
        var forms = this.getLayout().getRegion('center').panels;
        var len = forms.getCount();
        if (name !== undefined){
            for(var i=0;i<len;i++){
                if (forms.get(i).name == name){
                    return forms.get(i).getForm().getValues();
                }
            }
            return null;
        } else {
            var result = {};			
            for(var i=0;i<len;i++){
                result[forms.get(i).name] = forms.get(i).getForm().getValues();
            }
            return result;				
        }			
    },
    getForm:function(name){
        var forms = this.getLayout().getRegion('center').panels;
        var len= forms.getCount();
        if (name !== undefined){
            for(var i=0;i<len;i++){
                if (forms.get(i).name == name){
                    return forms.get(i).getForm();
                }
            }
            return null;
        }
        var newFormId=Ext.id();
        var htmlForm="<div id={0} style='display:none'></div>";
        var tpl= new Ext.DomHelper.Template(htmlForm);
        tpl.append(document.body,[newFormId]);
        frmLast = new Ext.form.Form();
        for(var i=0;i<len;i++){
            if (forms.get(i).formRendered){
                this.addElements(frmLast,forms.get(i).getForm().getValues());
            }
        }
        frmLast.render(newFormId);
        return frmLast;
    },
    toggleButtons:function(){
        var index = this.getTabIndex();;
        var cnt = this.tabs.items.length;
        this.btnPrev.setDisabled(index == 0);
        this.btnNext.setDisabled(index == cnt - 1);
        if (index == cnt - 1)
            this.btnFinish.enable();
        else
            this.btnFinish.disable();
    },
    activateNextStep:function(next){
        var index = this.getTabIndex();
        if (next){
            index++;
        } else {
            index--;
        }
        this.tabs.activate(this.tabs.items[index].id);			
    },
    nextStep:function(){
        this.activateNextStep(true);
    },
    previousStep:function(){
        this.activateNextStep(false);
    },
    cancel:function(){
        var lastForm = this.getLayout().getRegion('center').getActivePanel().getForm();	   
        this.fireEvent("cancel",lastForm,this);
    },
    getTabIndex:function(tab){
        if (!tab)
            tab = this.tabs.getActiveTab();
        return this.tabs.items.indexOf(tab);
    }
}
)
/*
Texts to put in the buttons
put this after including the script for internationalization
 */
Ext.Widget.Wizard.prototype.NextButton="Next";
Ext.Widget.Wizard.prototype.PreviousButton="Previous";
Ext.Widget.Wizard.prototype.FinishButton="Finish";// JScript File