<?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" width="100%" height="100%" 
         xmlns:nestedtreedatagrid="com.flexicious.nestedtreedatagrid.*"
         creationComplete="group1_creationCompleteHandler(event)"
         initialize="initApp()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import com.flexicious.example.view.support.StyledPager;
            import com.flexicious.nestedtreedatagrid.events.FlexDataGridEvent;
            import com.flexicious.utils.UIUtils;
            
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.core.UIComponent;
            import mx.events.FlexEvent;
            [Bindable(private var _employees:ArrayCollection=new ArrayCollection();
            
            public function addFilterToUserName(filterName:String):void
            {
                dgMain.setFilterValue("userName",filterName);
                
            }
            public function initApp():void
            {
                if (ExternalInterface.available)
                    ExternalInterface.addCallback("addFilterToUserName", addFilterToUserName);     
            }
            
            protected function group1_creationCompleteHandler(event:FlexEvent):void
            {
                _employees.addItem({province:"ON",
                    children:[
                        {city:"Toronto",cityrep:"Jack Jhonson",email:"jjhonson@email.com",actual:"23564"
                            ,estimated:"300000",lastSale:new Date(),created:new Date()},
                        {city:"Kingston",cityrep:"Kenneth Parcel",email:"kparcel@email.com",actual:"22586"
                            ,estimated:"250000",lastSale:new Date(),created:new Date()},
                        {city:"Kitchener",cityrep:"Tracy Jordan",email:"tjordan@email.com",actual:"156222"
                            ,estimated:"250000",lastSale:new Date(),created:new Date()}
                    ] });
                _employees.addItem({province:"BC",
                    children:[
                        {city:"Vancouver",cityrep:"Ann Perkins",email:"aperkins@email.com",actual:"23564"
                            ,estimated:"300000",lastSale:new Date(),created:new Date()},
                        {city:"Victoria",cityrep:"Ron Swansan",email:"rswanson@email.com",actual:"22586"
                            ,estimated:"250000",lastSale:new Date(),created:new Date()},
                        {city:"Whistler",cityrep:"Shaun White",email:"swhite@email.com",actual:"156222"
                            ,estimated:"250000",lastSale:new Date(),created:new Date()}
                    ] });
                
                
                dgMain.rebuild();
            }
            
            
            protected function dgMain_rendererInitializedHandler(event:FlexDataGridEvent):void
            {
                
            }
            
        ]]>
    </fx:Script>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace nestedtreedatagrid "com.flexicious.nestedtreedatagrid.*";
        .myGridStyle{
            filterColors:#D8D8D8;
            headerColors:#D8D8D8;
            alternating-item-colors:#E6E6E6,#FFFFFF;
            font-family:"calibri";
            font-size:12;
            header-style-name: headerstyle;
            header-vertical-grid-line-color:#B2C1CD;
            filter-style-name: headerstyle;
            filter-vertical-grid-line-color:#B2C1CD;
            header-draw-top-border:false;
            header-horizontal-grid-lines:false;
            filter-horizontal-grid-lines:false;
            vertical-grid-lines:false;
            pager-colors:#FFFFFF,#81F781;
            pager-roll-over-colors:#FFFFFF,#81F781;
            
        }
        .headerstyle
        {
            
            border-alpha:"1.0";
            font-weight:"normal"
                
                
        }
        
    </fx:Style>
    
    <nestedtreedatagrid:FlexDataGrid dataProvider="{_employees}" width="100%" height="100%" id="dgMain" styleName="myGridStyle"  
                                     forcePagerRow="true" pagerRowHeight="40" rendererInitialized="dgMain_rendererInitializedHandler(event)" itemOpen="dgMain.refreshCells()" itemClose="dgMain.refreshCells()">
        <nestedtreedatagrid:columnLevel>
            <nestedtreedatagrid:FlexDataGridColumnLevel childrenField="children" enableFilters="true"  headerHeight="22"
                                                        headerVerticalGridLineThickness="1" filterRowHeight="30"
                                                        pagerRenderer="com.flexicious.example.view.support.StyledPager" >
                <nestedtreedatagrid:columns>
                    <nestedtreedatagrid:FlexDataGridCheckBoxColumn  />
                    <nestedtreedatagrid:FlexDataGridColumn headerText="Province" dataField="province" filterControl="TextInput" filterOperation="BeginsWith" >
                        <nestedtreedatagrid:itemRenderer>
                            <fx:Component>
                                <mx:Canvas horizontalScrollPolicy="off">
                                    <fx:Script>
                                        <![CDATA[
                                            import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
                                            public override function set data(val:Object):void{
                                                super.data=val;
                                                visible =IFlexDataGridCell(parent).level.nestDepth==1;
                                                var isOpen:Boolean = IFlexDataGridCell(parent).level.grid.openItems.contains(val);
                                                imgPersonIconClosed.source=isOpen?"/assets/images/Data Blue Move Up.png":"/assets/images/Data Blue Move Down.png"
                                            }
                                        ]]>
                                    </fx:Script>
                                    <mx:Image top="0"  left="2" id="imgPersonIconClosed" >
                                    </mx:Image>
                                    <mx:Label left="24" top="3" text="{data.province}" paddingRight="50"/>
                                </mx:Canvas>
                            </fx:Component>
                        </nestedtreedatagrid:itemRenderer>
                    </nestedtreedatagrid:FlexDataGridColumn>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="" width="30" columnWidthMode="fixed">
                        <nestedtreedatagrid:itemRenderer>
                            <fx:Component>
                                <mx:Image source="/assets/images/Statistics Move Up.png"  
                                          scaleContent="false" useHandCursor="true" buttonMode="true" mouseChildren="false">
                                    <fx:Script>
                                        <![CDATA[
                                            import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
                                            public override function set data(val:Object):void{
                                                super.data=val;
                                                visible =IFlexDataGridCell(parent).level.nestDepth==2;
                                                if(data.city=="Kingston")
                                                {
                                                    source="/assets/images/Statistics Move Down.png"
                                                }
                                            }
                                        ]]>
                                    </fx:Script>
                                </mx:Image>
                                
                            </fx:Component>
                        </nestedtreedatagrid:itemRenderer>    
                    </nestedtreedatagrid:FlexDataGridColumn>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="City" dataField="city" filterControl="TextInput" filterOperation="BeginsWith" />
                    <nestedtreedatagrid:FlexDataGridColumn headerText="City Rep" dataField="cityrep" filterControl="TextInput" filterOperation="BeginsWith"/>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="Email" dataField="email" filterControl="TextInput" filterOperation="BeginsWith"/>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="Actual" dataField="actual" filterControl="TextInput" filterOperation="BeginsWith">
                        <nestedtreedatagrid:itemRenderer>
                            <fx:Component>
                                <mx:Canvas horizontalScrollPolicy="off">
                                    <fx:Script>
                                        <![CDATA[
                                            import com.flexicious.utils.UIUtils;
                                        ]]>
                                    </fx:Script>
                                    <mx:Image top="2"  left="2" id="phoneIcon" source="@Embed('/../assets/images/Status Flag Green.png')" >
                                        <fx:Script>
                                            <![CDATA[
                                                import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
                                                public override function set data(val:Object):void{
                                                    super.data=val;
                                                    visible =IFlexDataGridCell(parent).level.nestDepth==2;
                                                    phoneIcon.source=(data.city=="Kingston")?"/assets/images/Status Flag Red.png": "/assets/images/Status Flag Green.png";
                                                }
                                            ]]>
                                        </fx:Script>
                                    </mx:Image>
                                    <mx:Label left="20" text="{(data.actual)}" paddingRight="50" />
                                </mx:Canvas>
                            </fx:Component>
                        </nestedtreedatagrid:itemRenderer>
                    </nestedtreedatagrid:FlexDataGridColumn>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="Estimated" dataField="estimated" filterControl="TextInput" >
                        <nestedtreedatagrid:itemRenderer>
                            <fx:Component>
                                <mx:Canvas horizontalScrollPolicy="off">
                                    <fx:Script>
                                        <![CDATA[
                                            import com.flexicious.utils.UIUtils;
                                        ]]>
                                    </fx:Script>
                                    <mx:Image top="2"  left="2" id="phoneIcon" source="@Embed('/../assets/images/Status Flag Green.png')" >
                                        <fx:Script>
                                            <![CDATA[
                                                import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
                                                public override function set data(val:Object):void{
                                                    super.data=val;
                                                    visible =IFlexDataGridCell(parent).level.nestDepth==2;
                                                }
                                            ]]>
                                        </fx:Script>
                                    </mx:Image>
                                    <mx:Label left="20" text="{(data.estimated)}" paddingRight="50" />
                                </mx:Canvas>
                            </fx:Component>
                        </nestedtreedatagrid:itemRenderer>
                        
                    </nestedtreedatagrid:FlexDataGridColumn>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="Last Sale" dataField="lastSale" filterControl="DateComboBox" labelFunction="UIUtils.dataGridFormatDateLabelFunction"/>
                    <nestedtreedatagrid:FlexDataGridColumn headerText="Created" dataField="created" filterControl="DateComboBox" labelFunction="UIUtils.dataGridFormatDateLabelFunction"/>
                </nestedtreedatagrid:columns>
                <nestedtreedatagrid:nextLevel>
                    <nestedtreedatagrid:FlexDataGridColumnLevel reusePreviousLevelColumns="true"/>
                </nestedtreedatagrid:nextLevel>
            </nestedtreedatagrid:FlexDataGridColumnLevel>
        </nestedtreedatagrid:columnLevel>
    </nestedtreedatagrid:FlexDataGrid>
</s:Group>