<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="nl.wietseveenstra.extensions.panel.*"
    xmlns:fx="nl.wietseveenstra.managers.*"
    layout="absolute" backgroundGradientColors="[#9DB3BE, #9DB3BE]" viewSourceURL="srcview/index.html">
    
    <mx:Style source="assets/css/styles.css"/>
    
    <mx:Label text="ReflectionManager v1.0 explorer" right="10" top="10" 
        fontSize="18" fontWeight="bold" fontFamily="Arial" color="#ffffff"/>
    
    <mx:Canvas id="horizon" width="100%" bottom="0" top="282" backgroundColor="#435C69"/>
    
    <mx:VBox id="image01" x="100" y="100" width="530" height="347"
        verticalAlign="top" borderStyle="solid">
        <mx:Canvas backgroundColor="#2B3237" width="100%" height="100%">
            <mx:Image source="http://www.wietseveenstra.nl/files/images/blog/SuperPanelv1_5.png" x="139" y="50"/>
            <mx:Label x="10" y="249" text="Textarea:" fontSize="16"/>
            <mx:TextArea x="10" y="275" width="508" height="22" color="#888888" fontSize="12"
                text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin velit."/>
            <mx:Button x="10" y="305" label="Button 01" width="100" height="30"/>
            <mx:Button x="141" y="305" label="Button 02" width="100" height="30"/>
            <mx:Button x="279" y="305" label="Button 03" width="100" height="30"/>
            <mx:Button x="418" y="305" label="Button 04" width="100" height="30"/>            
            <mx:Label x="216.5" y="21" text="SuperPanel v1.5"/>
        </mx:Canvas>
    </mx:VBox>
        
    <fx:ReflectionManager id="reflection" target="{image01}"
        height="{image01.height / 100 * this.distance.value}"
        fadeFrom="{this.alphaFrom.value}" fadeTo="{this.alphaTo.value}"/>
    
    <mx:Panel id="controlPanel" title="Controlpanel"
        width="240" height="250" right="20" bottom="20">
        <mx:Spacer height="10"/>
        <mx:HBox width="100%" height="199" horizontalGap="5">
            <mx:Spacer width="5%"/>
            <mx:Canvas width="30%" backgroundColor="#EFEFEF"
                borderStyle="solid" borderColor="#666666">
                <mx:Label text="Alpha from" horizontalCenter="0" fontWeight="bold" y="2"/>
                <mx:VSlider id="alphaFrom" value="0.3" liveDragging="true" horizontalCenter="0"
                    labels="[0, 1]" allowTrackClick="true"
                    minimum="0" maximum="1" showTrackHighlight="true" y="30"
                    change="this.reflection.clearBMData()"/>
            </mx:Canvas>
            <mx:Canvas width="30%" backgroundColor="#EFEFEF" 
                borderStyle="solid" borderColor="#666666">
                <mx:Label horizontalCenter="0" text="Alpha to" fontWeight="bold" y="2"/>
                <mx:VSlider id="alphaTo" value="0" liveDragging="true" horizontalCenter="0"
                    labels="[0, 1]" allowTrackClick="true"
                    minimum="0" maximum="1" showTrackHighlight="true" y="30"
                    change="this.reflection.clearBMData()"/>
            </mx:Canvas>
            <mx:Canvas width="30%" backgroundColor="#EFEFEF"
                borderStyle="solid" borderColor="#666666">
                <mx:Label horizontalCenter="0" text="Distance" fontWeight="bold" y="2"/>
                <mx:VSlider id="distance" value="30" liveDragging="true" horizontalCenter="0"
                    labels="[0%, 50%, 100%]" allowTrackClick="true" snapInterval="1"
                    minimum="1" maximum="100" showTrackHighlight="true" y="30"
                    change="this.reflection.clearBMData()"/>
            </mx:Canvas>
        </mx:HBox>
    </mx:Panel>
        
</mx:Application>