<?xml version="1.0"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:leaderboard="components.leaderboard.*" title="The World" initialize="init()">

    <fx:Script><![CDATA[
        import classes.GoogleMapsStaticAPI;
        import classes.globals;

        import components.BackButtonGrey;

        import mx.collections.ArrayCollection;

        import mx.graphics.SolidColor;

        import mx.graphics.SolidColorStroke;

        import services.UserService;

        [Bindable]
        private var PERCENTAGE_COUNTRIES_VISITED=0;

        [Bindable]
        private var COUNTRIES_VISITED=0;
        [Bindable]
        private var AFRICA_VISITED=0;
        [Bindable]
        private var EUROPE_VISITED=0;

        private var africaArray:ArrayCollection = new ArrayCollection();
        private var asiaArray:ArrayCollection = new ArrayCollection();
        private var europeArray:ArrayCollection = new ArrayCollection();
        private var northAmericaArray:ArrayCollection = new ArrayCollection();
        private var southAmericaArray:ArrayCollection = new ArrayCollection();
        private var australiaArray:ArrayCollection = new ArrayCollection();
        private var antarcticaArray:ArrayCollection = new ArrayCollection();
        private var restArray:ArrayCollection = new ArrayCollection();



        private function init():void {
            var u:UserService = new UserService();
            u.getVisitedCountries(globals.MY_USER.id, processVisitedCountries);
        }

        private function processVisitedCountries(result:Object)
        {
            if(result.markers)
            {
                var mapUrl:String = GoogleMapsStaticAPI.instance.getMapWithStyleForProfile(mapImage.width, mapImage.height, 30,0,1)+result.markers;
                trace(mapUrl);

                mapImage.source = mapUrl;
            }
            if(result)
            {
                COUNTRIES_VISITED = result.visitedCount;
                PERCENTAGE_COUNTRIES_VISITED = ((result.visitedCount*100)/255).toPrecision(1);

                for each (var item in result.data){
                    switch (item.continent) {
                        case '1':
                            africaArray.addItem(item);
                            break;
                        case '2':
                            asiaArray.addItem(item);
                            break;
                        case '3':
                            europeArray.addItem(item);
                            break;
                        case '4':
                                northAmericaArray.addItem(item);
                            break;
                        case '5':
                                southAmericaArray.addItem(item);
                            break;
                        case '6':
                                australiaArray.addItem(item);
                            break;
                        case '7':
                                antarcticaArray.addItem(item);
                            break;
                        case '8':
                                restArray.addItem(item);
                            break;
                    }

                }

                africaCard.countriesVisited = africaArray.length;
                asiaCard.countriesVisited = asiaArray.length;
                europeCard.countriesVisited = europeArray.length;
                northAmericaCard.countriesVisited = northAmericaArray.length;
                southAmericaCard.countriesVisited = southAmericaArray.length;
                australiaCard.countriesVisited = australiaArray.length;
                antarcticaCard.countriesVisited = antarcticaArray.length;
                restCard.countriesVisited = restArray.length;
            }

            //TODO - Navigate to details list with search for countries and allow user to remove visited countries


        }

        ]]></fx:Script>

    <s:navigationContent>
        <s:Button icon="{new BackButtonGrey()}" click="navigator.popView()"/>
    </s:navigationContent>

    <s:Scroller width="100%" height="100%">
        <s:VGroup width="100%" gap="0">
            <s:Group width="100%" height="425">
                <!--<s:Rect width="100%" height="100%" fill="{new SolidColor(0xb6b6b6,1)}" />-->
                <s:BusyIndicator horizontalCenter="0" verticalCenter="0"/>
                <s:Image id="mapImage" width="100%" height="425" scaleMode="letterbox" smooth="true"  />

            </s:Group>

            <s:Group width="100%" height="120">
               <!-- <s:Rect width="100%" height="100%" fill="{new SolidColor(0xe5e5e5,1)}" />-->
                <s:HGroup width="100%" height="100%" gap="25" verticalAlign="middle" paddingLeft="15" >
                    <s:BorderContainer width="60" height="60" borderAlpha="0" backgroundColor="#00AEEF" backgroundAlpha="0.15" cornerRadius="12">
                        <s:RichText width="100%" textAlign="center" horizontalCenter="0" verticalCenter="0">
                            <s:content>
                                <s:span fontSize="20" fontFamily="Montserrat-SemiBoldCFF" color="#00AEEF" >{PERCENTAGE_COUNTRIES_VISITED}</s:span><s:span fontSize="15" fontFamily="Montserrat-RegularCFF" color="#00AEEF" >%</s:span>
                            </s:content>
                        </s:RichText>
                    </s:BorderContainer>

                    <s:VGroup >
                        <s:Label text="You explored {COUNTRIES_VISITED} countries" color="#C5CFDA" />
                        <s:Label text="bar goes here" />
                    </s:VGroup>


                </s:HGroup>

                <s:Line bottom="0" width="90%" horizontalCenter="0" stroke="{new SolidColorStroke(0xEBEBEB,1)}"/>
            </s:Group>

            <leaderboard:CountriesVisitedCard id="africaCard" continentIcon="assets/640/africa.png" countryName="Africa"
                                              totalCountries="54"/>

            <leaderboard:CountriesVisitedCard id="asiaCard" continentIcon="assets/640/asia.png" countryName="Asia"
                                              totalCountries="48"/>

            <leaderboard:CountriesVisitedCard id="europeCard" continentIcon="assets/640/Europe.png" countryName="Europe"
                                              totalCountries="44"/>

            <leaderboard:CountriesVisitedCard id="northAmericaCard" continentIcon="assets/640/north_america.png"
                                              countryName="North America" totalCountries="23"/>

            <leaderboard:CountriesVisitedCard id="southAmericaCard" continentIcon="assets/640/south_america.png"
                                              countryName="South America" totalCountries="14"/>

            <leaderboard:CountriesVisitedCard id="australiaCard" continentIcon="assets/640/australia.png"
                                              countryName="Australia" totalCountries="3
"/>

            <leaderboard:CountriesVisitedCard id="antarcticaCard" continentIcon="assets/640/antarctica.png"
                                              countryName="Antarctica" totalCountries="1"/>

            <leaderboard:CountriesVisitedCard id="restCard" continentIcon="assets/640/rest.png" countryName="Rest of World"
                                              totalCountries="1"/>
        </s:VGroup>
    </s:Scroller>
</s:View>