<?xml version="1.0" encoding="utf-8"?>
<ui:TitleForm xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                xmlns:form="com.afi.estimator.views.form.*" 
                xmlns:ui="com.afi.estimator.views.ui.*" 
                creationComplete="init()" addedToStage="callTracking()">
    <fx:Script>
        <![CDATA[
            import com.tracking.TrackingManager;
            import spark.filters.DisplacementMapFilter;
            import com.afi.estimator.model.TextModel;
            import com.afi.estimator.style.buttons.GreenButton;
            import com.afi.estimator.views.paging.FormScroller;
            import com.afi.estimator.views.View;
            import flash.filters.DisplacementMapFilter;
            import mx.managers.PopUpManager;
            
            [Bindable]private var pageName:String = 'welcome';
            
            [Bindable]private var padding:Number = 20;
            
            private var xPosition:int = 0;
            private var view:View;
            
            private function callTracking():void{
                TrackingManager.trackOmniture("Welcome");
            }
            
            private function onAdd():void
            {
                TrackingManager.trackOmniture("Welcome");
            } 
            
            private function init():void
            {
                silent = new AccessibilityProperties();
                silent.silent = true;
                View.instance.nextprevious.visible = false;
                var ac:AccessibilityProperties = new AccessibilityProperties();
                ac.description = TextModel.get(pageName).body;
                
                view = this.parentApplication.getElementAt(0) as View;
                //cloudMoveEffect();
                
                view.backgrnd.cloudsMoveEffect.stop();
                /* view.backgrnd.cloudsMoveEffect.xFrom = xPosition;
                xPosition = xPosition - 100;
                view.backgrnd.cloudsMoveEffect.xTo = xPosition;
                view.backgrnd.cloudsMoveEffect.duration =15000; */
                //view.backgrnd.cloudsMoveEffect.repeatCount = 0;
                //view.backgrnd.cloudsMoveEffect.
                //view.backgrnd.cloudsMoveEffect.play(); 
            }
            
            private function cloudMoveEffect():void{
                var bm:BitmapData=new BitmapData(view.backgrnd.sky.width, view.backgrnd.sky.height);
                var disp:flash.filters.DisplacementMapFilter = new flash.filters.DisplacementMapFilter(bm,new Point(0,0),0,0,10,1);
                var pt1:Point = new Point(0,0);
                var pt2:Point = new Point(0,0);
                var perlinOffset:Array = [pt1, pt2];
                
                addEventListener(Event.ENTER_FRAME, onFrame);
                function onFrame(evt:Event):void {
                    perlinOffset[0].x +=1;
                    perlinOffset[1].y +=0.1;
                    bm.perlinNoise(20,10,1,99,true,false, 7,false,perlinOffset);
                    view.backgrnd.sky.filters=[disp];
                }
                /* perlinOffsetFall[0].y -=1;
                perlinOffsetFall[1].x -=0.1;
                
                bm2.perlinNoise(perlinOffsetFall);
                waterfall.filters=[disp2] */


            }
            
            [Bindable]private var silent:AccessibilityProperties;
            
            [Bindable]private var tabindex:uint = 0;
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:VerticalLayout />
    </fx:Declarations>

    <s:Label id="formTitle" text="{TextModel.get(pageName).title}" styleName="formTitle" tabIndex="0" paddingTop="-45"/>
    <s:Label id="subTitle" text="{TextModel.get(pageName).subtitle}" styleName="subTitle" paddingBottom="20" tabIndex="0"/>
    
    <s:Group width="525" height="100%">
            <ui:Formbackground width="100%" height="100%" accessibilityEnabled="false" />
                <!--<s:VGroup width="425" horizontalAlign="center" top="-33" accessibilityEnabled="false">
                    <mx:Image source="@Embed('/com/afi/estimator/assets/images/safe-welcome.png')" 
                              tabEnabled="false" focusEnabled="false" 
                              accessibilityEnabled="false" />    
                </s:VGroup>-->

        <s:VGroup width="525" horizontalAlign="center" top="10">
             
            <s:VGroup paddingLeft="{padding}" 
                      paddingRight="{padding}" 
                      paddingTop="{padding-10}"
                      paddingBottom="{padding}">
                
                <mx:Text maxWidth="435" htmlText="{TextModel.get(pageName).body}" tabIndex="1" tabChildren="false" tabFocusEnabled="true" 
                         accessibilityName="Welcome" accessibilityEnabled="true" condenseWhite="true" />
                
                <s:HGroup width="100%" verticalAlign="middle" horizontalAlign="center" paddingTop="20" paddingBottom="10">
                    
                    <s:Button label="{TextModel.get(pageName).startButton}" tabIndex="3"
                              skinClass="com.afi.estimator.style.buttons.GreenButton" buttonMode="true"
                              click="FormScroller.instance.next()"/>
                    
                    <!--<s:Label text="{TextModel.get(pageName).or}" fontFamily="allerBold" color="#3a6991" tabIndex="4" paddingLeft="5" paddingRight="5"/>-->
                    
                    <!--<s:Button label="{TextModel.get(pageName).skipButton}" tabIndex="5"
                              skinClass="com.afi.estimator.style.buttons.GrayButton" buttonMode="true"
                              click="FormScroller.instance.gotoPage('calculate')" />-->
                    
                </s:HGroup>
                
                <mx:Text maxWidth="435" htmlText="{TextModel.get(pageName).lastText}" tabChildren="false" tabFocusEnabled="true" 
                         accessibilityName="Welcome" accessibilityEnabled="true" condenseWhite="true" />
                
            </s:VGroup>
                
        </s:VGroup>
        
    </s:Group>
</ui:TitleForm>