<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:reflector="com.rictus.reflector.*"
          xmlns="*">
          
          <mx:Style>
                  
                  Application
                  {
                          background-gradient-colors: #000000, #000000;
                          padding-bottom: 2;
                          padding-left: 2;
                          padding-right: 2;
                          padding-top: 2;
                  }
                  
                  List
                  {
                          font-size: 30;
                          color: #FFFFFF;
                          background-alpha: 0;
                          border-style: none;
                          font-family: myFontFamily;
                          roll-over-color: #990000;
                          selection-color: #0099CC;
                  }
                  
                  black-face
                  {
                      src:local("Arial Black");
                      fontFamily: myFontFamily;
                      flashType: true;
                  }
                  
          </mx:Style>
          
          <mx:Script>
                  <![CDATA[
                          
                          import mx.controls.List;
                          
                          [Bindable]
                          private var videoPath:String;
                          
                  ]]>
          </mx:Script>
          
          <mx:states>
                  <mx:State name="showTrailer">
                          <mx:RemoveChild target="{mainView}" />
                          <mx:AddChild>
                                  <mx:VBox id="fullScreenVideo" width="100%" height="100%">
                                          <mx:VideoDisplay id="fullScreenVideoDisplay" width="100%" height="100%"
                                                  source="{videoPath}" doubleClickEnabled="true"
                                                  doubleClick="this.currentState = '';" />
                                  </mx:VBox>
                          </mx:AddChild>
                          <mx:SetProperty target="{videoDisplay}" name="source" value="null" />
                  </mx:State>
          </mx:states>
          
          <mx:transitions>
                  <mx:Transition fromState="*" toState="showTrailer">
                          <mx:Sequence targets="{[mainView, fullScreenVideo]}">
                                  <mx:Fade target="{mainView}" alphaFrom="1" alphaTo="0" duration="1000" />
                                  <mx:RemoveChildAction />
                                  <mx:AddChildAction />
                                  <mx:Fade target="{fullScreenVideo}" alphaFrom="0" alphaTo="1" duration="500" />
                          </mx:Sequence>
                  </mx:Transition>
                  
                  <mx:Transition fromState="showTrailer" toState="*">
                          <mx:Sequence targets="{[mainView, fullScreenVideo]}">
                                  <mx:Fade target="{fullScreenVideo}" alphaFrom="1" alphaTo="0" duration="500" />
                                  <mx:RemoveChildAction />
                                  <mx:AddChildAction />
                                  <mx:Fade target="{mainView}" alphaFrom="0" alphaTo="1" duration="1000" />
                          </mx:Sequence>
                  </mx:Transition>
          </mx:transitions>
          
          <mx:VBox id="mainView" width="100%" height="100%" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
                  horizontalAlign="center">
                  <mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle">
                          <mx:Image source="local/assets/flex/images/Movie.png" />
                          <mx:Label text="Trailers" fontFamily="myFontFamily" fontSize="50" color="#FFFFFF" />
                  </mx:HBox>
                  <mx:HRule strokeColor="#FFFFFF" strokeWidth="1" width="100%" />
                  <mx:Spacer height="10" />
                  
                  <mx:HBox width="100%" height="100%" paddingLeft="10" paddingRight="10" horizontalGap="10">
                          
                          <mx:VBox width="40%" height="100%" verticalAlign="middle" verticalGap="0">
                                  <mx:VideoDisplay id="videoDisplay" width="509" height="211" />
                                  <professional_flex_code_23_Reflection id="reflection" target="{videoDisplay}" width="100%" height="211" />
                          </mx:VBox>
                          
                          <mx:List id="myVideoList" width="60%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" rowHeight="80"
                                  change="videoDisplay.source = 'trailers/' + List(event.currentTarget).selectedItem.data"
                                  doubleClickEnabled="true" doubleClick="videoPath = 'trailers/' + List(event.currentTarget).selectedItem.data; this.currentState = 'showTrailer'">
                                  <mx:itemRenderer>
                                          <mx:Component>
                                                  <mx:VBox verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                                                          <mx:Label text="{data.label}" />
                                                  </mx:VBox>
                                          </mx:Component>
                                  </mx:itemRenderer>
                                  <mx:dataProvider>
                                          <mx:Array>
                                                  <mx:Object label="Blood Diamond" data="../assets/clips/tube/123.flv" />
                                                  <mx:Object label="Deja Vu" data="../assets/clips/tube/123.flv" />
                                                  <mx:Object label="Fantastic 4 - Rise of the Silver Surfer" data="../assets/clips/tube/123.flv" />
                                                  <mx:Object label="Ratatouille" data="../assets/clips/tube/123.flv" />
                                                  <mx:Object label="Teenage Mutant Ninja Turtles" data="../assets/clips/tube/123.flv" />
                                                  <mx:Object label="Spiderman 3" data="../assets/clips/tube/123.flv" />
                                          </mx:Array>
                                  </mx:dataProvider>
                          </mx:List>
                  </mx:HBox>
          </mx:VBox>
          
  </mx:Application>