<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="com.fusiox.ui.*" xmlns="*" layout="absolute">
    <mx:Style>
        @font-face {
            src:url("verdana.ttf");
            font-family: myFont;
        }
        
        FormItem, TextArea {
            font-family: myFont;
            font-weight: normal;
        }
    </mx:Style>
    <mx:VBox width="100%" height="100%">
        <mx:VBox id="myStage" width="100%" height="80%" verticalAlign="bottom" horizontalAlign="center">
            
            <mx:Panel id="explorer" title="Reflection Explorer" width="600" height="300" horizontalAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="0">
                <mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="left">
                    <mx:Form>
                        <mx:FormItem label="fadeFrom" direction="horizontal">
                            <mx:NumericStepper stepSize="0.1" minimum="0" maximum="1" value="0.3" change="reflection.fadeFrom=event.target.value" />
                        </mx:FormItem>
                        <mx:FormItem label="fadeTo" direction="horizontal">
                            <mx:NumericStepper stepSize="0.1" minimum="0" maximum="1" value="0" change="reflection.fadeTo=event.target.value" />
                        </mx:FormItem>
                        <mx:FormItem label="fadeCenter" direction="horizontal">
                            <mx:NumericStepper stepSize="0.1" minimum="0" maximum="1" value="0.5" change="reflection.fadeCenter=event.target.value" />
                        </mx:FormItem>
                        <mx:FormItem label="skewX" direction="horizontal">
                            <mx:NumericStepper stepSize="0.1" minimum="-5" maximum="5" value="0" change="reflection.skewX=event.target.value" />
                        </mx:FormItem>
                        <mx:FormItem label="scale" direction="horizontal">
                            <mx:NumericStepper stepSize="0.1" minimum="0" maximum="1" value="1" change="reflection.scale=event.target.value" />
                        </mx:FormItem>
                    </mx:Form>                    
                </mx:HBox>
            </mx:Panel>
            
        </mx:VBox>
        <fx:Reflection id="reflection" target="{myStage}" enterFrame="event.target.drawReflection()" width="100%" height="20%" />
    </mx:VBox>
</mx:Application>