<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="612" height="792" xmlns:ui="com.afi.estimator.views.ui.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:Number id="tblPadding">14</fx:Number>
        <fx:Number id="tblFontSize">15</fx:Number>
        <fx:Number id="accuBalSize">34</fx:Number>
        
        <fx:Number id="accuBal">
            9999999.99
        </fx:Number>
        <fx:Number id="annualPayout">15890.92</fx:Number>
        <mx:CurrencyFormatter id="cur" currencySymbol="$" rounding="none" precision="2" useThousandsSeparator="true" />
        <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY"/>
    </fx:Declarations>
    
    <fx:Script><![CDATA[
        //import com.afi.estimator.model.AnnuityModel;
        import com.afi.estimator.model.TextModel;
        //import com.afi.estimator.views.vo.AnnuityVO;
        
        /* [Bindable]
        public var vo:AnnuityVO = AnnuityModel.instance.annuity_vo; */
        
        private var pageName:String = 'print';
        
        public function init():void {
            var test_len:String = String(accuBal);
            
            if (test_len.length > 10) {
                accuBalSize = 24;
            }
        }
    ]]></fx:Script>
    
    
    
    <s:VGroup width="612" paddingTop="10">
        
        
        <s:Group id="header">
            <s:HGroup gap="75" width="612" horizontalAlign="center" paddingBottom="10">
                <s:VGroup gap="2">
                    <mx:Image source="@Embed('/com/afi/estimator/assets/images/AFI-logo.png')" />
                    <s:Label fontSize="10" fontWeight="bold">{TextModel.get(pageName).questions}</s:Label>
                    <s:Label fontSize="10">{TextModel.get(pageName).phoneNumber}</s:Label>
                </s:VGroup>
                
                <s:VGroup width="200" textAlign="center" horizontalAlign="center">
                    <s:Label fontSize="31" styleName="formTitle" color="0">{TextModel.get(pageName).annuitiesResults}</s:Label>
                </s:VGroup>
                
                <s:Label width="100">{dateFormatter.format(new Date())}</s:Label>
            </s:HGroup>
        </s:Group>
        
        
        <s:VGroup gap="0" width="590" paddingLeft="15">
            <s:Group height="35" width="100%">
                <s:Rect width="100%" height="100%" top="0" topRightRadiusX="5" topLeftRadiusX="5">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="#A1D403" />
                            <s:GradientEntry color="#568C00" />
                        </s:LinearGradient>    
                    </s:fill>
                </s:Rect>
                <s:VGroup height="20" paddingBottom="{tblPadding}" paddingLeft="{tblPadding}" paddingRight="{tblPadding}" paddingTop="{tblPadding}">
                    <s:Label fontSize="15" color="#FFFFFF">{TextModel.get(pageName).yourAnnuity}</s:Label>
                </s:VGroup>
            </s:Group>
            
            <s:Group height="100%" width="100%">
                
                <s:Rect width="100%" height="100%">
                    <s:stroke>
                        <s:SolidColorStroke weight="1" color="#EEEEEE" />
                    </s:stroke>
                </s:Rect>
                
                <s:VGroup gap="10" paddingBottom="{tblPadding}" paddingLeft="{tblPadding}" paddingRight="{tblPadding}" paddingTop="{tblPadding}">
                    <s:HGroup>
                        <s:Label width="150">Age</s:Label>
                        <s:Label></s:Label>
                    </s:HGroup>
                    
                    <s:HGroup>
                        <s:Label width="150">Initial Premium</s:Label>
                        <s:Label></s:Label>
                    </s:HGroup>
                    
                    <s:HGroup>
                        <s:Label width="150">Annual Premium</s:Label>
                        <s:Label></s:Label>
                    </s:HGroup>
                    
                    <s:HGroup>
                        <s:Label width="150">Retirement Age</s:Label>
                        <s:Label></s:Label>
                    </s:HGroup>
                </s:VGroup>
            </s:Group>
            
        </s:VGroup>
        
        <s:HGroup paddingLeft="15" paddingTop="20" gap="0">
            <s:Group width="151" height="69">
                <s:Rect top="0" width="100%" height="100%" topLeftRadiusX="5" bottomLeftRadiusX="5">
                    <s:fill>
                        <s:LinearGradient>
                            <s:GradientEntry color="#2C6BA0" />
                            <s:GradientEntry color="#418AC4" />
                         </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                <s:VGroup paddingTop="10" gap="3" paddingLeft="10" verticalAlign="middle">
                    <s:Label fontSize="15" color="#FFFFFF">{TextModel.get(pageName).final}</s:Label>
                    <s:Label fontSize="20" color="#FFFFFF">{TextModel.get(pageName).balance}</s:Label>
                    <s:Label fontSize="15" color="#FFFFFF">{TextModel.get(pageName).atage}</s:Label>
                </s:VGroup>
            </s:Group>
            
            <s:Group width="426" height="70">
                <s:Rect width="100%" height="100%" topRightRadiusX="5" bottomRightRadiusX="10">
                    <s:stroke>
                        <s:SolidColorStroke weight="1" color="#EEEEEE" />
                    </s:stroke>
                </s:Rect>
                <s:HGroup height="100%" width="100%" paddingLeft="10">
                    <s:VGroup height="100%" width="100%" verticalAlign="middle"><s:Label width="220" fontSize="{accuBalSize}" color="#87BB00">{cur.format(accuBal)}</s:Label></s:VGroup>
                    <s:VGroup height="100%" width="100%" verticalAlign="middle"><s:Label width="170">{TextModel.get(pageName).basedOn}</s:Label></s:VGroup>
                </s:HGroup>
            </s:Group>
        </s:HGroup>
        
        <s:HGroup paddingLeft="15" gap="0">
            <s:Group width="151" height="69">
                <s:Rect top="0" width="100%" height="100%" topLeftRadiusX="5" bottomLeftRadiusX="5">
                    <s:fill>
                        <s:LinearGradient>
                            <s:GradientEntry color="#2C6BA0" />
                            <s:GradientEntry color="#418AC4" />
                         </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                <s:VGroup paddingTop="10" paddingLeft="10" verticalAlign="middle">
                    <s:Label fontSize="19" color="#FFFFFF">{TextModel.get(pageName).annualPayout}</s:Label>
                    <s:Label fontSize="17" color="#FFFFFF">{TextModel.get(pageName).foreyears}</s:Label>
                </s:VGroup>
            </s:Group>
            
            <s:Group width="426" height="70">
                <s:Rect width="100%" height="100%" topRightRadiusX="5" bottomRightRadiusX="10">
                    <s:stroke>
                        <s:SolidColorStroke weight="1" color="#EEEEEE" />
                    </s:stroke>
                </s:Rect>
                <s:HGroup height="100%" width="100%" paddingLeft="10">
                    <s:VGroup height="100%" width="100%" verticalAlign="middle"><s:Label width="220" fontSize="34">{cur.format(annualPayout)}</s:Label></s:VGroup>
                    <s:VGroup height="100%" width="100%" verticalAlign="middle"><s:Label width="170" text="{TextModel.get(pageName).payoutPeriod}" /></s:VGroup>
                </s:HGroup>
            </s:Group>
        </s:HGroup>

    </s:VGroup>
</s:Group>