<?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:esri="http://www.esri.com/2008/ags"
               xmlns:layers="com.esri.ags.layers.*"
               xmlns:ml="com.MapLarge.*"
               pageTitle="MapLarge.com API - ArcGIS Flex API Example"  viewSourceURL="srcview/index.html">
    
    <fx:Script>
        <![CDATA[
            import com.MapLarge.MapLargeHoverGrid;
            import com.MapLarge.MapLargeHoverGridGEO;
            import com.MapLarge.MapLargeUTIL;
            import com.esri.ags.SpatialReference;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.utils.WebMercatorUtil;
            
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.utils.ObjectProxy;
            
            import org.osmf.layout.AbsoluteLayoutFacet;

            //http://0api.maplarge.com/Tile/Tile?layer=geo~poly~BlockGroup|data~AllGeocodedFinal~DonationCode~sum&x=4&y=5&z=4&filter=&shader=method~interval|colors~DarkBlue-200/Blue-128,Blue-128/White-128,White-128/Red-128,Red-128/DarkRed-200|ranges~-20000/-5000,-5000/0,0/5000,5000/20000
            
            //try counties
            //[Bindable] private var layer:String="geo~poly~Counties|data~AllGeocodedFinal~DonationCode~sum";
            //[Bindable] private var shader:String="method~interval|count~100|colors~DarkBlue-200/Blue-128,Blue-128/White-128,White-128/Red-128,Red-128/DarkRed-200|ranges~-1000000/-20000,-20000/0,0/20000,20000/1000000";
            
            [Bindable]private var layer:String="geo~poly~BlockGroup|data~AllGeocodedFinal~DonationCode~sum";
            [Bindable]private var filter:String="";
            [Bindable]private var shader:String="method~interval|count~100|colors~DarkBlue-200/Blue-128,Blue-128/White-128,White-128/Red-128,Red-128/DarkRed-200|ranges~-1000000/-20000,-20000/0,0/20000,20000/1000000";
            
            [Bindable]private var hoverFields:String="NAME,DonationCode~sum,Amount~sum";
            private var grid:MapLargeHoverGrid;
            public function onMapCreationComplete(event:Event):void
            {
                //I precer to set the location with lat lng because its more intuitive
                var ext:Extent = new Extent(-85,33,-84,34,new SpatialReference(4326));
                ext = WebMercatorUtil.geographicToWebMercator(ext) as Extent;
                myMap.extent = ext;
                grid = new MapLargeHoverGrid(myMap,myGraphicsLayer,layer,shader,hoverFields, filter,click,hover,list,10);
            }
            
            public function click(data:Object,mapPoint:MapPoint):String{
                content.county = MapLargeUTIL.toTitleCase(data.data.NAME);
                content.totalDonations = data.subTotals.Amount.sum;
                content.donationCode = data.subTotals.DonationCode.sum;
                content.inc = data.data.inc;
                content.pop = data.data["pop"]; //as3 bug "pop" is also an array function
                content.age = data.data.age;
                content.ownRatio = data.data.ownRatio;
                content.popGrowth = data.data.popGrowth;
                content.titleColor = MapLargeUTIL.combineRGB(data.r,data.g,data.b);
                
                myMap.infoWindow.show(mapPoint);
                
                return data.toString();
            }
            
            public function hover(data:Object,geo:MapLargeHoverGridGEO):String
            {
                var donationCode:Number = data["DonationCode~sum"];
                var party:String = "Republicans Win By: ";
                if(donationCode < 0) party = "Democrats Win By: ";
                donationCode = Math.abs(donationCode);
                var donation:String = MapLargeUTIL.formatNumber(donationCode,0);
                return  MapLargeUTIL.toTitleCase(data.NAME) + " County - " + party + " $ " +donation;
            }
            
        
            [Bindable]private var listData:ArrayCollection = new ArrayCollection();
            public function list(data:Array,ext:Extent):void{
                var l:Array = new Array();
                var rows:Array = data.rows as Array;
                var max:int = rows.length;
                var row:Object;
                for(var i:int =0; i< max; i++){
                    row = rows[i]; //set a break point here to see the data
                    var o:ObjectProxy = new ObjectProxy();
                    o.data = row;
                    o.county = MapLargeUTIL.toTitleCase(row.data.NAME);
                    o.totalDonations = row.subTotals.Amount.sum;
                    o.codeSum = row.subTotals.DonationCode.sum; //margin ov victory Neg = dem Pos = rep
                    o.lat = row.lat;
                    o.lng = row.lng;
                    o.age = row.data.age;
                    o.pop = row.data.pop;
                    o.inc = row.data.inc;
                    o.clickFunc = row.clickFunc;
                    o.titleColor = MapLargeUTIL.combineRGB(row.r,row.g,row.b);
                    
                    l.push(o);

                }
                listData = new ArrayCollection(l);
                
            }
            
        ]]>
    </fx:Script>
    <s:HGroup height="100%" width="100%" x="252">
        <esri:Map id="myMap"  creationComplete="onMapCreationComplete(event)">


            
            <esri:infoWindowContent >
                <ml:InfoWindowSimple id="content"/>
            </esri:infoWindowContent>
            
            <esri:ArcGISTiledMapServiceLayer id="tiles"
                                             url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
            
            <ml:MapLargeTileLayer visible="true" 
                                  layer="{layer}"
                                  filter="{filter}"
                                  shader="{shader}"
                                  fadeInFrameCount="0"
                                  
                                  />            
            
            <esri:GraphicsLayer id="myGraphicsLayer" />
        </esri:Map>

    </s:HGroup>
    <s:List x="0" y="0" width="244" height="762" itemRenderer="MapLargeListItem" dataProvider="{listData}">
        
    </s:List>
</s:Application>