/**
 * ExtJS Wizard Component
 * Copyright (C) 2008 Hans-Peter Oeri <hp@oeri.ch>
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
 * details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <http://www.gnu.org/licenses/>.
 *
 * ----------------------------------------------------------------------
 *
 * @author Hans-Peter Oeri <hp@oeri.ch>
 * @url https://saintcyr.oeri.ch/trac/ext-ux/
 *
 * Prior work by
 * @author Thorsten Suckow-Homberg <ts@siteartwork.de>
 * @url http://www.siteartwork.de/wizardcomponent
 */

/**
 * @class Ext.ux.WizardPanel.Info
 * @extends Ext.BoxComponent
 *
 * A specific {@link Ext.BoxComponent} that can be used to show the current
 * process in an {@link Ext.ux.Wizard}.
 *
 * @constructor
 * @param {Object} config The config object
 */
Ext.ux.WizardPanel.Info = Ext.extend( Ext.BoxComponent, {

    /**
	 * @cfg {Number} height The height of this component. Defaults to "55".
	 */
    height :55,

    /**
	 * @cfg {String} region The BorderLayout region of this component.
	 */
    region :'north',

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

    /**
     * @cfg {String} title Title displayed in the component.
     */
    title: 'DFR Quote Status',

    /**
	 * @param {Ext.Element} titleEl HTML element for the title
	 */
    titleEl: null,

    /**
	 * @cfg {String} stepText The text in the header indicating the current
	 *      process in the wizard. {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 card
	 * @type String
	 */
    stepText: "Step {0} of {1}: {2}",

    /**
	 * @cfg {Ext.Element} stepEl HTML element for the step indication.
	 */
    stepEl: null,

    /**
	 * @cfg {Ext.Template} stepTemplate compiled template for text indication.
	 */
    stepTemplate: null,

    /**
	 * @cfg {Array} indicators Array of HTML images.
	 */
    indicators: [],

    /**
     * @cfg {Integer} lastActiveStep
     */
    lastActiveStep: -1,

    /**
	 * Overrides parent implementation to render this component properly.
	 */
    onRender: function( ct, position ) {
    	this.ownerCt.on( 'change', this.onChange, this );
	    Ext.ux.WizardPanel.Info.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);
	    var imageContainer = new Ext.Element(ns.lastChild);

	    this.titleEl.update( this.title );

	    var image = null;
	    for ( var i = 0, len = this.ownerCt.cards.length; i < len ; i++) {
		    image = document.createElement('div');
		    image.innerHTML = "&#160;";
		    image.className = 'ux-wizard-Header-stepIndicator';
		    this.indicators[i] = new Ext.Element(image);
		    imageContainer.appendChild(image);
	    }

	    // onUpdate will be called first thing from the wizard
    },

    /**
	 * Listener for changes to the wizard. Updated the contents.
	 * @param {Ext.ux.Wizard} wizard the changed wizard
	 * @param {Integer} index new card index
	 * @private
	 */
    onChange: function( wizard, index ) {
    	var html = this.stepTemplate.apply( {
	        0: index + 1,
	        1: wizard.cards.length,
	        2: wizard.cards[index].title
	    });

	    this.stepEl.update(html);

	    if (this.lastActiveStep != -1) {
		    this.indicators[this.lastActiveStep]
		        .removeClass('ux-wizard-Header-stepIndicator-active');
	    }

	    this.indicators[index]
	        .addClass('ux-wizard-Header-stepIndicator-active');

	    this.lastActiveStep = index;
    }

});

Ext.reg( 'ux.WizardPanel.Info', Ext.ux.WizardPanel.Info );