<?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" 
         xmlns:ui="com.afi.estimator.views.ui.*"
         width="600" height="480" creationComplete="init()">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:Number id="padding">30</fx:Number>
        <fx:Number id="accdWidth">529</fx:Number>
        <fx:Number id="totalWidth">579</fx:Number>
        <s:VerticalLayout id="navVertLayout"
                          paddingLeft="20" paddingRight="20"
                          paddingTop="20" paddingBottom="20" />

    </fx:Declarations>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        .customAccordionHeadStyles {
            skin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkin");
        }
        .customAccordionHeadStylesOff {
            skin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkinOff");
        }
        .accHeader {
            selectedUpSkin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkin");
            selectedOverSkin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkin");
            selectedDownSkin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkin");
            
            downSkin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkinOff");
            upSkin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkinOff");
            overSkin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkinOff");
        }
    </fx:Style>

    <fx:Script><![CDATA[
        import com.tracking.TrackingManager;
        
        import com.afi.estimator.model.*;
        
        import mx.containers.VBox;
        import mx.controls.Button;
        import mx.controls.Text;
        import mx.core.IFlexDisplayObject;
        import mx.core.IVisualElement;
        import mx.events.IndexChangedEvent;
        import mx.managers.PopUpManager;
        
        import spark.components.Label;
        import spark.components.NavigatorContent;
        import spark.layouts.supportClasses.LayoutBase;
        
        private var accLen:Number = 0;
        
        public function init():void {
            TextModel.getFaq(function(faq:Object):void{
                accLen = 0;
                for (var i:* in faq) { 
                    var vbox:NavigatorContent = new NavigatorContent();
                    vbox.label = i;
                    var layout:VerticalLayout = new VerticalLayout();
                    layout.paddingTop = layout.paddingLeft = 10;
                    vbox.layout = layout;

                    var l:Text = new Text();
                    l.selectable = false;
                    l.maxWidth = 325;
                    l.htmlText = faq[i];
                    vbox.addElement(l);

                    faqAcc.addChild(vbox);
                    accLen++;
                }
                
                setSelectedHeader()
            });
        }
        
        private function setSelectedHeader(yes:Boolean = true):void
        {
           // var i:int = 0;
            for(var i:int = 0; i<accLen; i++) {
                var header:Button = faqAcc.getHeaderAt(i);
                header.setStyle('color', 0x777777);    
                header.mouseEnabled = true;
            }
            faqAcc.getHeaderAt(faqAcc.selectedIndex).setStyle('color', 0xFFFFFF);
            faqAcc.getHeaderAt(faqAcc.selectedIndex).mouseEnabled = false
            
        }

        protected function close():void {
                PopUpManager.removePopUp(this as IFlexDisplayObject);
                dispatchEvent(new Event(Event.CLOSE, true));
        }
        

        protected function faqAcc_changeHandler(event:IndexChangedEvent):void {
            setSelectedHeader();
        }



    ]]></fx:Script>
    
    <ui:PopupFormbackground width="100%" height="100%" />
    
    <s:VGroup horizontalAlign="center" paddingBottom="{padding}" paddingLeft="{padding}" paddingRight="{padding}" paddingTop="{padding}">
        
        <s:Scroller skinClass="com.afi.estimator.style.scroll.AFIScroller" width="529" height="420" horizontalScrollPolicy="off">
            
            <s:VGroup height="420">
            <mx:Accordion id='faqAcc' width="{accdWidth}" height="420" headerStyleName="accHeader" 
                          headerRenderer="com.afi.estimator.style.ui.AccordionHeaderRendererOff" change="faqAcc_changeHandler(event)"
                          borderAlpha="0" contentBackgroundAlpha="0"> 
             
            </mx:Accordion>    
            </s:VGroup>
            
        </s:Scroller>
        
    </s:VGroup>

    <mx:Image id="closeBTN" source="@Embed(source='/com/afi/estimator/assets/images/close-button.png')" buttonMode="true" useHandCursor="true"
                        x="{totalWidth-padding}" y="-12" click="close()"/>

</s:Group>