<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            
            private var _currentEffect:WaterfallEffect;
            
            private var _sourceBmp:Bitmap;
            private var _canvasBMP:Bitmap;
            
            [Embed(source="resources/astro.jpg")]
            private var Astro:Class;
            
            [Embed(source="resources/flow.jpg")]
            private var Flow:Class;
            
            [Embed(source="resources/gears.png")]
            private var GearsOfWar:Class;
            
            [Embed(source="resources/indy.jpg")]
            private var Indy:Class;
            
            [Embed(source="resources/flames.png")]
            private var Flames:Class;

            [Embed(source="resources/monkey.jpg")]
            private var Monkey:Class;
            
            private function onCreationComplete ():void {
                loadImage();
            }
            
            private function loadImage ():void {
                if (_sourceBmp != null) {
                    _canvas.rawChildren.removeChild(_sourceBmp);
                    _sourceBmp = null;
                }
                
                if (_canvasBMP != null) {
                    _canvas.rawChildren.removeChild(_canvasBMP);
                    
                    if (_canvasBMP.bitmapData != null) {
                        _canvasBMP.bitmapData.dispose();
                    }
                    
                    _canvasBMP = null;
                }
                
                // cheesy hack, but I just want to show this in the example
                if (_imageName.selectedItem != "This Panel") {
                    switch (_imageName.selectedItem) {
                        case "Astro":
                            _sourceBmp = new Astro();
                            break;
                        case "Flow":
                            _sourceBmp = new Flow();
                            break;
                        case "Gears of War":
                            _sourceBmp = new GearsOfWar();
                            break;
                        case "Indy":
                            _sourceBmp = new Indy();
                            break;
                        case "Flames":
                            _sourceBmp = new Flames();
                            break;
                    }
                    
                    _canvas.rawChildren.addChild(_sourceBmp);
                    
                    // now put a bitmapData on the screen we can draw too
                    _canvasBMP = new Bitmap ();
                    _canvasBMP.bitmapData = new BitmapData (_sourceBmp.width, _sourceBmp.height, true, 0x00000000);
                    _canvas.rawChildren.addChild(_canvasBMP);
                } else {
                    // now put a bitmapData on the screen we can draw too
                    _canvasBMP = new Bitmap ();
                    _canvasBMP.bitmapData = new BitmapData (_optionsPanel.width, _optionsPanel.height, true, 0x00000000);
                    _canvas.rawChildren.addChild(_canvasBMP);
                }
            }
            
            private function applyEffect ():void {
                // hide the original image from the stage
                
                // now get ready to draw
                if (_imageName.selectedItem != "This Panel") {
                    _sourceBmp.alpha = 0;
                    _currentEffect = new WaterfallEffect (_sourceBmp, _canvasBMP.bitmapData);
                } else {
                    // draw the panel
                    _currentEffect = new WaterfallEffect (_optionsPanel, _canvasBMP.bitmapData);
                }
                _currentEffect.speed = _speed.value;
                _currentEffect.addEventListener(Event.ACTIVATE, onEffectStart);
                _currentEffect.addEventListener(Event.COMPLETE, onEffectComplete);
                                
                _currentEffect.begin();
            }
            
            private function onEffectStart (e:Event):void {
                _optionsPanel.enabled = false;
            }
            private function onEffectComplete (e:Event):void {
                _optionsPanel.enabled = true;
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="_canvas" width="100%" height="100%" />
    <mx:Panel id="_optionsPanel" title="Options" layout="vertical">
        <mx:Form>
            <mx:FormItem label="Image">
                <mx:ComboBox id="_imageName" change="loadImage()" rowCount="6" >
                    <mx:dataProvider>
                        <mx:String>Astro</mx:String>
                        <mx:String>Flames</mx:String>
                        <mx:String>Flow</mx:String>
                        <mx:String>Gears of War</mx:String>
                        <mx:String>Indy</mx:String>
                        <mx:String>This Panel</mx:String>
                    </mx:dataProvider>
                </mx:ComboBox>                
            </mx:FormItem>
            <mx:FormItem label="Speed">
                <mx:NumericStepper id="_speed" minimum="1" maximum="1000" value="15" />
            </mx:FormItem>
        </mx:Form>
        
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="_startFill" label="GO!" click="applyEffect()" />
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>