<?xml version="1.0" encoding="utf-8"?>
<s:List 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="de.dtele.ui.components.*"
        borderVisible="true"
        contentBackgroundAlpha="0"
        width="100%"
        height="60%"
        skinClass="de.dtele.ui.components.skins.ResourceViewerSkin"
        addedToStage="onAddedToStage(event)"
        keyDown="onKeyDown(event)">
  
<!-- itemRenderer="de.dtele.ui.components.ResourceViewItemRenderer" -->
  
  <fx:Script>
    <![CDATA[
      
      import de.dtele.control.MediaManager;
      import de.dtele.data.KeyCode;
      
      /**
       * Stores information about the state before switching to fullscreen
       * 
       * Inspired by spark.components.VideoPlayer
       */
      protected var beforeFullScreenInfo:Object = {};
      
      /**
       * Sets up a listener to watch for fullscreen state changes of the stage
       */
      protected function onAddedToStage(event:Event):void {
        
        this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, this.onFullScreen);
      }
      
      /**
       * Changes the appearance of the viewer in regular and fullscreen view
       * 
       * @see spark.components.VideoPlayer#fullScreenButton_clickHandler
       */
      protected function onFullScreen(e:FullScreenEvent):void {
        
        if (e.fullScreen) {
          
          // Store state properties for restore upon leaving fullscreen mode
          this.beforeFullScreenInfo = {
            x: this.x,
            y: this.y,
            explicitWidth: this.explicitWidth,
            explicitHeight: this.explicitHeight,
            percentWidth: this.percentWidth,
            percentHeight: this.percentHeight
          };
          
          // Resize to stage fullscreen size
          this.setLayoutBoundsSize(this.stage.fullScreenWidth, this.stage.fullScreenHeight, true);
          
          // Ensure dimensions are kept on layout changes
          // This can happen e.g. after the fullscreen info text ("Press Esc ...") was hidden
          this.explicitWidth = this.width;
          this.explicitHeight = this.height;
          
          // Move to 0,0
          this.setLayoutBoundsPosition(0, 0, true);
          
          // Force recalculation of properties and layout
          //this.validateNow();
          
        } else {
          
          // Restore state properties from before entering fullscreen mode
          this.x = this.beforeFullScreenInfo.x;
          this.y = this.beforeFullScreenInfo.y;
          this.explicitWidth = this.beforeFullScreenInfo.explicitWidth;
          this.explicitHeight = this.beforeFullScreenInfo.explicitHeight;
          this.percentWidth = this.beforeFullScreenInfo.percentWidth;
          this.percentHeight = this.beforeFullScreenInfo.percentHeight;
          
          // Force recalculation of size and display
          //this.invalidateSize();
          //this.invalidateDisplayList();
          //this.validateNow();
        }
      }
      
      /**
       * Triggers actions based on user input like switching to other
       * resources, toggling fullscreen and closing the viewer
       */
      protected function onKeyDown(e:KeyboardEvent):void {
        
        e.preventDefault();
        
        switch (e.keyCode) {
          
          /*case Keyboard.LEFT:
          case KeyCode.P:
            
            var previousIndex:int = this.selectedIndex - 1;

            if (previousIndex < 0) {
              
              // Switch to the last item if this was the first
              previousIndex = this.dataProvider.length - 1;
            }
            
            this.selectedIndex = previousIndex;
            break;
          
          case Keyboard.RIGHT:
          case KeyCode.N:
            
            var nextIndex:int = this.selectedIndex + 1;
            
            if (nextIndex >= this.dataProvider.length) {
              
              // Switch to the first item if this was the last
              nextIndex = 0;
            }
            
            this.selectedIndex = nextIndex;
            break;*/
          
          case KeyCode.F:
            
            this.stage.displayState = (
              this.stage.displayState == StageDisplayState.NORMAL
              ? StageDisplayState.FULL_SCREEN
              : StageDisplayState.NORMAL
            );
            break;
          
          case Keyboard.ESCAPE:
          case KeyCode.Q:
          case KeyCode.X:
            
            MediaManager.instance.selectedResource = null;
            break;
        }
      }
      
    ]]>
  </fx:Script>
  
  <s:layout>
    <s:HorizontalLayout gap="50"/>
  </s:layout>
  
  <!--s:layout>
    <components:ResourceViewerLayout/>
    <s:HorizontalLayout
      horizontalAlign="center"
      verticalAlign="middle"/>
  </s:layout-->
  
</s:List>