<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" height="100%" width="100%" viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
    
    import mx.collections.ArrayCollection;
    import com.augiemarcello.utils.PaginateData;
    import com.augiemarcello.net.URLRequestHandler;
    import com.augiemarcello.pagination.managers.ModelManager;
    
    [Bindable] public var dummyCollection:ArrayCollection = new ArrayCollection();
    [Bindable] public var paginateData:PaginateData = new PaginateData();
    [Bindable] public var model:ModelManager = ModelManager.getInstance();
    
    public function init():void
    {
        for(var i:Number = 1; i <= 23; i++)
        {
            dummyCollection.addItem({name:('name' + i), email:('augie' + i + '@augiemarcello.com'), photo:('image' + i + 'jpg')});    
        }
        
        model.collection = dummyCollection;
        model.filteredCollection = dummyCollection;
        this.limit.value = 5;
        
        paginateData.paginate(model.collection, this.hbContainer, this.limit.value);
    }
    
    public function setPagination():void
    {
        paginateData.paginate(model.collection, this.hbContainer, this.limit.value);
    }
        
    ]]>
</mx:Script>

<mx:Style source="css/augieMarcelloStyle.css" />
    <mx:VBox height="100%" width="100%">
    
        <mx:Panel width="600" >
              <mx:VBox width="100%">    
                <mx:HBox width="100%">
                    <mx:Text  width="100%" height="29" text="Pagination Example" styleName="header"/>
                       <mx:LinkButton label="Augie Marcello.com" fontWeight="bold"  click="URLRequestHandler.callUrl('http://augiemarcello.com', '_blank')"/> 
                </mx:HBox>
                 <mx:Text width="100%" text="Adobe FLEX 2 / ActionScript 3" styleName="subHeader" />

            </mx:VBox>
            

            <mx:DataGrid id="dGrid" width="100%" height="250" rowCount="5"  dataProvider="{model.filteredCollection}">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name" width="150"/>
                    <mx:DataGridColumn dataField="email" headerText="Email"/>
                    <mx:DataGridColumn dataField="photo" headerText="Photo" width="150" />
                </mx:columns>
            </mx:DataGrid>
             <mx:HBox paddingBottom="10" >
                   <mx:Spacer width="50%" />
                  <mx:NumericStepper id="limit" minimum="1" maximum="{this.dummyCollection.length}" stepSize="1" width="65"  change="this.setPagination()" /> 
                  <mx:Text text="Enter A Value Between 1 and Data Total" fontWeight="bold"  fontSize="9"/>
                  <mx:Spacer width="50%" />
            </mx:HBox>
        </mx:Panel>
        
        <mx:HBox id="hbContainer"  width="100%" />
        
    </mx:VBox>
</mx:Application>