<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo"
    width="550" height="555"
    skinClass="skins.AppSkin"
    creationComplete="init();" viewSourceURL="srcview/index.html">
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        
        <s:Animate id="keyframeAnimation" duration="2500" target="{ btn }">
            <s:MotionPath id="xKeys" property="x" />
            <s:MotionPath id="yKeys" property="y" />
        </s:Animate>
    </fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayList;
        import spark.effects.animation.Keyframe;
        
        [ Bindable ] private var _xKeyframeList:ArrayList = new ArrayList();
        [ Bindable ] private var _ykeyframeList:ArrayList = new ArrayList();
        
        private function init():void {
            // The xKeys and yKeys MotionPaths are empty so they need to be instantiated. 
            xKeys.keyframes = new Vector.<Keyframe>();
            yKeys.keyframes = new Vector.<Keyframe>();
            
            // create a few default keyframes to get things started
            addNewKeyframe( 0, 0, 0 );
            addNewKeyframe( 250, 25, 100 );
            addNewKeyframe( 50, 125, 200 );
            
        }
        
        private function addNewKeyframe( xValue:int, yValue:int, time:int ):void {
            var xKeyframe:Keyframe = new Keyframe( time, xValue );
            xKeys.keyframes.push( xKeyframe );
            _xKeyframeList.addItem( xKeyframe );
            
            var yKeyframe:Keyframe = new Keyframe( time, yValue );
            yKeys.keyframes.push( yKeyframe );
            _ykeyframeList.addItem( yKeyframe );            
        }
        
    ]]>
</fx:Script>
    
    <s:Button 
        label="start keyframe animation"
        horizontalCenter="0" top="5"
        fontSize="20"
        width="330" height="75" click="{ keyframeAnimation.play(); }" />
    
    <s:Group top="5" left="5" right="5" bottom="5">
        
        <mx:DataGrid dataProvider="{ _xKeyframeList }" width="100" height="100%">
            <mx:columns>
                <mx:DataGridColumn headerText="time" dataField="time" />            
                <mx:DataGridColumn headerText="x" dataField="value" />
            </mx:columns>
        </mx:DataGrid>
        
        <mx:DataGrid right="2" dataProvider="{ _xKeyframeList }" width="100" height="100%">
            <mx:columns>
                <mx:DataGridColumn headerText="time" dataField="time" />            
                <mx:DataGridColumn headerText="y" dataField="value" />
            </mx:columns>
        </mx:DataGrid>
    </s:Group>
    
    <s:VGroup left="110" right="110" top="85">
        
        <s:Group height="400" width="100%" >
            <s:Rect width="330" height="400">
                <s:fill>
                    <s:SolidColor color="#CCCCCC" />
                </s:fill>
            </s:Rect>
    
            <s:Button id="btn" 
                label="drag me" buttonMode="true"
                width="70" height="50"
                mouseDown="{ btn.startDrag(); }"
                mouseUp="{ btn.stopDrag(); }"
                mouseOut="{ btn.stopDrag(); }"/>
        
        </s:Group>
        
        <s:Label 
            text="Reposition the 'drag me' button and select a new 'time' then hit the insert button. Rinse/repeat."
            width="330"/>
        
        <s:HGroup verticalAlign="middle">
            
            <s:Label text="time:" />
            
            <s:NumericStepper 
                id="timeStepper" 
                minimum="0" maximum="20000" stepSize="25" />
            
            <s:Button label="insert new keyframe"
                click="addNewKeyframe( btn.x, btn.y, timeStepper.value );"/>
        
        </s:HGroup>
        
    </s:VGroup>
    
</s:Application>