<?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="579" 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">480</fx:Number>
        <fx:Number id="totalWidth">579</fx:Number>
    </fx:Declarations>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        .customAccordionHeadStyles {
            skin: ClassReference("com.afi.estimator.style.ui.CustomAccordionHeaderSkin");
        }
    </fx:Style>

    <fx:Script><![CDATA[
        import com.tracking.TrackingManager;
        
        import com.afi.estimator.model.*;
        
        import mx.containers.VBox;
        import mx.controls.Text;
        import mx.core.IFlexDisplayObject;
        import mx.core.IVisualElement;
        import mx.managers.PopUpManager;
        
        import spark.components.Label;
        
        public var glossary:Object;
        
        public function init():void {
            var self:* = this;
            TextModel.getGlossary(function(glossary:Object):void{
                
                var firstLetter:String;
                
                // Enabled active letters
                for (var i:* in glossary) {
                    if (firstLetter == null) firstLetter = i;
                    
                    if (self['lett'+i]) {
                        self['lett'+i].enabled = true;
                        self['lett'+i].addEventListener(MouseEvent.CLICK, letterClick);
                    }
                }
                
                // Generate Copy Boxes
                self.glossary = glossary;
                openLetter(firstLetter);
                
            });
        }
        
        private function letterClick(event:Event):void {
            openLetter(event.target.label);
        }
        
        private function openLetter(l:String):void {
            // Clear the box
            terms.removeAllElements();
            
            for (var i:* in glossary[l]) {
                var b:VBox = new VBox;
                var name:Label = new Label();
                name.styleName = "glossTitle";
                name.text = glossary[l][i].name;
                
                
                var desc:Text = new Text();
                desc.condenseWhite = true;
                desc.maxWidth = 450;
                desc.htmlText = glossary[l][i].description;
                
                
                b.addChild(name);
                b.addChild(desc);
                terms.addElement(b);
            }
        }

        protected function close():void {
                PopUpManager.removePopUp(this as IFlexDisplayObject);
                dispatchEvent(new Event(Event.CLOSE, true));
        }
    ]]></fx:Script>
    
    <ui:PopupFormbackground width="100%" height="100%" />
    
    <s:VGroup paddingBottom="{padding+20}" paddingLeft="{padding}" paddingRight="{padding}" paddingTop="{padding}">
        
        <s:Label text="Glossary" styleName="popTitle" paddingBottom="13"/>
        
        <s:Group width="453" height="29" >
            <s:Rect top="0" width="100%" height="100%" radiusX="7">
                <s:stroke>
                    <s:SolidColorStroke color="#bbbbbb" />
                </s:stroke>
                
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="#59b8da" />
                        <s:GradientEntry color="#317caa" />
                    </s:LinearGradient>
                </s:fill>    
            </s:Rect>
            <s:HGroup paddingTop="10" paddingLeft="10">
                <s:Button width="10" enabled="false" label="A" id="lettA" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="B" id="lettB" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="C" id="lettC" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="D" id="lettD" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="E" id="lettE" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="F" id="lettF" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="G" id="lettG" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="H" id="lettH" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="I" id="lettI" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="J" id="lettJ" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="K" id="lettK" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="L" id="lettL" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="M" id="lettM" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="N" id="lettN" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="O" id="lettO" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="P" id="lettP" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="Q" id="lettQ" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="R" id="lettR" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="S" id="lettS" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="T" id="lettT" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="U" id="lettU" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="V" id="lettV" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="W" id="lettW" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="X" id="lettX" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="Y" id="lettY" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
                <s:Button width="10" enabled="false" label="Z" id="lettZ" skinClass="com.afi.estimator.style.buttons.GlossButton" buttonMode="true" />
            </s:HGroup>
        </s:Group>
        
        <s:Scroller skinClass="com.afi.estimator.style.scroll.AFIScroller" width="529" height="350" horizontalScrollPolicy="off">
        <s:Group>
            
        
        
        <s:VGroup id="terms" gap="40" paddingTop="15" paddingLeft="10" paddingRight="15">
        
        </s:VGroup>
        
        </s:Group>
        </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>