<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Canvas
    height="10000"/>
    <mx:VBox width="100%"
         y="{this.verticalScrollPosition}"
            includeInLayout="false">
        <mx:HBox>
            <mx:Button
                label="Scroll to button anchor"
                click="{anchorManager.scrollById(displayObjectAnchor, animateCheck.selected, scrollCombo.selectedItem as String, durationSlider.value, easingCombo.selectedItem.data)}"
                />
            <mx:FormItem
                direction="horizontal">
                <mx:Label text="y coordinate"/>
                <mx:TextInput id="coordinateInput"
                    change="{anchorManager.updateCoordinateAnchor('coordinate', Number(coordinateInput.text));}"
                    text="100" restrict="1234567890"/>
                <mx:Button label="Scroll to coordinate"
                    click="{anchorManager.scrollById('coordinate', animateCheck.selected, scrollCombo.selectedItem as String, durationSlider.value, easingCombo.selectedItem.data)
                    }"
                    />    
            </mx:FormItem>
            <mx:CheckBox
                id="animateCheck"
                selected="true"
                label="Animate"/>
            <mx:Label
                text="Duration"/>
            <mx:HSlider
                id="durationSlider"
                minimum="300"
                maximum="10000"
                tickInterval="100"/>
            <mx:Label
                text="Lock to"/>
            <mx:ComboBox
                id="scrollCombo"
                dataProvider="{[AnchorPositions.NEAREST_EDGE, AnchorPositions.VERTICAL_BOTTOM, AnchorPositions.VERTICAL_MIDDLE, AnchorPositions.VERTICAL_TOP]}"/>
            <mx:Label
                text="Easing Algorithm"/>
            <mx:ComboBox
                id="easingCombo"
                dataProvider="{[{label:'Back : easeOut', data:Back.easeOut}, {label:'Elastic : easeOut', data : Elastic.easeOut}, {label : 'circular : easeOut', data : Circular.easeOut}]}"/>
        </mx:HBox>
        <mx:TextArea id="tracer"
            width="90%"
            height="500"
            updateComplete="{tracer.verticalScrollPosition = tracer.maxVerticalScrollPosition + 100}"/>
    </mx:VBox>
    <mx:Button
        click="{displayObjectAnchor.y = Math.round(Math.random()*(10000))}"
        moveEffect="Move"
        id="displayObjectAnchor"
        height="500"
        width="500"
        label="Anchor - click to move to random coordinate"
        y="5000"/>
    <mx:Script>
        <![CDATA[
            import com.appdivision.manager.anchor.event.AnchorEvent;
            import mx.controls.Label;
            import mx.effects.easing.Circular;
            import mx.effects.easing.Elastic;
            import mx.effects.easing.Back;
            import com.appdivision.manager.anchor.*;
            public var anchorManager:AnchorManager;
        
            override protected function childrenCreated():void{
                super.childrenCreated();
                
                anchorManager = new AnchorManager(this);
                anchorManager.addDisplayObjectAnchor(displayObjectAnchor);
                
                anchorManager.addCoordinateAnchor('coordinate', 100);
                
                anchorManager.addEventListener(AnchorEvent.SCROLL_END, onScrollEnd);
                anchorManager.addEventListener(AnchorEvent.SCROLL_UPDATE, onScrollUpdate);
                
                for(var i:Number = 0; i < 10000; i += 100){
                    var label:Label = new Label();
                    label.text = String(i);
                    label.y = i;
                    addChild(label);
                }
                
                
            }
            
            private function onScrollEnd(e:AnchorEvent):void{
                tracer.text += e.container + " scrolling \n"; 
            }
            
            private function onScrollUpdate(e:AnchorEvent):void{
                tracer.text += e.container + " finished scrolling \n";
            }
        ]]>
    </mx:Script>
</mx:Application>