Ext.namespace('Ext.ux.Wiz');

/**
 * Licensed under GNU LESSER GENERAL PUBLIC LICENSE Version 3
 *
 * @author Thorsten Suckow-Homberg <ts@siteartwork.de>
 * @url http://www.siteartwork.de/wizardcomponent
 */

/**
 * @class Ext.ux.Wiz.Header
 * @extends Ext.BoxComponent
 *
 * A specific {@link Ext.BoxComponent} that can be used to show the current process in an
 * {@link Ext.ux.Wiz}.
 *
 * An instance of this class is usually being created by {@link Ext.ux.Wiz#initPanels} using the
 * {@link Ext.ux.Wiz#headerConfig}-object.
 *
 * @private
 * @constructor
 * @param {Object} config The config object
 */
Ext.ux.Wiz.Header = Ext.extend(Ext.BoxComponent, {
 
    /**
     * @cfg {Number} height The height of this component. Defaults to "55".
     */  
    height : 55,
   
    /**
     * @cfg {String} region The Region of this component. Since a {@link Ext.ux.Wiz}
     * usually uses a {@link Ext.layout.BorderLayout}, this property defaults to
     * "north". If you want to change this property, you should also change the appropriate
     * css-classes that are used for this component.
     */  
    region : 'north',
     
    /**
     * @cfg {String} title The title that gets rendered in the head of the component. This
     * should be a text describing the purpose of the wizard.
     */  
    title : 'Wizard',
   
    /**
     * @cfg {Number} steps The overall number of steps the user has to go through
     * to finish the wizard.
     */
    steps : 0,

    /**
     * @cfg {String} stepText The text in the header indicating the current process in the wizard.
     * (defaults to "Step {0} of {1}: {2}").
     * {0} is replaced with the index (+1) of the current card, {1} is replaced by the
     * total number of cards in the wizard and {2} is replaced with the title-property of the
     * {@link Ext.ux.Wiz.Card}
     * @type String
     */
    stepText : "Step {0} of {1}: {2}",

    /**
     * @cfg {Object} autoEl The element markup used to render this component.
     */
        autoEl : {
                tag : 'div',
                cls              : 'ext-ux-wiz-Header',
                children : [{
                        tag              : 'div',
                        cls              : 'ext-ux-wiz-Header-title'
                }, {
                        tag  : 'div',
                        children : [{
                                tag : 'div',
                                cls : 'ext-ux-wiz-Header-step'
                        }, {
                                tag : 'div',
                                cls : 'ext-ux-wiz-Header-stepIndicator-container'
                        }]
                }]
        },

    /**
     * @param {Ext.Element}
     */
        titleEl : null,

    /**
     * @param {Ext.Element}
     */
    stepEl  : null,
       
    /**
     * @param {Ext.Element}
     */
        imageContainer : null,
       
    /**
     * @param {Array}
     */        
        indicators : null,
 
        /**
         * @param {Ext.Template}
         */
        stepTemplate : null,
       
        /**
         * @param {Number} lastActiveStep Stores the index of the last active card that
         * was shown-
         */
        lastActiveStep : -1,
 
// -------- helper
    /**
     * Gets called by  {@link Ext.ux.Wiz#onCardShow()} and updates the header
     * with the approppriate information, such as the progress of the wizard
     * (i.e. which card is being shown etc.)
     *
     * @param {Number} currentStep The index of the card currently shown in
     * the wizard
     * @param {String} title The title-property of the {@link Ext.ux.Wiz.Card}
     *
     * @private
     */
        updateStep : function(currentStep, title)
        {
                var html = this.stepTemplate.apply({
                        0 : currentStep+1,
                        1 : this.steps,
                        2 : title
                });
               
                this.stepEl.update(html);
               
                if (this.lastActiveStep != -1) {
                        this.indicators[this.lastActiveStep].removeClass('ext-ux-wiz-Header-stepIndicator-active');
                }
               
                this.indicators[currentStep].addClass('ext-ux-wiz-Header-stepIndicator-active');
               
                this.lastActiveStep = currentStep;
        },
 
 
// -------- listener  
    /**
     * Overrides parent implementation to render this component properly.
     */
        onRender : function(ct, position)
        {
                Ext.ux.Wiz.Header.superclass.onRender.call(this, ct, position);
       
                this.indicators   = [];
                this.stepTemplate = new Ext.Template(this.stepText),
                this.stepTemplate.compile();
       
            var el = this.el.dom.firstChild;
            var ns = el.nextSibling;
           
                this.titleEl        = new Ext.Element(el);
                this.stepEl         = new Ext.Element(ns.firstChild);
                this.imageContainer = new Ext.Element(ns.lastChild);
       
                this.titleEl.update(this.title);
               
                var image = null;
                for (var i = 0, len = this.steps; i < len; i++) {
                        image = document.createElement('div');
                        image.innerHTML = "&#160;";
                        image.className = 'ext-ux-wiz-Header-stepIndicator';
                        this.indicators[i] = new Ext.Element(image);
                        this.imageContainer.appendChild(image);
                }
        }
});

