<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:code="http://code.google.com/p/flexlib/"
    xmlns:playfairCharts="com.dougmccune.playfairCharts.*"
    
    width="800" height="500" backgroundGradientColors="{[0xFFFFFF,0xFFFFFF]}"
    
    creationComplete="loadData()" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import com.dougmccune.data.parser.ChunkedCSVLoader;
            import com.dougmccune.data.parser.ImportExportParser;
            import com.shortybmc.data.parser.CSV;
            
            import flash.events.Event;
            import flash.net.URLRequest;
            
            import mx.collections.ArrayCollection;
            import mx.controls.ProgressBarMode;
            import mx.utils.StringUtil;
            
            private function loadData():void {
                var csv:CSV = new ChunkedCSVLoader(new URLRequest("all_import_export_country.csv"));
                csv.recordsetDelimiter = "\n";
                csv.addEventListener(Event.COMPLETE, csv_completeHandler);
                
                pBar.source = csv;
                pBar.mode = ProgressBarMode.EVENT;
            }
            
            private function csv_completeHandler(event:Event):void {
                var csv:CSV = event.target as CSV;
                
                var parser:ImportExportParser = new ImportExportParser();
                parser.addEventListener(Event.COMPLETE, parser_completeHandler);
                
                pBar.source = parser;
                pBar.label = "Parsing Data (Step 2 of 2)";
                
                parser.parse(csv.data);
            }
            
            private function parser_completeHandler(event:Event):void {
                var parser:ImportExportParser = event.target as ImportExportParser;
                
                var countries:Array = parser.countries;
                countries.sortOn("country");
                
                dataProvider = new ArrayCollection(countries);
                dataProvider.filterFunction = filterBySearch;
                
                list.selectedIndex = 0;
                
                content.visible = true;
                pBar.visible = false;
            }
            
            [Bindable]
            private var dataProvider:ArrayCollection;
            
            private function filterBySearch(item:Object, ...args):Boolean {
                if(searchInput && searchInput.text != "") {
                    var txt:String = StringUtil.trim(searchInput.text);
                    return String(item.country).toLowerCase().indexOf(txt.toLocaleLowerCase()) == 0;
                }
                else {
                    return true;
                }
            }
            
            protected function searchInput_changeHandler(event:Event):void
            {
                dataProvider.refresh();
                
                if(dataProvider.length == 1) {
                    chart.dataProvider = dataProvider[0].data;
                    chart.country = dataProvider[0].country;
                }
            }
            
            [Bindable]public var bgColor:uint = 0xF8E5BD;
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        
        @font-face {
            src: local("Times");
            fontFamily: embeddedTimes;
            advancedAntiAliasing: true;
            fontWeight: bold;
        }
        
        @font-face {
            src: url("assets/Maranallo.ttf");
            fontFamily: engraved;
            advancedAntiAliasing: true;
        }
        
        @font-face {
            src: url("assets/MaranalloItalic.ttf");
            fontFamily: engravedItalic;
            advancedAntiAliasing: true;
        }
        
        @font-face {
            src: url("assets/chancur.ttf");
            fontFamily: hand;
            advancedAntiAliasing: true;
            font-style:italic;
            
            unicodeRange:
                U+0030-U+0039, /* Numbers [0..9] */
                U+002E-U+002E, /* Period [.] */
                U+002C-U+002C, /* Comma [,] */
                U+0027-U+0027, /* Apostrophe ['] */
                
                U+0042-U+0042, /* B */
                U+0069-U+0069, /* i */
                U+006C-U+006C, /* l */
                U+006F-U+006F, /* o */
                U+006E-U+006E, /* n */
                U+0073-U+0073, /* s */
                
                U+004D-U+004D, /* M */
                
                U+0074-U+0074, /* t */
                U+0061-U+0061, /* a */
                U+0064-U+0064, /* d */
                U+0066-U+0066, /* f */
                U+0072-U+0072, /* r */
                U+006D-U+006D; /* m */    
        }
        
        .engravedItalic {
            font-family: engravedItalic;
            font-weight: normal;
            color: #000000;
        }
        
        .engraved {
            font-family: engraved;
            font-weight: normal;
            color: #000000;
        }
        
        .script {
            font-family: hand;
            font-size: 16;
            color: #000000;
            
            font-style:italic;
            font-weight: normal;
        }
        
        VScrollBar {
            track-colors: #cccccc, #cccccc;
            
            up-arrow-skin: ClassReference(null);
            down-arrow-skin: ClassReference(null);
            
            thumb-skin: ClassReference("com.dougmccune.skins.SimpleScrollThumbSkin");
            
            border-color:#cccccc;
            border-thickness:0;
            border-style: none;
        }
        
    </mx:Style>
    
    
    <mx:Canvas width="100%" height="100%">
        
        <mx:HBox width="100%" height="100%" id="content" visible="false">
            <mx:VBox height="100%">
                <code:PromptingTextInput id="searchInput" width="150"
                    prompt="Search..."
                    styleName="engraved" fontSize="22"
                    borderColor="0" borderThickness="2" borderStyle="solid"
                    enter="searchInput_changeHandler(event)"/>
                
                <mx:List id="list" selectionColor="{bgColor}" rollOverColor="{bgColor}"
                    width="150" height="100%" dataProvider="{dataProvider}"
                    rowHeight="50" 
                    borderColor="0" borderThickness="2" borderStyle="solid">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" mouseChildren="false">
                                <mx:Label styleName="engraved" fontSize="16"
                                    text="{data.country}" color="#FFFFFF" opaqueBackground="#666666" />
                                <playfairCharts:SparkChart dataProvider="{data.data}" width="100%" height="100%" />
                            </mx:Canvas>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:List>
            </mx:VBox>
            
            <mx:Canvas borderStyle="solid" borderColor="0" borderThickness="4"
                width="100%" height="100%" backgroundAlpha=".6">
                
                <mx:Canvas borderStyle="solid" borderColor="0" borderThickness="2"
                    left="3" right="3" top="3" bottom="3">
                    
                    <mx:Label text="Time" horizontalCenter="0" top="8" 
                        fontFamily="embeddedTimes" fontSize="13" fontWeight="bold" />
                    
                    <mx:Label text="Money"  rotation="-90" left="5"
                        verticalCenter="30" 
                        fontFamily="embeddedTimes" fontSize="13"  fontWeight="bold"/>
                    
                    <playfairCharts:LargeChart id="chart" 
                        dataProvider="{list.selectedItem.data}"
                        country="{list.selectedItem.country}"
                        left="20" right="15" top="15" bottom="5"
                        gutterLeft="5" gutterRight="75" gutterTop="15" gutterBottom="30"/>
                    
                    <mx:Canvas width="100%" height="100%" 
                        mouseEnabled="false"
                        backgroundColor="{bgColor}" backgroundAlpha=".2" />
                    
                </mx:Canvas>
                
            </mx:Canvas>
        </mx:HBox>
        
        <mx:ProgressBar id="pBar" label="Loading Data (Step 1 of 2)"
            verticalCenter="0" horizontalCenter="0" width="500"
            styleName="engraved" fontSize="30" barColor="{bgColor}" trackHeight="30" 
            labelPlacement="center">
            <mx:filters>
                <mx:DropShadowFilter inner="true" alpha=".5" />
            </mx:filters>
        </mx:ProgressBar>
        
    </mx:Canvas>
    
</mx:Application>