<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx            ="http://www.adobe.com/2006/mxml"
    viewSourceURL        ="srcview/index2.html"
    xmlns:ui            ="ui.*"
    layout                ="absolute"
    width                ="100%"
    height                ="100%"
    applicationComplete    ="handleApplicationComplete()"
 >
    <!---
        <p>
            Sample 2 - demonstrates problem in attempting to overlay video having 
            found the videoPlayer instance and responding to resize events
        </p><p>
            Copright © 2009 creative-cognition ltd
            http://www.creative-cognition.co.uk
            http://blog.creacog.co.uk
        </p><p>
            License: The MIT License: http://www.opensource.org/licenses/mit-license.php
        </p>
    -->
    
    <ui:DragablePanel
        id                        ="displayContainer"
        title                    ="VideoDisplay Sample 2"
        layout                    ="absolute"
        x                        ="20"
        y                        ="20"
        width                    ="60%"
        height                    ="60%"
        minWidth                ="100"
        minHeight                ="100"
        resizable                ="true"
        horizontalScrollPolicy    ="off"
        verticalScrollPolicy    ="off"
    >
        <!-- FILL THE CONTAINER WITH THE VIDEODISPLAY -->
        <mx:VideoDisplay
            id            ="videoDisplay"
            autoRewind    ="true"
            autoPlay    ="false"
            resize        ="positionOverlay()"
            width        ="100%"
            height        ="100%"
            source        ="VideoSampleForFlex.mp4"
        />
        
        <!-- 2ND ATTEMPT TO OVERLAY THE VIDEO RELATIVE TO THE TOP RIGHT CORNER -->
        <!-- WE ARE NOW UPDATING X AND Y WITH EACH RESIZE EVENT FROM THE VIDEO PLAYER -->
        <mx:Image
            id            ="overlayImage"
            source        ="@Embed('assets/overlayShape.png')"
        />
        
    </ui:DragablePanel>
    
    <ui:VideoControls
        bottom            ="0"
        horizontalCenter="0"
        videoDisplay    ="{videoDisplay}"
    />
    
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            
            protected function handleApplicationComplete():void
            {
                //ENSURE THE OVERLAY IS PROPERLY POSITIONED PRIOR TO ANY RESIZING
                positionOverlay();
            }
            
            protected function positionOverlay():void
            {
                //'MANUALLY' POSITION THE OVERLAY BASED ON THE VideoDisplay's videoPlayer INSTANCE
                
                // 10 PX IN FROM THE RIGHT EDGE
                overlayImage.x =     videoDisplay.mx_internal::videoPlayer.x        +
                                    videoDisplay.mx_internal::videoPlayer.width    -
                                    overlayImage.width                            -
                                    10;

                // 10 PX DOWN FROM THE TOP EDGE
                overlayImage.y =     videoDisplay.mx_internal::videoPlayer.y    + 10;
            }

        ]]>
    </mx:Script>
    
</mx:Application>