<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" horizontalGap="{horizontalGapNum}" 
         implements="com.flexicious.nestedtreedatagrid.pager.IExtendedPager,com.flexicious.nestedtreedatagrid.interfaces.IFixedWidth" 
         styleName="pagingControl" horizontalScrollPolicy="off" 
         creationComplete="onCreationComplete(event)" xmlns:controls="com.sample.examples.support.controls.*"
         paddingTop="1" xmlns:pager="com.flexicious.nestedtreedatagrid.pager.*">
    <mx:Metadata> [Event("pageChange",type="com.flexicious.nestedtreedatagrid.events.ExtendedFilterPageSortChangeEvent")] </mx:Metadata>
    <mx:Metadata> [Event("reset")] </mx:Metadata>
    <mx:Script>
        <![CDATA[
            import com.flexicious.export.ExportOptions;
            import com.flexicious.grids.dependencies.IExtendedDataGrid;
            import com.flexicious.nestedtreedatagrid.FlexDataGrid;
            import com.flexicious.nestedtreedatagrid.FlexDataGridColumnLevel;
            import com.flexicious.nestedtreedatagrid.events.ExtendedFilterPageSortChangeEvent;
            import com.flexicious.nestedtreedatagrid.events.FlexDataGridEvent;
            import com.flexicious.nestedtreedatagrid.export.ExtendedExportController;
            import com.flexicious.nestedtreedatagrid.interfaces.IExtendedFlexDataGrid;
            import com.flexicious.nestedtreedatagrid.print.ExtendedPrintController;
            import com.flexicious.nestedtreedatagrid.print.ExtendedPrintOptionsView;
            import com.flexicious.nestedtreedatagrid.valueobjects.RowInfo;
            import com.flexicious.nestedtreedatagrid.valueobjects.ToolbarAction;
            import com.flexicious.persistence.SaveSettingsPopup;
            import com.flexicious.persistence.SettingsPopup;
            import com.flexicious.print.PrintOptions;
            import com.flexicious.utils.UIUtils;
            
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            
            [Bindable(public var horizontalGapNum:Number= 3;
            
            [Bindable(private var _pages:ArrayCollection= new  ArrayCollection();
            /**
             * Default handler for the First Page Navigation Button  
             */
            public function onImgFirstClick():void
            {
                if(_pageIndex != 0)
                {
                    _pageIndex = 0;
                    onPageChanged();
                }
            }
            /**
             * Default handler for the Previous Page Navigation Button  
             */
            public function onImgPreviousClick():void
            {
                if(_pageIndex > 0)
                {
                    _pageIndex--;
                    onPageChanged();
                }
            }
            /**
             * Default handler for the Next Page Navigation Button  
             */
            public function onImgNextClick():void
            {
                if(_pageIndex < pageCount-1)
                {
                    _pageIndex++;
                    onPageChanged();
                }
            }
            /**
             * Default handler for the Last Page Navigation Button  
             */
            public function onImgLastClick():void
            {
                if(_pageIndex < pageCount-1)
                {
                    _pageIndex = pageCount-1;
                    onPageChanged();                    
                }
            }
            /**
             * Default handler for the Page Change Combo Box  
             */
            public function onPageCbxChange():void
            {
                //_pageIndex = parseInt(cbxPage.selectedLabel)-1;
                onPageChanged(); 
            }
            /**
             * Default handler for the Page Change Event
             */
            public function onPageChanged():void
            {
                /*                 if(cbxPage && (cbxPage.selectedIndex != (_pageIndex)))
                {
                cbxPage.selectedIndex=_pageIndex;
                } */
                dispatchEvent(new ExtendedFilterPageSortChangeEvent(ExtendedFilterPageSortChangeEvent.PAGE_CHANGE));
            }
            public function onCreationComplete(event:Event):void
            {
                //btnSettings.visible=btnSettings.includeInLayout=_grid.enablePreferencePersistence;
                if(nestedGrid.enableToolbarActions){
                    _bindingOwner=this;
                    nestedGrid.toolbarActions.addEventListener(CollectionEvent.COLLECTION_CHANGE,onToolbarActionsChanged);
                    nestedGrid.addEventListener(FlexDataGridEvent.CHANGE,onGridSelectionChange);
                    createToolbarActions();
                }
                
            }
            /**
             * Sets the page index to 1(0), dispatches the reset event.  
             */
            public function reset():void{
                _pageIndex=0;
                //cbxPage.selectedIndex=0;
                dispatchEvent(new Event("reset", true));
            }
            private var _totalRecords:int=0;
            [Bindable(private var _pageSize:int=50;
            [Bindable(private var _pageIndex:int=0;
            [Bindable(private var _pagerPosition:String="middle";
            [Bindable(private var _level:FlexDataGridColumnLevel;
            [Bindable(private var _grid:IExtendedFlexDataGrid;
            [Bindable(private var _rowInfo:RowInfo;
            
            
            [Bindable("pageChange")]
            [Bindable("reset")]
            public function get pageStart():int
            {
                return _totalRecords==0?0:((_pageIndex)*_pageSize)+1;
            }
            [Bindable("pageChange")]
            [Bindable("reset")]
            public function get pageEnd():int
            {
                var val:int= (_pageIndex+1)*_pageSize;
                return (val>_totalRecords)?_totalRecords:val;
            }
            [Bindable("pageChange")]
            [Bindable("reset")]
            public function get pageIndex():int
            {
                return _pageIndex;
            }
            public function set pageIndex(val:int):void
            {
                _pageIndex = val;
                onPageChanged();
            }
            
            [Bindable("pageChange")]
            [Bindable("reset")]
            public function get pageCount():int
            {
                return pageSize>0?Math.ceil(totalRecords/pageSize):0;
            }
            
            
            public function set totalRecords(val:int):void
            {
                _totalRecords = val;
                var pages:ArrayCollection=new ArrayCollection();
                for(var i:int=1;i<=pageCount;i++){
                    pages.addItem(i);
                }
                _pages=pages;
                dispatchEvent(new Event("reset"));
            }
            [Bindable(public function get totalRecords():int
            {
                return _totalRecords;
            }
            
            public function set pageSize(val:int):void
            {
                _pageSize = val;
            }
            public function get pageSize():int
            {
                return _pageSize;
            }
            [Inspectable("bottomLeft", type="List", enumeration="bottomLeft,bottomRight,bottomMiddle" )]
            public function set pagerPosition(val:String):void
            {
                _pagerPosition= val;
            }
            
            public function get pagerPosition():String
            {
                return _pagerPosition;
            }
            
            public function set level(val:FlexDataGridColumnLevel):void
            {
                _level = val;
                if(val)
                    _levelDepth=val.nestDepth
            }
            [Bindable(public function get level():FlexDataGridColumnLevel
            {
                return _level;
            }
            
            public function set rowInfo(val:RowInfo):void
            {
                _rowInfo = val;
            }
            
            [Bindable(public function get rowInfo():RowInfo
            {
                return _rowInfo;
            }
            [Bindable(public function get grid():IExtendedDataGrid
            {
                return _grid;
            }
            
            public function set grid(val:IExtendedDataGrid):void
            {
                _grid = val as IExtendedFlexDataGrid;
                dispatchEvent(new Event("gridChanged"))
            }
            [Bindable("gridChanged")]
            public function get nestedGrid():FlexDataGrid
            {
                return _grid as FlexDataGrid;
            }
            
            
            /**
             * Default handler for the Word Export Button. Calls
             * ExtendedExportController.instance().export(this.grid,ExportOptions.create(ExportOptions.DOC_EXPORT))  
             */
            public function onWordExport():void{
                ExtendedExportController.instance().export(this.grid,ExportOptions.create(ExportOptions.DOC_EXPORT))
            }
            /**
             * Default handler for the Word Export Button. Calls
             * ExtendedExportController.instance().export(this.grid,ExportOptions.create())  
             */
            public function onExcelExport():void{
                ExtendedExportController.instance().export(this.grid,ExportOptions.create())
            }
            /**
             * Default handler for the Print Button. Calls
             * var po:PrintOptions=PrintOptions.create();
             * po.printOptionsViewrenderer = new ClassFactory(ExtendedPrintOptionsView);
             * ExtendedPrintController.instance().print(this.grid,po)
             */
            public function onPrint():void{
                var po:PrintOptions=PrintOptions.create();
                po.printOptionsViewrenderer = new ClassFactory(ExtendedPrintOptionsView);
                ExtendedPrintController.instance().print(this.grid,po)
            }
            /**
             * Default handler for the Print Button. Calls
             * var po:PrintOptions=PrintOptions.create(true);
             * po.printOptionsViewrenderer = new ClassFactory(ExtendedPrintOptionsView);
             * ExtendedPrintController.instance().print(this.grid,po)
             */
            public function onPdf():void{
                var po:PrintOptions=PrintOptions.create(true);
                po.printOptionsViewrenderer = new ClassFactory(ExtendedPrintOptionsView);
                ExtendedPrintController.instance().print(this.grid,po)
            }
            /**
             * Default handler for the Clear Filter Button.
             * Calls grid.clearFilter()  
             */
            public function onClearFilter():void{
                this.grid.clearFilter()
            }
            /**
             * Default handler for the Process Filter Button.
             * Calls grid.processFilter()  
             */
            public function onProcessFilter():void{
                this.grid.processFilter();
            }
            /**
             * Default handler for the Show Hide Filter Button.
             * Calls this.grid.filterVisible=!this.grid.filterVisible;nestedGrid.placeSections()
             */
            public function onShowHideFilter():void{
                this.grid.filterVisible=!this.grid.filterVisible;nestedGrid.placeSections()
            }
            /**
             * Default handler for the Show Hide Filter Button.
             * Calls this.grid.filterVisible=!this.grid.filterVisible;nestedGrid.placeSections()
             */
            public function onShowHideFooter():void{
                this.grid.footerVisible=!this.grid.footerVisible;nestedGrid.placeSections()
            }
            /**
             * Default handler for the Settings Popup
             * Calls var popup:SaveSettingsPopup=new SaveSettingsPopup();UIUtils.addPopUp(popup,grid as DisplayObject);popup.grid=grid;
             */
            public function onShowSettingsPopup():void{
                var popup:SettingsPopup=new SettingsPopup();UIUtils.addPopUp(popup,grid as DisplayObject);popup.grid=grid;
            }
            /**
             * Default handler for the Save Settings Popup
             * Calls var popup:SaveSettingsPopup=new SaveSettingsPopup();UIUtils.addPopUp(popup,grid as DisplayObject);popup.grid=grid;
             */
            public function onSaveSettingsPopup():void{
                var popup:SaveSettingsPopup=new SaveSettingsPopup();UIUtils.addPopUp(popup,grid as DisplayObject);popup.grid=grid;
            }
            override public function set width(val:Number):void{
                super.width=val;
            }
            
            public override function setActualSize(w:Number, h:Number):void{
                super.setActualSize(w,h);
            }
            [Bindable(protected var _toolbarActions:ArrayCollection=new ArrayCollection();
            public function initializePager():void{
                
            }
            protected function createToolbarActions():void
            {
                _toolbarActions=new ArrayCollection(nestedGrid.toolbarActions.source);
                _toolbarActions.filterFunction=toolbarActionFilterFunction;
                _toolbarActions.refresh();
                
            }
            protected function onToolbarActionsChanged(event:Event):void
            {
                createToolbarActions();
            }
            protected function onGridSelectionChange(event:FlexDataGridEvent):void
            {
                //so that we enable/disable the buttons without a flicker.
                _bindingTrigger=false;
                _bindingTrigger=true;
            }
            private function toolbarActionFilterFunction(item:ToolbarAction):Boolean{
                return item.level==this.level.nestDepth || item.level==-1;
            }
            import mx.events.FlexEvent;
            protected function onToolbarButtonClick(event:MouseEvent):void
            {
                var action:ToolbarAction=_toolbarActions[event.currentTarget.repeaterIndex];
                nestedGrid.runToolbarAction(action,event.currentTarget,this);
            }
            
            
            protected function onToolbarbuttonCreationComplete(event:FlexEvent):void
            {
                var img:ImageButton=event.target as ImageButton;
                var iconUrl:String=_toolbarActions[img.repeaterIndex].iconUrl;
                if(iconUrl==ToolbarAction.DEFAULT_ICON){
                    img.source=_toolbarActionIcon;
                }else{
                    img.load(iconUrl);
                }
                
            }
            private var _dispatchEvents:Boolean=true;
            
            public function get dispatchEvents():Boolean
            {
                return _dispatchEvents;
            }
            
            public function set dispatchEvents(value:Boolean):void
            {
                _dispatchEvents = value;
            }
            
            [Embed('/../assets/images/customAction.png')]
            private static var _toolbarActionIcon:Class;
            
            [Bindable(private var _bindingTrigger:Boolean=true;
            [Bindable(private var _bindingOwner:StyledPager;
            [Bindable(private var _levelDepth:int;
            
        ]]>
    </mx:Script>
    
    <mx:HBox id="btns"  verticalAlign="middle" height="100%" horizontalGap="2"
             paddingLeft="0" paddingRight="0">
        
        <pager:ImageButton id="btnEdit" source="@Embed('/assets/images/User Edit.png')" toolTip="Edit"  />
        <mx:Label text="Edit" />
        <mx:Spacer width="15"/>
        <pager:ImageButton id="btnAdd" source="@Embed('/assets/images/User Insert.png')" toolTip="Add" />
        <mx:Label text="Add" />
        <mx:Spacer width="15"/>
        <pager:ImageButton id="btnDelete" source="@Embed('/assets/images/User Drop.png')" toolTip="Delete" />
        <mx:Label text="Delete" />
        <mx:Spacer width="100%"/>
        <mx:Label text="Show" />
        <mx:ComboBox width="100">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="All"/>
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:HBox>    
    
    
    <!--<mx:HBox id="boxPaging" visible="{grid.enablePaging}" includeInLayout="{grid.enablePaging}"  verticalAlign="middle" height="100%" horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <mx:Label text="Items {pageStart} to {pageEnd} of {totalRecords}. Page {totalRecords==0?0:pageIndex+1} of {pageCount}" height="20" baseline="-2" />
    <mx:Label text="|" width="10"/>
    <pager:ImageButton id="btnFirstPage" source="@Embed('/../assets/images/firstPage.png')" click="onImgFirstClick()" 
    enabled="{pageIndex>0}" toolTip="First Page" visible="{grid.enablePaging}" />
    <pager:ImageButton id="btnPreviousPage" source="@Embed('/../assets/images/prevPage.png')" click="onImgPreviousClick()" 
    enabled="{pageIndex>0}" toolTip="Previous Page" />
    <pager:ImageButton id="btnNextPage" source="@Embed('/../assets/images/nextPage.png')" click="onImgNextClick()" 
    enabled="{pageIndex &lt; (pageCount-1)}" toolTip="Next Page" />
    <pager:ImageButton id="btnLastPage" source="@Embed('/../assets/images/lastPage.png')" click="onImgLastClick()" 
    enabled="{pageIndex &lt; (pageCount-1)}" toolTip="Last Page" />
    <mx:Label text="|" width="10"/>
    <mx:Label text="Go to Page:"/>
    <mx:ComboBox id="cbxPage" dataProvider="{_pages}" change="onPageCbxChange()" height="20" width="55"/>
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    <mx:Spacer width="100%"/>
    
    <mx:HBox id="boxToolbarActions" visible="{nestedGrid.enableToolbarActions}" includeInLayout="{nestedGrid.enableToolbarActions}"   
    verticalAlign="middle" height="100%" 
    horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <mx:Repeater id="repeaterToolbarActions" dataProvider="{_toolbarActions}">
    <mx:Label text="|" width="10" visible="{repeaterToolbarActions.currentItem.seperatorBefore}" includeInLayout="{repeaterToolbarActions.currentItem.seperatorBefore}"/>
    <pager:ImageButton click="onToolbarButtonClick(event)" id="imgButton"
    enabled="{nestedGrid.isToolbarActionValid(repeaterToolbarActions.currentItem as ToolbarAction,imgButton,_bindingOwner) &amp;&amp; _bindingTrigger}" 
    toolTip="{repeaterToolbarActions.currentItem.tooltip}" 
    creationComplete="onToolbarbuttonCreationComplete(event)"
    />
    <mx:Label text="|" width="10" visible="{repeaterToolbarActions.currentItem.seperatorAfter}" includeInLayout="{repeaterToolbarActions.currentItem.seperatorAfter}"/>
    </mx:Repeater>
    
    </mx:HBox>
    
    <mx:HBox visible="{_levelDepth==1}" includeInLayout="{_levelDepth==1}" horizontalGap="0" paddingLeft="0" paddingRight="0">
    
    <mx:HBox id="boxMultiColumnSort" visible="{nestedGrid.enableMultiColumnSort}" 
    includeInLayout="{nestedGrid.enableMultiColumnSort}"   
    verticalAlign="middle" height="100%" horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/sort.png')" click="nestedGrid.multiColumnSortShowPopup()" 
    toolTip="Multiple Column Sort" />
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    
    <mx:HBox  id="boxDrilldown" visible="{nestedGrid.enableDrillDown}" includeInLayout="{nestedGrid.enableDrillDown}"   verticalAlign="middle" height="100%" 
    horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/expand.png')" click="nestedGrid.expandDown();" enabled="{nestedGrid.canExpandDown}"  
    toolTip="Expand One Level Down" />
    <pager:ImageButton source="@Embed('/../assets/images/collapse.png')" click="nestedGrid.expandUp()" enabled="{nestedGrid.canExpandUp}"
    toolTip="Expand One Level Up"/>
    <mx:Label text="|" width="10" />
    <pager:ImageButton source="@Embed('/../assets/images/expandall.png')" click="nestedGrid.expandAll();" enabled="{nestedGrid.canExpandDown}"  
    toolTip="Expand All" />
    <pager:ImageButton source="@Embed('/../assets/images/collapseall.png')" click="nestedGrid.collapseAll()" enabled="{nestedGrid.canExpandUp}"
    toolTip="Collapse All"/>
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    <mx:HBox id="boxPreferences" visible="{grid.enablePreferencePersistence}" includeInLayout="{grid.enablePreferencePersistence}"   verticalAlign="middle" height="100%" 
    horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/settings.png')" click="onShowSettingsPopup();"   
    toolTip="Preferences" />
    <pager:ImageButton id="btnSettings" source="@Embed('/../assets/images/saveSettings.png')" click="onSaveSettingsPopup();"  
    toolTip="Save Preferences" />
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    <mx:HBox id="boxFooters" visible="{grid.enableFooters}" includeInLayout="{grid.enableFooters}"   verticalAlign="middle" height="100%" horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/footerShowHide.png')" click="onShowHideFooter()" 
    toolTip="Show/Hide Footer" />
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    
    <mx:HBox id="boxFilters" visible="{grid.enableFilters &amp;&amp; false}" includeInLayout="{grid.enableFilters}"   verticalAlign="middle" height="100%" horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/filterShowHide.png')" click="onShowHideFilter()" 
    toolTip="Show/Hide Filter" />
    <pager:ImageButton source="@Embed('/../assets/images/filter.png')" click="onProcessFilter()" 
    toolTip="Run Filter" />
    <pager:ImageButton source="@Embed('/../assets/images/clearFilter.png')" click="onClearFilter()" 
    toolTip="Clear Filter" />
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    
    <mx:HBox id="boxPrint" visible="{grid.enablePrint}" includeInLayout="{grid.enablePrint}"   verticalAlign="middle" height="100%" horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/print.png')" click="onPrint()" 
    toolTip="Print" />
    <pager:ImageButton source="@Embed('/../assets/images/pdf.png')" click="onPdf()" 
    toolTip="Print to PDF" />
    <mx:Label text="|" width="10"/>
    </mx:HBox>
    
    <mx:HBox id="boxExport" visible="{grid.enableExport}" includeInLayout="{grid.enableExport}"   verticalAlign="middle" height="100%" horizontalGap="{horizontalGapNum}"
    paddingLeft="0" paddingRight="0">
    <pager:ImageButton source="@Embed('/../assets/images/word.png')" click="onWordExport()" 
    toolTip="Export to Word" />
    <pager:ImageButton source="@Embed('/../assets/images/export.png')" click="onExcelExport()" 
    toolTip="Export to Excel" />
    </mx:HBox>
    </mx:HBox>-->
</mx:HBox>