/**!
 * Quality & Manufacturing Consulting, S.C.
 * Copyright(c) 2011
 * Main file used in Welcome screen
 **/

/**Once the doc is ready we will create UI components
 **/
Ext.onReady(function(){
    var skipAnimation = false;
    
    var hideAllForCancelAnimation = function(){
        
        var lbl = Ext.getCmp("lblBetter").getEl();
        lbl.fadeOut({
            endOpacity: 0,
            duration: .1,
            easing: 'easeOut',
            useDisplay: false,
            concurrent : true
        });
        
        lbl = Ext.getCmp("lblBe2").getEl();
        lbl.fadeOut({
            endOpacity: 0,
            duration: .1,
            easing: 'easeOut',
            useDisplay: false,
            concurrent : true
        });
        
        lbl = Ext.getCmp("lblTeam").getEl();
        lbl.fadeOut({
            endOpacity: 0,
            duration: .1,
            easing: 'easeOut',
            useDisplay: false,
            concurrent : true
        });
        
        lbl = Ext.getCmp("lblBe3").getEl();
        lbl.fadeOut({
            endOpacity: 0,
            duration: .1,
            easing: 'easeOut',
            useDisplay: false,
            concurrent : true
        });
        
        lbl = Ext.getCmp("lblQMCSamll").getEl();
        lbl.fadeOut({
            endOpacity: 0,
            duration: .1,
            easing: 'easeOut',
            useDisplay: false,
            concurrent : true
        });
    }
    
    var cancelAnimation = function(){
        skipAnimation = true;
        
        hideAllForCancelAnimation();
        
        var lblQMC = Ext.getCmp("lblQMC").getEl();
        lblQMC.fadeIn({
            endOpacity: 1,
            duration: .1,
            easing: 'easeIn',
            useDisplay: false,
            concurrent : true
        });
        lblQMC.scale(400, 400,{
            endOpacity: 1,
            x: 370,
            duration: 1.5,
            easing: 'easeIn',
            useDisplay: false,
            concurrent : true,
            callback : startAnieveraryAnimation
        });
        
        var pnlWorldMap = Ext.getCmp("pnlWorldMap").getEl();
        pnlWorldMap.fadeIn({
            endOpacity: 1,
            duration: .7,
            easing: 'easeIn',
            useDisplay: false,
            concurrent : true,
            callback : function(){
                
                var lblMxFlag = Ext.getCmp("lblMxFlag").getEl();
                    lblMxFlag.fadeIn({
                    endOpacity: 1,
                    duration: .3,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
                
                var lblUsFlag = Ext.getCmp("lblUsFlag").getEl();
                    lblUsFlag.fadeIn({
                    endOpacity: 1,
                    duration: .4,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
                
                var lblJpFlag = Ext.getCmp("lblJpFlag").getEl();
                    lblJpFlag.fadeIn({
                    endOpacity: 1,
                    duration: .5,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }
        });
    }
    
    var mainViewport = new Ext.Viewport({
        layout : "absolute",
        autoScroll : true,
        layoutConfig : {
        //    columns : 2
        },
        items : [{
            id : "pnlSkipIntro",
            border : false,
            x : 710,
            y : 500,
            height : 40,
            width : 80,
            items : [{
                xtype : "label",
                html : '<span style="font-size: 8pt; font-family: Tahoma;">Skip Intro</span>',
                listeners : {
                    afterrender : function(){
                        this.getEl().on("click",
                            function(){
                                cancelAnimation();
                            }
                        );
                    }
                }
            }]
        },{
            id : "pnlWorldMap",
            layout : "absolute",
            style : "visibility : hidden",
            //style : "visibility : hidden",
            height : 210,
            border : false,
            forceLayout : true,
            x : 360,
            y : 340,
            items : [{
                xtype : "label",
                html : "<img src='images/worldmap.bmp'/>"
            }, {
                id : "lblMxFlag",
                xtype : "label",
                html : "<a href='home.php?lang=es_MX' class='link1'><img src='images/mx_flag.jpg'/></a>",
                style : "visibility : hidden",
                x : 10,
                y : 120
            }, {
                id : "lblUsFlag",
                xtype : "label",
                html : "<a href='home.php?lang=en_US' class='link1'><img src='images/us_flag.jpg'/></a>",
                style : "visibility : hidden",
                x : 10,
                y : 145
            }, {
                id : "lblJpFlag",
                xtype : "label",
                html : "<a href='home.php?lang=ja_JP' class='link1'><img src='images/jp_flag.gif'/>",
                style : "visibility : hidden",
                x : 10,
                y : 170
            }] 
        },{
            
            border : false,
            x : 100,
            width : 900,
            height : 330,
            layout : "absolute",
            items :[{
                id : "pnlTopAnimation",
                border : false,
                frame : true,
                y : 5,
                height : 10,
                width : 900,
                listeners: {
                    afterrender : function() {
                        /*Ext.getCmp("pnlTopAnimation").getEl().fadeOut({
                            duration: .5,
                            easing: 'easeOut',
                            useDisplay: true
                            //concurrent : true
                        });*/
                    }
                }
            },{
                id : "lblSlogan",
                xtype : "label",
                html : "<img src='images/slogan.png'/>",
                x : 180,
                y : 305,
                style : "visibility : hidden"
            },{
                id : "lblQMCSamll",
                xtype : "label",
                html : "<img src='images/qmcSmall.png'/>",
                x : 360,
                y : 305,
                style : "visibility : hidden"
            },{
                id : "lbl01_11",
                xtype : "label",
                html : "<img src='images/01_11.png'/>",
                x : 630,
                y : 65,
                style : "visibility : hidden"
            },{
                id : "lbl10h",
                xtype : "label",
                html : "<img src='images/10th.png'/>",
                x : 425,
                y : 90,
                style : "visibility : hidden"
            },{
                id : "lblAnniversary",
                xtype : "label",
                html : "<img src='images/anniversary.png'/>",
                x : 410,
                y : 190,
                style : "visibility : hidden"
            },{
                id : "lblBulle8f",
                xtype : "label",
                html : "<img src='images/bullet8f.png'/>",
                x : 626,
                y : 127,
                style : "visibility : hidden"
            },{
                id : "lblBulle8e",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 623,
                y : 150,
                style : "visibility : hidden"
            },{
                id : "lblBulle8d",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 623,
                y : 177,
                style : "visibility : hidden"
            },{
                id : "lblBulle8c",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 623,
                y : 204,
                style : "visibility : hidden"
            },{
                id : "lblBulle8b",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 623,
                y : 231,
                style : "visibility : hidden"
            },{
                id : "lblBulle8a",
                xtype : "label",
                html : "<img src='images/bullet5a.png'/>",
                x : 623,
                y : 258,
                style : "visibility : hidden"
            },{
                id : "lblBulle7i",
                xtype : "label",
                html : "<img src='images/bullet7i.png'/>",
                x : 596,
                y : 65,
                style : "visibility : hidden"
            },{
                id : "lblBulle7h",
                xtype : "label",
                html : "<img src='images/bullet7h.png'/>",
                x : 594,
                y : 81,
                style : "visibility : hidden"
            },{
                id : "lblBulle7g",
                xtype : "label",
                html : "<img src='images/bullet8f.png'/>",
                x : 593,
                y : 101,
                style : "visibility : hidden"
            },{
                id : "lblBulle7f",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 590,
                y : 123,
                style : "visibility : hidden"
            },{
                id : "lblBulle7e",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 590,
                y : 150,
                style : "visibility : hidden"
            },{
                id : "lblBulle7d",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 590,
                y : 177,
                style : "visibility : hidden"
            },{
                id : "lblBulle7c",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 590,
                y : 204,
                style : "visibility : hidden"
            },{
                id : "lblBulle7b",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 590,
                y : 231,
                style : "visibility : hidden"
            },{
                id : "lblBulle7a",
                xtype : "label",
                html : "<img src='images/bullet5a.png'/>",
                x : 590,
                y : 258,
                style : "visibility : hidden"
            },{
                id : "lblBulle6d",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 557,
                y : 177,
                style : "visibility : hidden"
            },{
                id : "lblBulle6c",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 557,
                y : 204,
                style : "visibility : hidden"
            },{
                id : "lblBulle6b",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 557,
                y : 231,
                style : "visibility : hidden"
            },{
                id : "lblBulle6a",
                xtype : "label",
                html : "<img src='images/bullet5a.png'/>",
                x : 557,
                y : 258,
                style : "visibility : hidden"
            },{
                id : "lblBulle5b",
                xtype : "label",
                html : "<img src='images/bullet5b.png'/>",
                x : 526,
                y : 231,
                style : "visibility : hidden"
            },{
                id : "lblBulle5a",
                xtype : "label",
                html : "<img src='images/bullet5a.png'/>",
                x : 526,
                y : 258,
                style : "visibility : hidden"
            },{
                id : "lblBulle4b",
                xtype : "label",
                html : "<img src='images/bullet4b.png'/>",
                x : 497,
                y : 235,
                style : "visibility : hidden"
            },{
                id : "lblBulle4a",
                xtype : "label",
                html : "<img src='images/bullet4a.png'/>",
                x : 494,
                y : 258,
                style : "visibility : hidden"
            },{
                id : "lblBulle3",
                xtype : "label",
                html : "<img src='images/bullet3.png'/>",
                x : 470,
                y : 263,
                style : "visibility : hidden"
            },{
                id : "lblBulle2",
                xtype : "label",
                html : "<img src='images/bullet2.png'/>",
                x : 449,
                y : 265,
                style : "visibility : hidden"
            },{
                id : "lblBulle1",
                xtype : "label",
                html : "<img src='images/bullet1.png'/>",
                x : 427,
                y : 265,
                style : "visibility : hidden"
            },{
                id : "lblQMC",
                xtype : "label",
                html : "<img src='images/qmc.png'/>",
                x : 350,
                y : 160,
                style : "visibility : hidden"
            },{
                id : "lblBe3",
                xtype : "label",
                html : "<img src='images/Be.png'/>",
                x : 260,
                y : 250,
                style : "visibility : hidden"
            },{
                id : "lblTeam",
                xtype : "label",
                html : "<img src='images/Team.png'/>",
                x : 550,
                y : 250,
                style : "visibility : hidden"
            },{
                id : "lblBe2",
                xtype : "label",
                html : "<img src='images/Be.png'/>",
                x : 400,
                y : 200,
                style : "visibility : hidden"
            }, {
                id : "lblBetter",
                xtype : "label",
                html : "<img src='images/Better.png'/>",
                x : 215,
                y : 215,
                style : "visibility : hidden"
            },{
                id : "lblBe",
                xtype : "label",
                html : "<img src='images/Be.png'/>",
                x : 200,
                y : 200,
                listeners: {
                    afterrender : function() {
                        startAnimation();
                    }
                }
            }]
        }]
        
    }).show();
    
    function startAnieveraryAnimation(){
    
        var lblSlogan = Ext.getCmp("lblSlogan").getEl();
        lblSlogan.fadeIn({
            endOpacity: .9,
            duration: 8,
            easing: 'easeIn',
            useDisplay: false,
            concurrent : true,
            callback : function(){
                if (skipAnimation){
                    return;
                }
                var pnlWorldMap = Ext.getCmp("pnlWorldMap").getEl();
                    pnlWorldMap.fadeIn({
                    endOpacity: 1,
                    duration: .7,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        
                        var lblMxFlag = Ext.getCmp("lblMxFlag").getEl();
                            lblMxFlag.fadeIn({
                            endOpacity: 1,
                            duration: .3,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                        
                        var lblUsFlag = Ext.getCmp("lblUsFlag").getEl();
                            lblUsFlag.fadeIn({
                            endOpacity: 1,
                            duration: .4,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                        
                        var lblJpFlag = Ext.getCmp("lblJpFlag").getEl();
                            lblJpFlag.fadeIn({
                            endOpacity: 1,
                            duration: .5,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                    }
                });
                
            }
        });
            
        var showYearsColmn = function(){
            var lblBulle8b = Ext.getCmp("lblBulle8b").getEl();
            lblBulle8b.fadeIn({
                endOpacity: 1,
                duration: .7,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true
            });
            
            (function(){
                var lblBulle8c = Ext.getCmp("lblBulle8c").getEl();
                lblBulle8c.fadeIn({
                    endOpacity: 1,
                    duration: .7,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(500);
            
            (function(){
                var lblBulle8d = Ext.getCmp("lblBulle8d").getEl();
                lblBulle8d.fadeIn({
                    endOpacity: 1,
                    duration: .7,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(800);
            
            (function(){
                var lblBulle8e = Ext.getCmp("lblBulle8e").getEl();
                lblBulle8e.fadeIn({
                    endOpacity: 1,
                    duration: .6,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(1100);
            
            (function(){
                var lblBulle8f = Ext.getCmp("lblBulle8f").getEl();
                lblBulle8f.fadeIn({
                    endOpacity: 1,
                    duration: .5,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                    
                        var lbl01_11 = Ext.getCmp("lbl01_11").getEl();
                        lbl01_11.fadeIn({
                            endOpacity: 1,
                            duration: .4,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                    }
                });
            }).defer(1350);
        }
        
        var showBigColumn = function(){
            var lblBulle7b = Ext.getCmp("lblBulle7b").getEl();
            lblBulle7b.fadeIn({
                endOpacity: 1,
                duration: .7,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true
            });
            
            (function(){
                var lblBulle7c = Ext.getCmp("lblBulle7c").getEl();
                lblBulle7c.fadeIn({
                    endOpacity: 1,
                    duration: .7,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(500);
            
            (function(){
                var lblBulle7d = Ext.getCmp("lblBulle7d").getEl();
                lblBulle7d.fadeIn({
                    endOpacity: 1,
                    duration: .7,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(800);
            
            (function(){
                var lblBulle7e = Ext.getCmp("lblBulle7e").getEl();
                lblBulle7e.fadeIn({
                    endOpacity: 1,
                    duration: .6,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(1100);
            
            (function(){
                var lblBulle7f = Ext.getCmp("lblBulle7f").getEl();
                lblBulle7f.fadeIn({
                    endOpacity: 1,
                    duration: .5,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(1350);
            
            (function(){
                var lblBulle7g = Ext.getCmp("lblBulle7g").getEl();
                lblBulle7g.fadeIn({
                    endOpacity: 1,
                    duration: .4,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(1550);
            
            (function(){
                var lblBulle7h = Ext.getCmp("lblBulle7h").getEl();
                lblBulle7h.fadeIn({
                    endOpacity: 1,
                    duration: .3,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true
                });
            }).defer(1650);
            
            (function(){
                var lblBulle7i = Ext.getCmp("lblBulle7i").getEl();
                lblBulle7i.fadeIn({
                    endOpacity: 1,
                    duration: .3,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                    
                        var lbl10h = Ext.getCmp("lbl10h").getEl();
                        lbl10h.fadeIn({
                            endOpacity: 1,
                            duration: .05,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                    }
                });
            }).defer(1750);
        }
        
        var showLevelA = function(){
            var lblBulle1 = Ext.getCmp("lblBulle1").getEl();
            lblBulle1.fadeIn({
                endOpacity: 1,
                duration: 1,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true,
                callback : function(){
                    
                }
            });
            
            (function(){
                var lblBulle2 = Ext.getCmp("lblBulle2").getEl();
                lblBulle2.fadeIn({
                    endOpacity: 1,
                    duration: 1,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        
                    }
                });
            }).defer(500);
            
            (function(){
                var lblBulle3 = Ext.getCmp("lblBulle3").getEl();
                lblBulle3.fadeIn({
                    endOpacity: 1,
                    duration: 1,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        
                    }
                });
            }).defer(1000);
            
            (function(){
                var lblBulle4a = Ext.getCmp("lblBulle4a").getEl();
                lblBulle4a.fadeIn({
                    endOpacity: 1,
                    duration: 1,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        var lblBulle4b = Ext.getCmp("lblBulle4b").getEl();
                        lblBulle4b.fadeIn({
                            endOpacity: 1,
                            duration: .8,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                    }
                });
            }).defer(1500);
            
            (function(){
                var lblBulle5a = Ext.getCmp("lblBulle5a").getEl();
                lblBulle5a.fadeIn({
                    endOpacity: 1,
                    duration: 1,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        var lblBulle5b = Ext.getCmp("lblBulle5b").getEl();
                        lblBulle5b.fadeIn({
                            endOpacity: 1,
                            duration: .7,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                    }
                });
            }).defer(1900);
            
            (function(){
                var lblBulle6a = Ext.getCmp("lblBulle6a").getEl();
                lblBulle6a.fadeIn({
                    endOpacity: 1,
                    duration: .75,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        
                        var lblBulle6b = Ext.getCmp("lblBulle6b").getEl();
                        lblBulle6b.fadeIn({
                            endOpacity: 1,
                            duration: .6,
                            easing: 'easeIn',
                            useDisplay: false,
                            concurrent : true
                        });
                        
                       (function(){
                            var lblBulle6c = Ext.getCmp("lblBulle6c").getEl();
                            lblBulle6c.fadeIn({
                                endOpacity: 1,
                                duration: .6,
                                easing: 'easeIn',
                                useDisplay: false,
                                concurrent : true,
                                callback : function(){
                                
                                    var lblAnniversary = Ext.getCmp("lblAnniversary").getEl();
                                    lblAnniversary.fadeIn({
                                        endOpacity: 1,
                                        duration: 3,
                                        easing: 'easeIn',
                                        useDisplay: false,
                                        concurrent : true
                                    });
                                }
                            });
                            
                        }).defer(500);
                        
                        (function(){
                            var lblBulle6d = Ext.getCmp("lblBulle6d").getEl();
                            lblBulle6d.fadeIn({
                                endOpacity: 1,
                                duration: .6,
                                easing: 'easeIn',
                                useDisplay: false,
                                concurrent : true
                            });
                            
                        }).defer(700);
                        
                       
                    }
                });
            }).defer(2200);
            
            (function(){
                var lblBulle7a = Ext.getCmp("lblBulle7a").getEl();
                lblBulle7a.fadeIn({
                    endOpacity: 1,
                    duration: .8,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        showBigColumn();
                    }
                });
            }).defer(2500);
            
            (function(){
                var lblBulle8a = Ext.getCmp("lblBulle8a").getEl();
                lblBulle8a.fadeIn({
                    endOpacity: 1,
                    duration: .9,
                    easing: 'easeIn',
                    useDisplay: false,
                    concurrent : true,
                    callback : function(){
                        showYearsColmn();
                    }
                });
            }).defer(2700);
        }
        
        showLevelA();
    }
    
    function startAnimation(){
        if (skipAnimation){
            return;
        }
        
        var hideElements = function(){
            if (skipAnimation){
                return;
            }
            
            var lblQMC = Ext.getCmp("lblQMC").getEl();
            lblQMC.scale(400, 400,{
                x: 370,
                duration: 1.5,
                easing: 'easeOut',
                useDisplay: false,
                concurrent : true
            });
        
            var lblBe3 = Ext.getCmp("lblBe3").getEl();
            lblBe3.fadeOut({
                endOpacity: 0,
                duration: 1,
                easing: 'easeOut',
                useDisplay: false,
                concurrent : true
            });
            
            startAnieveraryAnimation.defer(500);
            
            var lblQMCSamll = Ext.getCmp("lblQMCSamll").getEl();
            lblQMCSamll.fadeOut({
                endOpacity: 0,
                duration: 1.5,
                easing: 'easeOut',
                useDisplay: false,
                concurrent : true
            });
        }
    
        var showQMCSamll = function(){
            if (skipAnimation){
                return;
            }
            
            var lblQMCSamll = Ext.getCmp("lblQMCSamll").getEl();
            lblQMCSamll.fadeIn({
                endOpacity: 1,
                duration: 1,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true,
                callback : function(){
                    
                    hideElements.defer(2500);
                }
            });
        }
    
        var showBe3 = function(){
            if (skipAnimation){
                return;
            }
            
            var lblBe3 = Ext.getCmp("lblBe3").getEl();
            lblBe3.fadeIn({
                endOpacity: 1,
                duration: 1,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true,
                callback : function(){
                    
                    var lblQMC = Ext.getCmp("lblQMC").getEl();
                    lblQMC.fadeIn({
                        endOpacity: 1,
                        duration: 2,
                        easing: 'easeIn',
                        useDisplay: false,
                        concurrent : true,
                        callback : function(){
                            showQMCSamll();
                            
                        }
                    });
                }
            });
        }
        
        var showTeam = function(){
            if (skipAnimation){
                return;
            }
            
            var lblTeam = Ext.getCmp("lblTeam").getEl();
            lblTeam.fadeIn({
                endOpacity: 1,
                duration: 1.5,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true, 
                callback : function(){
                    
                    if (skipAnimation){
                        return;
                    }
                    
                    var lblTeam = Ext.getCmp("lblTeam").getEl();
                    lblTeam.fadeOut({
                        endOpacity: 0,
                        duration: .5,
                        easing: 'easeInOut',
                        useDisplay: false,
                        concurrent : true,
                        callback : function(){
                            
                        }
                    });
                    
                    
                }
            });
            
            showBe3.defer(1000);
        }
        
        var showBe2 = function(){
            if (skipAnimation){
                return;
            }
        
            var lblBe2 = Ext.getCmp("lblBe2").getEl();
            lblBe2.fadeIn({
                x: 110,
                y: 170,
                endOpacity: .75,
                duration: 1,
                useDisplay: false,
                concurrent : true,
                callback : function(){
                
                    if (skipAnimation){
                        return;
                    }
                    showTeam();
                    
                    var lblBe2 = Ext.getCmp("lblBe2").getEl();
                    lblBe2.fadeOut({
                        endOpacity: 0,
                        duration: 1,
                        useDisplay: false,
                        concurrent : true
                    });
                    
                }
            });
        }
        
        var showBetter = function() {
            if (skipAnimation){
                return;
            }
            
            var lblBetter = Ext.getCmp("lblBetter").getEl();
            lblBetter.fadeIn({
                endOpacity : 1,
                duration: 2,
                easing: 'easeIn',
                useDisplay: false,
                concurrent : true,
                callback : function(){
                    
                    if (skipAnimation){
                        return;
                    }
                    /*in parallel, we'll show "Be" after 1 sec timeout*/
                    showBe2.defer(500);
                    
                    var Better = Ext.getCmp("lblBetter").getEl();
                    lblBetter.fadeOut({
                        endOpacity : 0,
                        duration: 1,
                        easing: 'easeOut',
                        useDisplay: false,
                        concurrent : true,
                        callback : function(){
                            
                        }
                    });
                }
            });
        }
        
        /*Animation starts here when showing "Be" in the screen*/
        var lblBe = Ext.getCmp("lblBe").getEl();
        lblBe.scale(330, 330,{
            x: 510,
            y: 170,
            opacity: 0,
            duration: 4,
            easing: 'easeOut',
            useDisplay: false,
            concurrent : true
        });
        
        /*in parallel, we'll show "Better" after 1.5 sec timeout*/
        showBetter.defer(1000);

    }
    
});