<?xml version="1.0" encoding="utf-8"?>
<s:Application    xmlns:fx            ="http://ns.adobe.com/mxml/2009" 
                xmlns:s                ="library://ns.adobe.com/flex/spark" 
                xmlns:mx            ="library://ns.adobe.com/flex/mx"
                xmlns:components    ="creacog.spark.components.*"
                xmlns:ui            ="ui.*"
                minWidth            ="450"
                minHeight            ="300"
                width                ="100%"
                height                ="100%"
                applicationComplete    ="application_applicationCompleteHandler( event )"
                viewSourceURL        ="srcview/index2.html">
    <!---
    <p>
        Flex 4 - Demo component and skin facilitating overlay constrained to a VideoDisplay's view
    </p><p>
        http://www.creative-cognition.co.uk    <br/>
        http://blog.creacog.co.uk
    </p><p>
        License: The MIT License: 
            <a href="http://www.opensource.org/licenses/mit-license.php">
                http://www.opensource.org/licenses/mit-license.php
            </a>
    </p>
    -->
    
    <fx:Style>
        @namespace s            "library://ns.adobe.com/flex/spark";
        @namespace mx            "library://ns.adobe.com/flex/mx";
        @namespace components    "creacog.spark.components.*";
        @namespace ui            "ui.*";
        
        s|Application
        { 
            background-color : #DEE6EC;
        }

        ui|OverlaidVideoContainerPopup
        {
            skin-class            : ClassReference( "skins.NoCloseResizeableTitleWindowSkin" );
            background-color    : #000000;
        }
        
        components|VideoDisplayOverlayContainer
        {
            skin-class    :ClassReference( "creacog.spark.skins.VideoDisplayOverlayContainerSkin" );
        }
    </fx:Style>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    
    <ui:VideoControls
        id        ="videoControls">
    </ui:VideoControls>
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            
            import ui.OverlaidVideoContainerPopup;

            private var videoPopup :OverlaidVideoContainerPopup;
            
            protected function application_applicationCompleteHandler(event:FlexEvent):void
            {
                //
                videoPopup = new OverlaidVideoContainerPopup();
                
                videoPopup.title        = "Spark VideoDisplay";
                videoPopup.x            = 40;
                videoPopup.y            = 40;
                videoPopup.width        = 120;
                videoPopup.height        = 120;
                videoPopup.minWidth        = 100;
                videoPopup.minHeight    = 100;
                
                PopUpManager.addPopUp( videoPopup, this );
                
                videoControls.videoDisplay    = videoPopup.videoDisplayContainer.videoDisplay;
            }
            
        ]]>
    </fx:Script>
</s:Application>