<?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
          xmlns:ximpel="net.ximpel.player.*"
          layout="vertical" creationComplete="init()" width="820" height="610"
          paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0" 
          backgroundColor="#000000" backgroundImage="" borderStyle="none" 
          borderColor="0xFF0000" horizontalScrollPolicy="off" verticalScrollPolicy="off"
          horizontalAlign="center" verticalAlign="middle">
          
          <mx:Style source="style/darkroom.css"/>
          
      <mx:Script>
          <![CDATA[
                  
                          import net.ximpel.events.*;
                          import mx.managers.SystemManager;
                          import mx.events.*;
                          
                          [Bindable]
                          private var nineArray:Array = [1,2,3,4,5,6,7,8,9];
                          
                          private var ximpelPlayerAlreadyAdded:Boolean;
                          private static const myWidth:Number = 240;
                          private static const myHeight:Number = 180;
                          private var zoomedIn:Boolean = false;
                          private var ximpelPlayerHasStopped:Boolean = false;
                          private var mouseHideTimer:Timer;
                          private var clickedOutsideBox:Boolean = false;
  
                          private function init():void {
                                  ximpelPlayerAlreadyAdded = false;
  
                                  systemManager.stage.scaleMode = "showAll";
                                  systemManager.stage.align = StageAlign.TOP;
                                  systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenRedraw);
                                  myXimpelPlayer.addEventListener("complete",removeOnComplete);
                                  myXimpelPlayer.addEventListener("subjectChanged",changeFieldOnSubjectChange);
                                  myXimpelPlayer.addEventListener("rollOver",doZoom);
                                  myOutsideBox1.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  myOutsideBox2.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  myOutsideBox3.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  myOutsideBox4.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  
                                  systemManager.stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
                                  mouseHideTimer = new Timer(2000,1);
                                  mouseHideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, hideMouseCursor);
                                  
                                  for (var i:int = 0; i < nineArray.length; i++) {
                                          myClickBox[i].addEventListener(MouseEvent.CLICK,handleClick);
                                  }
                                  
                                  var context:ContextMenu = new ContextMenu();
                                  context.hideBuiltInItems();
                                  var item:ContextMenuItem = new ContextMenuItem("Toggle fullscreen");
                                  item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onContextMenuItemSelected);
                                  context.customItems.push(item);
                                  parent.contextMenu = context;
                                  contextMenu = context;
                          }
                          
                          public function onContextMenuItemSelected(myContextMenuEvent:ContextMenuEvent):void {
                                  if(myContextMenuEvent.currentTarget.caption == "Toggle fullscreen"){
                                          toggleFullScreen();
                                  }
                          }
                          
                          private function handleMouseMove(event:MouseEvent):void {
                                  mouseHideTimer.reset();
                                  Mouse.show();
                                  if(zoomedIn){
                                          mouseHideTimer.start();
                                  }
                          }
                          
                          private function hideMouseCursor(event:TimerEvent):void {
                                  Mouse.hide();
                                  mouseHideTimer.reset();
                          }
                          
                          private function fullScreenRedraw(event:FullScreenEvent):void {
                              if (event.fullScreen) {
                                          systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
                                          if ((systemManager.stage.stageWidth / systemManager.stage.stageHeight) < 
                                                  (Application.application.width / Application.application.height)){
                                                  systemManager.stage.align = StageAlign.LEFT;
                                          }else {
                                                  systemManager.stage.align = StageAlign.TOP;
                                          }
                              }else {
                                          systemManager.stage.displayState = StageDisplayState.NORMAL;
                                          systemManager.stage.align = StageAlign.TOP;
                              }
                          }
                          
              private function toggleFullScreen():void {
                  try {
                      switch (systemManager.stage.displayState) {
                          case StageDisplayState.FULL_SCREEN:
                              // If already in full screen mode, switch to normal mode
                              systemManager.stage.displayState = StageDisplayState.NORMAL;
                              break;
                          default:
                              // If not in full screen mode, switch to full screen mode
                              systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
                              break;
                      }
                  } catch (err:SecurityError) {
                      // ignore
                  }
              }
                          
                          private function onZoomEffectEnd(event:EffectEvent):void {
                                  zoomAll.removeEventListener(EffectEvent.EFFECT_END,onZoomEffectEnd);
                                  zoomedIn = false;
                                  mouseHideTimer.reset();
                                  if (ximpelPlayerHasStopped) {
                                          myCanvas.removeChild(myXimpelPlayer);
                                          myXimpelPlayer.addEventListener("rollOver",doZoom);
                                          ximpelPlayerHasStopped = false;
                                  }
                                  myOutsideBox1.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  myOutsideBox2.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  myOutsideBox3.addEventListener(MouseEvent.CLICK,doZoomOut);
                                  myOutsideBox4.addEventListener(MouseEvent.CLICK,doZoomOut);
                          }
                          
                          private function removeOnComplete(event:XimpelEvent):void {
                                  if (zoomAll.isPlaying) {
                                          zoomAll.removeEventListener(EffectEvent.EFFECT_END,onZoomEffectEnd);
                                          zoomAll.end();
                                  }
                                  if (zoomedIn){
                                          myOutsideBox1.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                          myOutsideBox2.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                          myOutsideBox3.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                          myOutsideBox4.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                          myXimpelPlayer.removeEventListener("rollOver",doZoom);
                                          zoomAll.addEventListener(EffectEvent.EFFECT_END,onZoomEffectEnd);
                                          ximpelPlayerHasStopped = true;
                                          zoomAll.play([myXimpelPlayer],true);
                                  }else {
                                          myCanvas.removeChild(myXimpelPlayer);
                                  }
                          }
                          
                          private function changeFieldOnSubjectChange(event:SubjectEvent):void {
                                  if (ximpelPlayerAlreadyAdded) {
                                          ximpelPlayerAlreadyAdded = false;
                                          return;
                                  }
                                  var myIndex:int = int(myXimpelPlayer.playlist.subject.(@id == event.subjectId).childIndex());
                                  addXimpelPlayer(myIndex\%nineArray.length);
                          }
                          
                          private function handleClick(event:MouseEvent):void {
                                  if (zoomedIn) return;
                                  var clickId:String = String(event.currentTarget.parent.label);
                                  addXimpelPlayer(int(event.currentTarget.parent.label)-1);
                                  ximpelPlayerAlreadyAdded = true;
                                  var myId:String = String(myXimpelPlayer.playlist.subject[int(clickId)-1].@id);
                                  myXimpelPlayer.goToSubjectByIdAndPlay(myId);
                          }
                          
                          private function addXimpelPlayer(playerIndex:int):void {
                                  var row:int = playerIndex % 3;
                                  var col:int = int(playerIndex / 3);
                                  if (!zoomedIn) {
                                          myXimpelPlayer.x = row * myWidth;
                                          myXimpelPlayer.y = col * myHeight;
                                          zoomAll.originX = row * (myXimpelPlayer.width/2);
                                          zoomAll.originY = col * (myXimpelPlayer.height/2);
                                          myCanvas.addChild(myXimpelPlayer);
                                  }
                          }
                          
              private function doZoom(event:MouseEvent):void {
                                  if (!zoomedIn) {
                                          zoomAll.end();
                                          zoomAll.play([myXimpelPlayer]);
                                          zoomedIn = true;
                                          mouseHideTimer.start();
                                  }
              }
                          
                          private function doZoomOut(event:MouseEvent):void {
                                  if (myCanvas.contains(myXimpelPlayer) && !ximpelPlayerHasStopped){
                                          if (zoomedIn) {
                                                  myOutsideBox1.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                                  myOutsideBox2.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                                  myOutsideBox3.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                                  myOutsideBox4.removeEventListener(MouseEvent.CLICK,doZoomOut);
                                                  zoomAll.end();
                                                  zoomAll.addEventListener(EffectEvent.EFFECT_END, onZoomEffectEnd);
                                                  zoomAll.play([myXimpelPlayer],true);
                                          }else {
                                                  zoomAll.end();
                                                  zoomAll.play([myXimpelPlayer]);
                                                  zoomedIn = true;
                                                  mouseHideTimer.start();
                                          }
                                  }
                          }
                  
          ]]>
      </mx:Script>
          <mx:Zoom id="zoomAll" zoomWidthTo="3" zoomHeightTo="3" zoomWidthFrom="1" zoomHeightFrom="1"/>
          <mx:VBox width="{width}" height="{height}" borderStyle="solid" borderColor="0xFFFFFF"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalGap="0" verticalGap="0"
                  horizontalAlign="center" verticalAlign="middle">
                  <mx:Box id="myOutsideBox1" width="960" height="20" horizontalAlign="center" verticalAlign="middle"
                          horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalGap="0" verticalGap="0" paddingTop="12">
                          <mx:Label fontSize="20" textAlign="center" text=".CREATE  TV" horizontalCenter="0"/>
                  </mx:Box>
                  <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalGap="0" verticalGap="0">
                          <mx:Box id="myOutsideBox2" width="20" height="540" horizontalScrollPolicy="off" verticalScrollPolicy="off" 
                                  horizontalGap="0" verticalGap="0"/>
                          <mx:Canvas id="myCanvas" width="720" height="540" borderStyle="solid"
                                  horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                  <ximpel:XimpelPlayer id="myXimpelPlayer" config="tv-create.xml"
                                          width="{myWidth}" height="{myHeight}"/>
                                  <mx:Tile direction="horizontal"
                                          horizontalGap="0" verticalGap="0" x="0" y="0"
                                          paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0">
                                          <mx:Repeater id="rp" dataProvider="{nineArray}">
                                                  <mx:Canvas id="myField" label="{rp.currentItem}" width="{myWidth}" height="{myHeight}" backgroundSize="100%"
                                                          backgroundImage="images/create/{rp.currentItem}.jpg" backgroundAlpha="0.5">
                                                          <mx:Box id="myClickBox" width="100%" height="100%" borderStyle="solid"
                                                                  horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalGap="0" verticalGap="0">
                                                                  <mx:Box width="100%" height="100%"
                                                                          horizontalCenter="0" verticalCenter="0"
                                                                          horizontalAlign="center" verticalAlign="middle">
                                                                          <mx:Text text="{rp.currentItem}" fontSize="50" 
                                                                                  horizontalCenter="0" verticalCenter="0"
                                                                                  selectable="false"/>
                                                                          </mx:Box>
                                                          </mx:Box>
                                                  </mx:Canvas>
                                          </mx:Repeater>
                                  </mx:Tile>
                          </mx:Canvas>
                          <mx:Box id="myOutsideBox3" width="20" height="540"/>
                  </mx:HBox>
                  <mx:Box id="myOutsideBox4" width="960" height="20" horizontalScrollPolicy="off" verticalScrollPolicy="off" 
                          horizontalGap="0" verticalGap="0"/>
          </mx:VBox>
  </mx:Application>