<?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;
            private function callTracking():void{
                TrackingManager.trackOmniture("Features");
            }
            
            import com.afi.estimator.model.TextModel;
            import com.afi.estimator.views.View;
            
            [Bindable]private var pageName:String = 'features';
            
            import com.afi.estimator.style.buttons.GreenButton;
            
            [Bindable]private var header_padding:Number = 25;
            
            [Bindable]private var padding:Number = 5;
            
            private function init():void
            {
                View.instance.nextprevious.visible = true;
            }
        ]]>
    </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" paddingBottom="20" /> 
    
    <s:Group>
        <ui:Formbackground width="100%" height="100%" />
        
        <s:VGroup horizontalAlign="center" accessibilityEnabled="false">
            <s:VGroup paddingLeft="{padding}" paddingRight="{padding}" paddingTop="{padding}" paddingBottom="{padding}" 
                      accessibilityEnabled="false">
                <mx:Image source="@Embed('../../assets/images/what-new.png')" accessibilityEnabled="false" />
                
            </s:VGroup>
        </s:VGroup>
        
        <s:VGroup paddingLeft="{header_padding}" paddingRight="{header_padding}" paddingTop="{header_padding}" paddingBottom="{header_padding}"
                  top="0" height="100%" >
            <s:HGroup width="500">
                <mx:Text htmlText="{TextModel.get(pageName).easy}" condenseWhite="true" styleName="capsText" height="100%" paddingRight="0"/>
                <mx:Text maxWidth="500" htmlText="{TextModel.get(pageName).easyText}" condenseWhite="true" styleName="bodyText" height="100%" paddingLeft="-10"/>    
            </s:HGroup>
            
            <mx:Spacer height="4%"/>
            
            <s:HGroup width="500">
                <mx:Text htmlText="{TextModel.get(pageName).hassleFree}" condenseWhite="true" styleName="capsText" height="100%" paddingRight="0"/>
                <mx:Text maxWidth="500" htmlText="{TextModel.get(pageName).hassleFreeText}" condenseWhite="true" styleName="bodyText" height="100%" paddingLeft="-10"/>    
            </s:HGroup>
            
            <mx:Spacer height="4%"/>
            
            <s:HGroup width="500">
                <mx:Text htmlText="{TextModel.get(pageName).flexible}" condenseWhite="true" styleName="capsText" height="100%" paddingRight="0"/>
                <mx:Text maxWidth="420" htmlText="{TextModel.get(pageName).flexibleText}" condenseWhite="true" styleName="bodyText" height="100%" paddingLeft="-10"/>    
            </s:HGroup>
            
            <mx:Spacer height="2%"/>
            
            <s:HGroup width="500">
                <mx:Text htmlText="{TextModel.get(pageName).affordable}" condenseWhite="true" styleName="capsText" height="100%" paddingRight="0"/>
                <mx:Text maxWidth="500" htmlText="{TextModel.get(pageName).affordableText}" condenseWhite="true" styleName="bodyText" height="100%" paddingLeft="-10"/>    
            </s:HGroup>
            
            <!--<s:Label text="{TextModel.get(pageName).easy}"/>-->
            <!--<mx:Text maxWidth="550" condenseWhite="true" styleName="bodyText" height="100%">
                <mx:htmlText>
                    {TextModel.get(pageName).body}
                </mx:htmlText>
            </mx:Text>-->
            <!--<s:HGroup >
                <mx:Text condenseWhite="true" width="70" styleName="capsText">
                    <mx:htmlText>
                        {TextModel.get(pageName).easy}
                    </mx:htmlText>
                </mx:Text>
                <mx:Text htmlText="{TextModel.get(pageName).easyText}" condenseWhite="true" maxWidth="480"/>
            </s:HGroup>-->
            
            <!--<mx:Text maxWidth="550" htmlText="{TextModel.get(pageName).body}" condenseWhite="true" height="100%"/>-->
            
        </s:VGroup>
        
    </s:Group>
    
</ui:TitleForm>