﻿/// <reference name="MicrosoftAjax.js" />

Type.registerNamespace('TeraWebControls.Tab');

TeraWebControls.TabViewContainer = function(element)
{
    // Inizializzazione
    
    this._tabs = new Array();
    this._clientStateField = null;
    this._activeMouseOverTimeout = null;

    this._tabShowTimeout = 200;
    this._stepIndex = 0;
    this._blockStep = false;
    this._labelCssClass = null;
    this._activeLabelCssClass = null;
    this._stepLabelCssClass = null;
    this._nextLabelCssClass = null;
    
    this._clickDelegate = null;
    this._clickNextDelegate = null;
    this._clickBackDelegate = null;
    
    // Inizializzazione della classe base

    TeraWebControls.TabViewContainer.initializeBase(this, [element]);
};

TeraWebControls.TabViewContainer.prototype =
{
    initialize : function()
    {
        TeraWebControls.TabViewContainer.callBaseMethod(this, 'initialize');
        
        // Recupera il campo nascosto utilizzato per la persistenza dello stato
        
        this._clientStateField = $get(this.get_id() + '_ClientState');
        
        // Popola l'array di tab utilizzato internamente
        //debugger;
        var tabIndex = 0;
        var ctrlTab = this._getTab(tabIndex);
        
        while (ctrlTab !== null)
        {
            // Aggiunge il tab corrente alla collezione interna
        
            this._tabs.push(ctrlTab);
            
            // Imposta la modalità di visualizzazione del controllo tab corrente

            ctrlTab.Content.set_visibilityMode(Sys.UI.VisibilityMode.collapse);
            
            // Aggiunge i gestori di evento al tab corrente

            /*Gestione On Mouse Over */
            /*
            $addHandlers(ctrlTab.Label.get_element(), 
                {
                    mouseover: this._onLabelMouseOver,
                    mouseout: this._onLabelMouseOut
                },
                this);
             */
                
            /* Gestione click */
            if (this._clickDelegate === null) 
                {
                    this._clickDelegate = Function.createDelegate(this, this._onLabelClickHandler);
                    
                }
                
            $addHandler(ctrlTab.Label.get_element(), 'click', this._clickDelegate);           
                         
           //debugger; 
           if (ctrlTab.Indietro != null)
            {
                if (this._clickBackDelegate === null) 
                {
                    this._clickBackDelegate = Function.createDelegate(this, this._clickBackHandler);
                }
            
                $addHandler(ctrlTab.Indietro.get_element(), 'click', this._clickBackDelegate);           
            }
            //    
           if (ctrlTab.Avanti != null)
            {
                if (this._clickNextDelegate === null) 
                {
                    this._clickNextDelegate = Function.createDelegate(this, this._clickHandler);
                }
            
                $addHandler(ctrlTab.Avanti.get_element(), 'click', this._clickNextDelegate);           
            }
            
            // Prosegue con il ciclo

            tabIndex++;
            ctrlTab = this._getTab(tabIndex);
        }
    },
    
    dispose : function()
    {
        // Rimuove i gestori di evento per tutti i tab
        
        for (tabIndex in this._tabs)
            $clearHandlers(this._tabs[tabIndex].Label.get_element());
    
        TeraWebControls.TabViewContainer.callBaseMethod(this, 'dispose');
    },
    
    _clickHandler: function(eventInfo) 
    {                
        //
        var tabToShow = null;
        var i = 0;
        var ix = 0;
        //debugger;
        Array.forEach(this._tabs, function(item)
        {
            if (item.Avanti != null && eventInfo.target == item.Avanti.get_element())
                tabToShow = item;
        }, this);
        
        // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
        // l'indice del tab attivo e di quello appena disattivato.
        if (checkTabChange(this._stepIndex)== false)
            return;
        
        if (tabToShow.Index >= this._stepIndex){
            this._stepIndex++;
            ix = this._stepIndex;
        }
        else 
            ix = tabToShow.Index+1;
            
        tabToShow = null;
        
        Array.forEach(this._tabs, function(item)
        {
            if (item.Index == ix)
                tabToShow = item;                      
        }, this);
        
        Array.forEach(this._tabs, function(item)
        {
            item.Content.set_visible(false);
             if (item.Index <= this._stepIndex)
                item.Label.get_element().className = this.get_stepLabelCssClass();
             else
                item.Label.get_element().className = this.get_labelCssClass();            
        }, this);
                        
        
        tabToShow.Content.set_visible(true);
        tabToShow.Label.get_element().className = this.get_activeLabelCssClass();
        
        // Salvataggio dello stato del controllo
        
        this._clientStateField.value = tabToShow.Index;
        
        // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
        // l'indice del tab attivo e di quello appena disattivato.
        
        var tabChangedHandler = this.get_events().getHandler('tabChanged');
        if (tabChangedHandler)
            tabChangedHandler(this, Sys.EventArgs.Empty);
    },
    
     _clickBackHandler: function(eventInfo) 
    {                
        //
        var tabToShow = null;
        var i = 0;
        var ix = 0;
        //debugger;
        Array.forEach(this._tabs, function(item)
        {
            if (item.Indietro != null && eventInfo.target == item.Indietro.get_element())
                tabToShow = item;
        }, this);
        
        // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
        // l'indice del tab attivo e di quello appena disattivato.
        if (checkTabChange(this._stepIndex)== false)
            return;
        
        if (tabToShow.Index >= this._stepIndex){
            this._stepIndex--;
            ix = this._stepIndex;
        }
        else 
            ix = tabToShow.Index-1;
            
        tabToShow = null;
        
        Array.forEach(this._tabs, function(item)
        {
            if (item.Index == ix)
                tabToShow = item;                      
        }, this);
        
        Array.forEach(this._tabs, function(item)
        {
            item.Content.set_visible(false);
             if (item.Index <= this._stepIndex)
                item.Label.get_element().className = this.get_stepLabelCssClass();
             else
                item.Label.get_element().className = this.get_labelCssClass();            
        }, this);
                        
        
        tabToShow.Content.set_visible(true);
        tabToShow.Label.get_element().className = this.get_activeLabelCssClass();
        
        // Salvataggio dello stato del controllo
        
        this._clientStateField.value = tabToShow.Index;
        
        // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
        // l'indice del tab attivo e di quello appena disattivato.
        
        var tabChangedHandler = this.get_events().getHandler('tabChanged');
        if (tabChangedHandler)
            tabChangedHandler(this, Sys.EventArgs.Empty);
    },
    _onLabelClickHandler: function(eventInfo) 
    {                
        //
        var tabToShow = null;
        var i = 0;
        var ix = 0;        
        // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
        // l'indice del tab attivo e di quello appena disattivato.                       
        Array.forEach(this._tabs, function(item)
        {
            if (eventInfo.target == item.Label.get_element())
                tabToShow = item;
        }, this);                    
        
        // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
        // l'indice del tab attivo e di quello appena disattivato.
        if (checkTabChange(this._stepIndex)== false)
            return;
        
        var tabChangedHandler = this.get_events().getHandler('tabChanged');
        if (tabChangedHandler)
            tabChangedHandler(this, this._stepIndex);
            
        this._stepIndex = tabToShow.Index
        Array.forEach(this._tabs, function(item)
        {
            item.Content.set_visible(false);
             if (item.Index <= this._stepIndex)
                item.Label.get_element().className = this.get_stepLabelCssClass();
             else
                item.Label.get_element().className = this.get_labelCssClass();            
        }, this);
                       
        tabToShow.Content.set_visible(true);  
        tabToShow.Label.get_element().className = this.get_activeLabelCssClass();
        
        // Salvataggio dello stato del controllo
        
        this._clientStateField.value = tabToShow.Index;
                
    },
    
    _onLabelMouseOver: function(eventInfo)
    {
        /// <summary>Gestisce l'evento di mouseover scatenato su di una label di un tab.</summary>

        // Annulla un eventuale timeout creato in precedenza ma non ancora scaduto
        
        this._cancelActiveMouseOverTimeout();
        
        // Crea un nuovo timeout in grado di effettuare lo switch del tab attivo
    
        this._activeMouseOverTimeout = window.setTimeout(Function.createDelegate(this, function()
            {
                // Recupera il tab da visualizzare

                var tabToShow = null;
                
                Array.forEach(this._tabs, function(item)
                {
                    if (eventInfo.target == item.Label.get_element())
                        tabToShow = item;
                }, this);
                               
                if (tabToShow.Index > this._stepIndex && this._blockStep)
                    return;
                
                // Nasconde tutti i tab esistenti                                
                Array.forEach(this._tabs, function(item)
                {
                    item.Content.set_visible(false);
                    if (item.Index <= this._stepIndex)
                        item.Label.get_element().className = this.get_stepLabelCssClass();
                     else
                        item.Label.get_element().className = this.get_labelCssClass();
                }, this);
                                
                
                tabToShow.Content.set_visible(true);
                tabToShow.Label.get_element().className = this.get_activeLabelCssClass();
                
                // Salvataggio dello stato del controllo
                
                this._clientStateField.value = tabToShow.Index;
                
                // Evento client di cambio del tab attivo; implementazioni future potrebbero fornire ai gestori
                // l'indice del tab attivo e di quello appena disattivato.
                
                var tabChangedHandler = this.get_events().getHandler('tabChanged');
                if (tabChangedHandler)
                    tabChangedHandler(this, Sys.EventArgs.Empty);
                
            }), this._tabShowTimeout);
    },

    _onLabelMouseOut: function(eventInfo)
    {
        /// <summary>Gestisce l'evento di mouseout scatenato su di una label di un tab.</summary>

        // Annulla un eventuale timeout creato in precedenza ma non ancora scaduto

        this._cancelActiveMouseOverTimeout();
    },
    
    _cancelActiveMouseOverTimeout: function()
    {
        /// <summary>Annulla l'eventuale timeout creato a fronte di un mouseover su di un tab.</summary>

        if (this._activeMouseOverTimeout)
        {
            window.clearTimeout(this._activeMouseOverTimeout);
            this._activeMouseOverTimeout = null;
        }
    },
    
    _getTab: function(tabIndex)
    {
        /// <summary>Ritorna un oggetto composito anonimo che identifica un tab del controllo.</summary>
        /// <param name="tabIndex">L'indice del tab richiesto.</param>
        //debugger;
        var ctrlLabel = $get(String.format('{0}_L{1}', this.get_id(), tabIndex));
        var ctrlContent = $get(String.format('{0}_C{1}', this.get_id(), tabIndex));
        var ctrlLinkAvanti = $get(String.format('{0}_LI{1}', this.get_id(), tabIndex));
        var ctrlLinkIndietro = $get(String.format('{0}_LB{1}', this.get_id(), tabIndex));
        
        if (ctrlLabel && ctrlContent && ctrlLinkAvanti && ctrlLinkIndietro)
            return { 
                Label: new Sys.UI.Control(ctrlLabel), 
                Content: new Sys.UI.Control(ctrlContent),
                Avanti: new Sys.UI.Control(ctrlLinkAvanti),
                Indietro: new Sys.UI.Control(ctrlLinkIndietro),
                Index: tabIndex
            };
       else
        if (ctrlLabel && ctrlContent && ctrlLinkAvanti)
            return { 
                Label: new Sys.UI.Control(ctrlLabel), 
                Content: new Sys.UI.Control(ctrlContent),
                Avanti: new Sys.UI.Control(ctrlLinkAvanti),
                Index: tabIndex
            };
       else
        if (ctrlLabel && ctrlContent && ctrlLinkIndietro)
            return { 
                Label: new Sys.UI.Control(ctrlLabel), 
                Content: new Sys.UI.Control(ctrlContent),
                Indietro: new Sys.UI.Control(ctrlLinkIndietro),
                Index: tabIndex
            };
       else
        if (ctrlLabel && ctrlContent)
            return { 
                Label: new Sys.UI.Control(ctrlLabel), 
                Content: new Sys.UI.Control(ctrlContent),
                Avanti: null,
                Index: tabIndex
            };
        
        return null;
    },
    
    // Eventi del controllo
    
    add_tabChanged: function(handler)
    {
        this.get_events().addHandler('tabChanged', handler);
    },

    remove_tabChanged: function(handler)
    {
        this.get_events().removeHandler('tabChanged', handler);
    },    
    
    // Proprietà del controllo

    get_tabShowTimeout: function()
    {
        return this._tabShowTimeout;
    },
    
    set_tabShowTimeout: function(value)
    {
        this._tabShowTimeout = value;
        this.raisePropertyChanged('tabShowTimeout');
    },
    
    get_labelCssClass: function()
    {
        return this._labelCssClass;
    },
    
    set_labelCssClass: function(value)
    {
        this._labelCssClass = value;
        this.raisePropertyChanged('labelCssClass');
    },
    
    get_nextLabelCssClass: function()
    {
        return this._nextLabelCssClass;
    },
    
    set_nextLabelCssClass: function(value)
    {
        this._nextLabelCssClass = value;
        this.raisePropertyChanged('nextLabelCssClass');
    },    
        
    get_stepLabelCssClass: function()
    {
        return this._stepLabelCssClass;
    },
    
    set_stepLabelCssClass: function(value)
    {
        this._stepLabelCssClass = value;
        this.raisePropertyChanged('stepLabelCssClass');
    },
    
    get_activeLabelCssClass: function()
    {
        return this._activeLabelCssClass;
    },
    
    set_activeLabelCssClass: function(value)
    {
        this._activeLabelCssClass = value;
        this.raisePropertyChanged('activeLabelCssClass');
    },
    
    get_blockStep: function()
    {
        return this._blockStep;
    },
    
    set_blockStep: function(value)
    {
        this._blockStep = value;
        this.raisePropertyChanged('blockStep');
    },
    
    get_stepIndex: function()
    {
        return this._stepIndex;
    },
    
    set_stepIndex: function(value)
    {
        this._stepIndex = value;
        this.raisePropertyChanged('stepIndex');
    }
};

TeraWebControls.TabViewContainer.registerClass('TeraWebControls.TabViewContainer', Sys.UI.Control);

if (typeof(Sys) !== 'undefined')
    Sys.Application.notifyScriptLoaded();
