<?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="1024" 
         height="103" 
         accessibilityEnabled="false"
         xmlns:ui="com.afi.estimator.views.ui.*" 
         creationComplete="creationComplete()">
    
    <fx:Script>
        <![CDATA[
            import com.afi.estimator.model.TextModel;
            import com.afi.estimator.views.ui.FooterItem;
            
            import mx.events.StateChangeEvent;
            
            public var current:FooterItem;
            public var pageName:String = "footer";
            
            public function clicked(e:Event):void {
                var item:com.afi.estimator.views.ui.FooterItem = com.afi.estimator.views.ui.FooterItem(e.target);
                item.active = true;
                item.init();
                
                if (current) {
                    current.active = false;
                    current.init();
                }
                current = item;
            }
            
            private function creationComplete():void
            {
                this.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, onStateChange);
            }
            
            private function onStateChange(e:StateChangeEvent):void
            {
                switch(e.newState) {
                    case 'education':
                        education.currentState = 'on';
                        calculator.currentState = 'off';
                        results.currentState = 'off';
                        send.currentState = 'off';
                        break;
                    case 'calculate':
                        education.currentState = 'off';
                        calculator.currentState = 'on';
                        results.currentState = 'off';
                        send.currentState = 'off';
                        break;
                    case 'results':
                        education.currentState = 'off';
                        calculator.currentState = 'off';
                        results.currentState = 'on';
                        send.currentState = 'off';
                        break;
                    case 'send':
                        education.currentState = 'off';
                        calculator.currentState = 'off';
                        results.currentState = 'off';
                        send.currentState = 'on';
                        break;
                }
            }
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="welcome" />
        <s:State name="education" />
        <s:State name="calculate" />
        <s:State name="results" />
        <s:State name="send" />
    </s:states>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <mx:Image id="bgImage" source="@Embed(source='../../assets/images/footer.png')" top="0" />
        <s:Rect top="73" height="30" width="100%">
            <s:fill>
                <s:SolidColor color="#ECECEC" />
            </s:fill>
        </s:Rect>
        <s:Label top="39" left="170">{TextModel.get(pageName).title}</s:Label>
        <s:HGroup top="30" left="300" width="588" gap="1">
            <ui:FooterItem id="education" label="{TextModel.get(pageName).step1}" roundLeft="true"/>
            <ui:FooterItem id="calculator" label="{TextModel.get(pageName).step2}"  />
            <ui:FooterItem id="results" label="{TextModel.get(pageName).step3}"  />
            <ui:FooterItem id="send" label="{TextModel.get(pageName).step4}" roundRight="true" />
        </s:HGroup>
    <s:HGroup top="75" width="100%" horizontalAlign="center" gap="20">
        <s:Label color="#777777" fontSize="10" text="{TextModel.get(pageName).weblife}" />
        <s:Label color="#777777" fontSize="10" text="{TextModel.get(pageName).contact}" />
        <s:Label color="#777777" fontSize="10" text="{TextModel.get(pageName).policyForm}" />
    </s:HGroup>
</s:Group>