<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    minWidth="1024" minHeight="768" xmlns:local="*"
    backgroundColor="0xfafafa"
    frameRate="99"
     creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                this.currentState = "normal";
            }

        ]]>
    </fx:Script>
    
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <s:states>
        <s:State name="loaded" />
        <s:State name="normal" />
    </s:states>
    
    <s:transitions>
        <s:Transition>
            <s:Fade duration="500" startDelay="250" target="{rootContainer}" />
        </s:Transition>
    </s:transitions>
    
    <fx:Style source="ratings.css" />
    
    <s:VGroup id="rootContainer" horizontalCenter="0" verticalCenter="0" alpha="0" alpha.normal="1" >
        <s:SimpleText fontSize="18" text="City-Rating" width="100%" height="25" textAlign="center" />
        <s:SimpleText text="Bern, Switzerland" width="100%" height="20" textAlign="center" />
        <s:Group>
            <s:Rect radiusX="5" radiusY="5" top="1" right="1" bottom="1" left="1">
            <s:fill>
                <s:SolidColor color="0xffffff" />
            </s:fill>
                <s:stroke>
                    <mx:SolidColorStroke weight="1" color="0xe0e0e0" />
                </s:stroke>
            </s:Rect>
            <s:HGroup top="15" right="20" bottom="15" left="20" >
                <s:VGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent  styleName="medicareRating" rating="75"  />
                        <s:SimpleText    height="100%" verticalAlign="middle" text="Medicare"  />
                    </s:HGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="environmentRating" rating="65" />
                        <s:SimpleText  height="100%" verticalAlign="middle" text="Environment"  />
                    </s:HGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="economyRating" rating="33" />
                        <s:SimpleText  height="100%" verticalAlign="middle" text="Economy"  />
                    </s:HGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="safetyRating" rating="81" />
                        <s:SimpleText  height="100%" verticalAlign="middle" text="Safety"  />
                    </s:HGroup>
                </s:VGroup>
                <s:VGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="transportationRating" rating="42" />
                        <s:SimpleText   height="100%" verticalAlign="middle" text="Transportation"  />
                    </s:HGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="cultureRating" rating="51" />
                        <s:SimpleText  height="100%" verticalAlign="middle" text="Culture"  />
                    </s:HGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="educationRating" rating="77" />
                        <s:SimpleText  height="100%" verticalAlign="middle" text="Education"  />
                    </s:HGroup>
                    <s:HGroup gap="4">
                        <local:AHPopUpRatingComponent styleName="administrationRating" rating="82" />
                        <s:SimpleText  height="100%" verticalAlign="middle" text="Administration"  />
                    </s:HGroup>
                </s:VGroup>
            </s:HGroup>
        </s:Group>
        <s:SimpleText fontSize="11" paddingTop="5" text="Hover the mouse over an icon and click'n drag to adjust the ratings" width="100%" height="20" textAlign="center" />
    </s:VGroup>
    
    
    
</s:Application>