<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0x000000,0x000000]"
    themeColor="#222222"
    horizontalAlign="left"
    paddingLeft="10" paddingRight="10"
    creationComplete="genData();"
    viewSourceURL="srcview/index.html">
    
    <Metadata>
        [SWF(backgroundColor="0x000000")]
    </Metadata>
    
    <Style>
    .panelStyle
    {
        color: #cccccc;
    }
    </Style>
    
    <Script>
    <![CDATA[
    import mx.effects.easing.*;
    
    [Bindable] public var easingFunctions:Array = [
        {label: "Bounce", easingClass: Bounce},
        {label: "Back", easingClass: Back},
        {label: "Circular", easingClass: Circular},
        {label: "Cubic", easingClass: Cubic},
        {label: "Elastic", easingClass: Elastic},
        {label: "Exponential", easingClass: Exponential},
        {label: "Linear", easingClass: Linear},
        {label: "Quadratic", easingClass: Quadratic},
        {label: "Quartic", easingClass: Quartic},
        {label: "Quintic", easingClass: Quintic},
        {label: "Sine", easingClass: Sine}
        ];
    
    [Bindable] public var dataSet:Array;
    
    private function genData():void
    {
        var newData:Array = [];
        var A:Number = Math.random()*100 - 50;
        var B:Number = A - Math.random() * 10;
        var P:Number = Math.random()*100;
        for(var i:int = 0; i < 20; i++)
        {
            A = A + Math.random() * 10 - 5;
            B = A - Math.random() * 10;
            P = Math.random() * 100;
            newData.push(
            {
                A: A,
                B: B,
                P: P
            }
            );
        }
        dataSet = newData;
    }

    ]]>
    </Script>
    
    <ApplicationControlBar width="100%" dock="true" fillAlphas="[1,1]" fillColors="[0x000000,0x222222]">
        <ToggleButtonBar id="easingFunction" dataProvider="{easingFunctions}" width="100%"/>
        <RadioButtonGroup id="easeType"/>
        <RadioButton groupName="easeType" label="Ease Out" value="easeOut" color="#bbbbbb" textRollOverColor="#eeeeee" textSelectedColor="#bbbbbb" selected="true"/>
        <RadioButton groupName="easeType" label="Ease In" value="easeIn" color="#bbbbbb" textRollOverColor="#eeeeee" textSelectedColor="#bbbbbb"/>
    </ApplicationControlBar>
    
    <Sequence id="moveEffect">
        <Move duration="2000" xTo="{this.width - p.width - 10}" easingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}"/>
        <Pause duration="750"/>
        <Move duration="2000" xTo="10" easingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}"/>
    </Sequence>

    <Panel id="p" title="Easing Functions on a Move Effect" borderAlpha="0.2" backgroundAlpha="0.2" titleStyleName="panelStyle">
        <ControlBar horizontalAlign="center">
            <Button label="Move" click="moveEffect.play([p])"/>
        </ControlBar>
    </Panel>
    
    <Spacer height="10"/>

    <SeriesInterpolate id="seriesEffect" duration="2000" easingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}"/>
    
    <Panel title="Easing Functions on Series Interpolation in a chart" width="100%" height="100%" borderAlpha="0.2" backgroundAlpha="0.2" titleStyleName="panelStyle">
    
        <Accordion width="100%" height="100%" backgroundAlpha="0" openEasingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}" openDuration="1500" creationPolicy="all">
            <VBox width="100%" height="100%" label="Column">    
                <ColumnChart width="100%" height="100%" dataProvider="{dataSet}">
                    <series>
                        <ColumnSeries showDataEffect="{seriesEffect}" yField="A"/>
                    </series>
                </ColumnChart>
            </VBox>                
            <VBox width="100%" height="100%" label="Pie">        
                <PieChart width="100%" height="100%" dataProvider="{dataSet}">
                    <series>
                        <PieSeries showDataEffect="{seriesEffect}" field="P"/>
                    </series>
                </PieChart>
            </VBox>                
            <VBox width="100%" height="100%" label="Line">        
                <LineChart width="100%" height="100%" dataProvider="{dataSet}">
                    <series>
                        <LineSeries showDataEffect="{seriesEffect}" yField="A"/>
                    </series>
                </LineChart>
            </VBox>                
            <VBox width="100%" height="100%" label="Bubble">        
                <BubbleChart width="100%" height="100%" dataProvider="{dataSet}">
                    <series>
                        <BubbleSeries showDataEffect="{seriesEffect}" xField="A" yField="B" radiusField="P"/>
                    </series>
                </BubbleChart>
            </VBox>
        </Accordion>
        <ControlBar horizontalAlign="center">
            <Button label="Change Data Set" click="genData()"/>
        </ControlBar>
    </Panel>

</Application>