<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    height="588" width="440" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        import mx.effects.easing.*;
        
        private var easeMethod:String = "easeOut";        
        private var easeType:String = "Back";
        
        [Bindable]
        private var easeTypeMethod:Function = Back.easeOut;
        [Bindable]
        private var duration:Number = 2000;
        
        private function onMethodTypeChange( e:Event ):void {
            easeMethod = e.target.selection.value;
            updateEaseTypeMethod();
        }
        
                
        private function onEasingTypeChange( e:Event ):void {
            easeType = e.target.selection.value
            updateEaseTypeMethod();
        }
        
        private function onDurationChange( e:Event ):void {
            duration = e.target.value;
        }
        
        
        private function updateEaseTypeMethod():void {
            switch( easeType ) {
                case "Back" :
                    easeTypeMethod = Back[ easeMethod ]
                    break;
                case "Bounce" :
                    easeTypeMethod = Bounce[ easeMethod ]
                    break;
                case "Circular" :
                    easeTypeMethod = Circular[ easeMethod ]
                    break;
                case "Elastic" :
                    easeTypeMethod = Elastic[ easeMethod ]
                    break;
                case "Exponential" :
                    easeTypeMethod = Exponential[ easeMethod ]
                    break;
                case "Linear" :
                    easeTypeMethod = Linear[ easeMethod ]
                    break;
                case "Back" :
                    easeTypeMethod = Back[ easeMethod ]
                    break;
                case "Quadratic" :
                    easeTypeMethod = Quadratic[ easeMethod ]
                    break;
                case "Quartic" :
                    easeTypeMethod = Quartic[ easeMethod ]
                    break;
                case "Quintic" :
                    easeTypeMethod = Quintic[ easeMethod ]
                    break;
                case "Sine" :
                    easeTypeMethod = Sine[ easeMethod ]
                    break;                
            }
        }

    </mx:Script>
    
    <mx:Accordion 
        openEasingFunction="{easeTypeMethod}" 
        openDuration="{duration}" x="218" y="89" width="203" height="403">
        <mx:VBox label="Pane 1" width="400" height="457"/>
        <mx:VBox label="Pane 2" width="400" height="400"/>
        <mx:VBox label="Pane 3" width="400" height="400"/>
        <mx:VBox label="Pane 4" width="400" height="400"/>
        <mx:VBox label="Pane 5" width="400" height="424"/> 
    </mx:Accordion>
    
    <mx:Panel 
        width="200" height="563"  
        x="10" y="10" 
        paddingBottom="5" paddingLeft="5" paddingTop="5" 
        title="Ease This Way">
        
        <mx:Label text="Easing Method"  fontSize="12" fontWeight="bold"/>
        <mx:RadioButtonGroup id="methodType" change="onMethodTypeChange( event );" />
        <mx:RadioButton label="easeOut"     value="easeOut"        groupName="methodType" selected="true" />
        <mx:RadioButton label="easeIn"         value="easeIn"         groupName="methodType"/>
        <mx:RadioButton label="easeInOut"     value="easeInOut"    groupName="methodType"/>

        <mx:HRule width="90%"/>

        <mx:Label text="Easing Type"  fontSize="12" fontWeight="bold"/>
        <mx:RadioButtonGroup id="easingGroup" change="onEasingTypeChange( event );" />
        <mx:RadioButton label="Back"         value="Back"         groupName="easingGroup" selected="true" />
        <mx:RadioButton label="Bounce"         value="Bounce"         groupName="easingGroup"/>
        <mx:RadioButton label="Circular"     value="Circular"     groupName="easingGroup"/>
        <mx:RadioButton label="Cubic"         value="Cubic"        groupName="easingGroup"/>
        <mx:RadioButton label="Elastic"     value="Elastic"        groupName="easingGroup"/>
        <mx:RadioButton label="Exponential"    value="Exponential" groupName="easingGroup"/>
        <mx:RadioButton label="Linear"         value="Linear"         groupName="easingGroup"/>
        <mx:RadioButton label="Quadratic"     value="Quadratic"    groupName="easingGroup"/>
        <mx:RadioButton label="Quartic"     value="Quartic"        groupName="easingGroup"/>
        <mx:RadioButton label="Quintic"     value="Quintic"        groupName="easingGroup"/>
        <mx:RadioButton label="Sine"         value="Sine"         groupName="easingGroup"/>
        
        <mx:HRule width="90%"/>
        <mx:HBox>
            <mx:Label text="Duration"  fontSize="12" fontWeight="bold"/>
            <mx:Label text="( milli-seconds )" fontSize="10" />
        </mx:HBox>
        <mx:NumericStepper 
            id="tweenDuration"
            value="2000" minimum="500" maximum="5000" stepSize="500" 
            change="onDurationChange( event );"/>
        
    </mx:Panel>    
</mx:Application>