<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:waicomponents="com.wai.components.*"
    verticalScrollPolicy="off"
    layout="vertical"
    creationComplete="init()"
    viewSourceURL="srcview/index.html">
    
    <mx:Style>
        .noArrowsScrollBar
        {
            upArrowSkin        : ClassReference( null );
            downArrowSkin    : ClassReference( null );
            thumb-skin        : ClassReference("PaginatorScrollBar_thumbSkin");
            track-skin        : ClassReference("PaginatorScrollBar_trackSkin");
            thumb-icon        : ClassReference( null );
        }
    </mx:Style>
    
    <mx:Script>
    <![CDATA[
        import flash.events.Event;
        import com.wai.components.events.PaginateEvent;
    
        private function init():void
        {
            paginator.scroller.setStyle("styleName", "noArrowsScrollBar");
        }
        
        private function intervalChangeHandler(e:Event):void
        {
            paginator.itemsPerPage = itemsPerPageStepper.value;            
        }
        
        private function selectedIndexStepperHandler(e:Event):void
        {
            paginator.selectedIndex = selectedIndexStepper.value;
        }
        
        
        private function pageChangeHandler(e:PaginateEvent):void
        {
            
            var page:int = e.index;
            
            var startIndex:int = (page * e.itemsPerPage) + 1;
            var endIndex:int = Math.min((startIndex + e.itemsPerPage -1), e.itemsTotal);
            
            txt.text = "Results: " + String(startIndex) + " - " + String(endIndex) + " of " + e.itemsTotal;
            
            selectedIndexStepper.maximum = paginator.pages-1;
            selectedIndexStepper.value = page;
            
        }
        
    ]]>
    </mx:Script>
    
    <mx:VBox width="100%" horizontalAlign="center">
        <mx:VBox horizontalAlign="left" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="10">
            <mx:Label text="Paginator Parameters" textAlign="center" width="100%" fontSize="14" fontWeight="bold"/>
            <mx:Spacer height="1"/>
            <mx:HBox>
                <mx:Label width="150" text="Items Total: " textAlign="right"/>
                <mx:TextInput id="itemsTotalTxt" text="11758" width="100"/>
            </mx:HBox>
            
            <mx:HBox>
                <mx:Label width="150" text="Item's Per Page: " textAlign="right"/>
                <mx:NumericStepper id="itemsPerPageStepper" width="100" value="600" minimum="200" maximum="1000" stepSize="100"  />
            </mx:HBox>
            
            <mx:HBox>
                <mx:Label width="150" text="No. of Pages to Display: " textAlign="right"/>
                <mx:NumericStepper id="rangeCountStepper" width="100" value="5" maximum="20" />
            </mx:HBox>
            
            <mx:HBox>
                <mx:Label width="150" text="selectedIndex: " textAlign="right"/>
                <mx:NumericStepper id="selectedIndexStepper" width="100" value="0" maximum="{paginator.pages}" click="selectedIndexStepperHandler(event)" />
            </mx:HBox>
                
        </mx:VBox>
        
        <mx:Spacer height="50" />
        
        <mx:VBox backgroundColor="#ffffff" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="10">
            <mx:Text id="txt" text="results indicator"/>
            <waicomponents:WAIPaginator id="paginator" 
                itemsPerPage="{itemsPerPageStepper.value}"
                rangeCount="{rangeCountStepper.value}"
                itemsTotal="{int(itemsTotalTxt.text) as int}"
                selectedIndex="0"
                pageChange="pageChangeHandler(event)" />
        </mx:VBox>
        
    </mx:VBox>

</mx:Application>