<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:sbh="com.sebastiaanholtrop.reflection.*" 
    layout="absolute" 
    creationComplete="creationCompleteHandler();" 
    backgroundColor="#000000" viewSourceURL="srcview/index.html">
    
    
    
    <!-- 
    ///////////////////////////////////////////////////////////////
    Here's the code example 
    ///////////////////////////////////////////////////////////////
    -->
    
    <mx:Script>
        <![CDATA[
            import com.sebastiaanholtrop.reflection.Reflect;
            
            private var imageReflection:Reflect;
            
            private function creationCompleteHandler():void {        
                this.imageReflection = new Reflect(this.image1 as Sprite, 0.4, 100, true, Reflect.BOTTOM, 0);
            }
        ]]>
    </mx:Script>
    
    <mx:Image id="image1" x="62" y="22" source="@Embed('img/ourlovetoadmire.jpg')"  width="218" height="218"/>
    
    <mx:Panel id="controlPanel1" label="Controls" horizontalGap="10" x="62" y="349">
        <mx:HBox>
            <mx:Label text="alpha:" width="100"/>
            <mx:HSlider id="alphaSlider1" liveDragging="true" value="0.4" minimum="0" maximum="1" 
                change="this.imageReflection.alpha = this.alphaSlider1.value" />
        </mx:HBox>
        <mx:HBox>
            <mx:Label text="ratio:" width="100"/>
            <mx:HSlider id="ratioSlider1" liveDragging="true" value="100" minimum="0" maximum="300" 
                change="this.imageReflection.ratio = this.ratioSlider1.value" />
        </mx:HBox>
        <mx:HBox>
            <mx:Label text="distance:" width="100"/>
            <mx:HSlider id="distanceSlider1" liveDragging="true" value="0" minimum="0" maximum="100" 
                change="this.imageReflection.distance = this.distanceSlider1.value" />
        </mx:HBox>
    </mx:Panel>
    
    
    <!-- 
    ///////////////////////////////////////////////////////////////
    Here's the mxml example 
    ///////////////////////////////////////////////////////////////
    -->
    
    <mx:VideoDisplay 
        id="videoDisplay" complete="this.playButton.visible = true"
        source="img/TFE_intro_16x9.flv" x="400" y="60" 
        width="320" height="180"
        autoPlay="false" autoRewind="true"  />
    
    <mx:Button id="playButton" 
        label="Play" 
        click="this.playButton.visible = false; this.videoDisplay.play()" 
        alpha="0.7" x="534" y="140"/>
    
    <sbh:FlexReflect 
        alpha="{this.alphaSlider2.value}" 
        ratio="{this.ratioSlider2.value}"
        distance="{this.distanceSlider2.value}"
        updateTime="10" 
        id="videoReflection" 
        target="{this.videoDisplay}" />
    
    <mx:Panel id="controlPanel2" label="Controls" horizontalGap="10" x="400" y="349">
        <mx:HBox>
            <mx:Label text="alpha:" width="100"/>
            <mx:HSlider id="alphaSlider2" liveDragging="true" value="0.5" minimum="0" maximum="1" />
        </mx:HBox>
        <mx:HBox>
            <mx:Label text="ratio:" width="100"/>
            <mx:HSlider id="ratioSlider2" liveDragging="true" value="130" minimum="0" maximum="200" />
        </mx:HBox>
        <mx:HBox>
            <mx:Label text="distance:" width="100"/>
            <mx:HSlider id="distanceSlider2" liveDragging="true" value="0" minimum="0" maximum="100" />
        </mx:HBox>
    </mx:Panel>
    
</mx:Application>