<?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"
    width                ="100%"
    height                ="100%"
    minHeight            ="300"
    applicationComplete    ="application_applicationCompleteHandler( event )"
    viewSourceURL        ="srcview/index1.html">
    <!---
    <p>
        Flex 4 - Measuring the VideoDisplay view rectangle
    </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|VideoContainerPopup
        {
            skin-class            : ClassReference( "skins.NoCloseResizeableTitleWindowSkin" );
            background-color    : #000000;
        }
    </fx:Style>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    
    
    
    <ui:VideoControls
        id        ="videoControls">
    </ui:VideoControls>
    
    <s:Group    >
        <mx:Grid>
            <mx:GridRow>
                <mx:GridItem
                    colSpan        ="4">
                    <s:Label
                        text    ="A: VideoDisplay" />
                </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow>
                <mx:GridItem
                    colSpan        ="4">
                    <s:Label
                        text    ="B: VideoPlayer on RESIZE (videoDisplay.mx_internal::videoPlayer.view)" />
                </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow>
                <mx:GridItem
                    colSpan        ="4">
                    <s:Label
                        text    ="C: VideoPlayer on UPDATE_COMPLETE (videoDisplay.mx_internal::videoPlayer.view)" />
                </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow>
                <mx:GridItem width    ="50">
                </mx:GridItem>
                <mx:GridItem width    ="50">
                    <s:Label text    ="A" />
                </mx:GridItem>
                <mx:GridItem width    ="50">
                    <s:Label text    ="B" />
                </mx:GridItem>
                <mx:GridItem width    ="50">
                    <s:Label text    ="C" />
                </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow>
                <mx:GridItem>
                    <s:Label text    ="width" />
                </mx:GridItem>
                <mx:GridItem>
                    <s:Label id        ="videoDisplayWidth" />
                </mx:GridItem>
                <mx:GridItem>
                    <s:Label id        ="viewWidth" />
                </mx:GridItem>
                <mx:GridItem
                    id                ="cWidth"
                    backgroundColor    ="#FF0000"
                    backgroundAlpha    ="0">
                    <s:Label id        ="updateCompleteViewWidth" />
                </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow>
                <mx:GridItem>
                    <s:Label text    ="height" />
                </mx:GridItem>
                <mx:GridItem>
                    <s:Label id        ="videoDisplayHeight" />
                </mx:GridItem>
                <mx:GridItem>
                    <s:Label id        ="viewHeight" />
                </mx:GridItem>
                <mx:GridItem
                    id                ="cHeight"
                    backgroundColor    ="#FF0000"
                    backgroundAlpha    ="0">
                    <s:Label id        ="updateCompleteViewHeight" />
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </s:Group>
    
    <fx:Script>
        <![CDATA[
            import mx.core.mx_internal;
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            import mx.managers.PopUpManager;
            
            import org.osmf.events.MediaPlayerStateChangeEvent;
            import org.osmf.media.MediaPlayerState;
            
            import ui.VideoContainerPopup;

            private var videoPopup :VideoContainerPopup;
            
            protected function application_applicationCompleteHandler(event:FlexEvent):void
            {
                //
                videoPopup = new VideoContainerPopup();
                
                videoPopup.title        = "Spark VideoDisplay";
                videoPopup.x            = 40;
                videoPopup.y            = 130;
                videoPopup.width        = 120;
                videoPopup.height        = 120;
                videoPopup.minWidth        = 100;
                videoPopup.minHeight    = 100;
                
                PopUpManager.addPopUp( videoPopup, this );
                
                videoControls.videoDisplay    = videoPopup.videoDisplay;
                
                videoPopup.videoDisplay.addEventListener(
                    MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE,
                    videoDisplay_mediaPlayerStateChangeHandler );

                videoPopup.videoDisplay.addEventListener(
                    ResizeEvent.RESIZE,
                    videoDisplay_resizeHandler );
                
                videoPopup.videoDisplay.addEventListener(
                    FlexEvent.UPDATE_COMPLETE,
                    videoDisplay_updateCompleteHandler );
            }
            
            protected function videoDisplay_mediaPlayerStateChangeHandler( e:MediaPlayerStateChangeEvent ):void
            {
                
                if(    e.state == MediaPlayerState.PAUSED ||
                    e.state == MediaPlayerState.PLAYING ||
                    e.state == MediaPlayerState.READY )
                {
                    viewWidth.text            = videoPopup.videoDisplay.mx_internal::videoPlayer.view.width;
                    viewHeight.text            = videoPopup.videoDisplay.mx_internal::videoPlayer.view.height;
                
                    highlightDifferences();
                    
                    // ONCE WE'VE DISPLAYED THE VIDEO FOR THE FIRST TIME, NO FURTHER NEED OF THIS METHOD
                    videoPopup.videoDisplay.removeEventListener(    MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE,
                                                                        videoDisplay_mediaPlayerStateChangeHandler );
                }
            }
            
            protected function videoDisplay_resizeHandler( e:ResizeEvent ):void
            {
                videoDisplayWidth.text    = videoPopup.videoDisplay.width.toString();
                videoDisplayHeight.text    = videoPopup.videoDisplay.height.toString();
                
                viewWidth.text            = videoPopup.videoDisplay.mx_internal::videoPlayer.view.width;
                viewHeight.text            = videoPopup.videoDisplay.mx_internal::videoPlayer.view.height;
            }
            
            protected function videoDisplay_updateCompleteHandler( e:FlexEvent ):void
            {
                updateCompleteViewWidth.text    = videoPopup.videoDisplay.mx_internal::videoPlayer.view.width;
                updateCompleteViewHeight.text    = videoPopup.videoDisplay.mx_internal::videoPlayer.view.height;
                
                highlightDifferences();
            }
            
            protected function highlightDifferences():void
            {
                //COLOUR CELLS IN C IF DIFFERENT TO B
                cWidth.setStyle(        "backgroundAlpha",
                                        viewWidth.text == updateCompleteViewWidth.text ? 0 : 0.20 );
                
                cHeight.setStyle(        "backgroundAlpha",
                                        viewHeight.text == updateCompleteViewHeight.text ? 0 : 0.20 );
            }
        ]]>
    </fx:Script>
</s:Application>