<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer 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.*"
                      xmlns:osmf="org.osmf.media.*"
                      implements="de.dtele.ui.components.viewer.IResourceViewer"
                      width="450"
                      skinClass="de.dtele.ui.components.skins.AudioResourceViewerSkin"
                      remove="onRemove(event)">
  
  <fx:Metadata>
    <![CDATA[
    /**
     * Allows for viewing audio resources based on the OSMF from Adobe
     * 
     * <p>By default audio playback is limited to the codecs supported
     * by the Adobe Flash Player. Extensions via OSMF plugins should be considered.</p>
     * 
     * @see http://kb2.adobe.com/cps/402/kb402866.html List of codecs supported by Adobe Flash Player
     * @see http://www.opensourcemediaframework.com/
     * 
     * @author Mathias Brodala
     */
    ]]>
  </fx:Metadata>
  
  <fx:Declarations>
    
    <osmf:MediaPlayer
      id="player"
      autoPlay="false"
      autoRewind="true"
      hasAudioChange="onHasAudioChange(event)"
      mediaPlayerStateChange="onPlayerStateChange(event)"
      currentTimeChange="onCurrentTimeChange(event)"
      durationChange="onDurationChange(event)"/>
    
  </fx:Declarations>
  
  <fx:Binding source="volumeBar.value" destination="player.volume"/>
  <fx:Binding source="volumeBar.muted" destination="player.muted"/>

  <fx:Script>
    <![CDATA[
      import de.dtele.data.Assets;
      import de.dtele.data.Duration;
      import de.dtele.data.IResource;
      import de.dtele.messages.MessageManager;
      
      import mx.events.FlexEvent;
      
      import org.osmf.elements.AudioElement;
      import org.osmf.events.MediaPlayerCapabilityChangeEvent;
      import org.osmf.events.MediaPlayerStateChangeEvent;
      import org.osmf.events.TimeEvent;
      import org.osmf.media.MediaPlayerState;
      import org.osmf.media.URLResource;
      
      [Bindable]private var playQueued:Boolean = false;
      private var seeking:Boolean = false;
      
      public function view(resource:IResource):void {
        
        this.player.media = new AudioElement(new URLResource(resource.fullUrl));
        
        this.dispatchEvent(new Event(Event.COMPLETE));
      }
      
      /**
       * Formats the duration to seek to
       */
      protected function progressSliderDataTipFormatFunction(value:Number):String {
        
        return new Duration(value).format();
      }
      
      /**
       * Updates the volume bar value after audio has been received
       */
      protected function onHasAudioChange(e:MediaPlayerCapabilityChangeEvent):void {
        
        if (e.enabled) {
          
          this.volumeBar.value = this.player.volume;
        }
      }
      
      protected function onPlayerStateChange(e:MediaPlayerStateChangeEvent):void {
        
        switch (e.state) {
          
          case MediaPlayerState.READY:
            
            if (this.playQueued) {
              
              this.playQueued = false;
              this.player.play();
            }
            break;
        }
        
        if (this.playPauseButton) {
          
          this.playPauseButton.selected = (e.state == MediaPlayerState.PLAYING);
        }
      }
      
      protected function onCurrentTimeChange(e:TimeEvent):void {
        
        if (!seeking) {
          
          this.progressSlider.value = e.time;
        }
        
        this.durationLabel.text = new Duration(e.time).format() + " / " +
                                  new Duration(this.player.duration).format();
        
        this.equalizer.invalidateDisplayList();
      }
      
      protected function onDurationChange(e:TimeEvent):void {
        
        this.progressSlider.maximum = e.time;
      }
      
      protected function onPlayPauseButtonClick(e:MouseEvent):void {
        
        if (this.playPauseButton.selected) {
          
          if (this.player.state == MediaPlayerState.READY) {
            
            this.player.play();
          } else {
            
            this.playQueued = true;
          }
        } else {
          
          this.player.pause();
        }
      }
      
      protected function onProgressSliderChangeStart(event:FlexEvent):void {
        
        this.seeking = true;
      }
      
      protected function onProgressSliderChangeEnd(e:FlexEvent):void {
        
        this.player.seek(this.progressSlider.value);
        this.seeking = false;
      }
      
      protected function onRemove(event:FlexEvent):void {
        
        this.player.media = null;
      }
      
    ]]>
  </fx:Script>
  
  <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace components "de.dtele.ui.components.*";
    @namespace media "org.osmf.media.*";
    @namespace elements "org.osmf.elements.*";
    
    #durationLabel {
      color: #ffffff;
    }
    
  </fx:Style>
  
  <s:states>
    <s:State name="normal"/>
    <s:State name="selected"/>
  </s:states>
  
  <s:VGroup width="100%">
    
    <components:Equalizer id="equalizer"
                          width="100%"
                          height="100"/>

    <s:HGroup verticalAlign="middle"
              width="100%"
              height="100%">
      
      <s:ToggleButton id="playPauseButton"
                      enabled="{!this.playQueued}"
                      height="30"
                      width="30"
                      toolTip="{this.playPauseButton.selected ? 'Pause' : 'Wiedergabe'}"
                      icon="{Assets.PlayImage}"
                      icon.selected="{Assets.PauseImage}"
                      skinClass="de.dtele.ui.components.skins.PlayPauseButtonSkin"
                      click="onPlayPauseButtonClick(event)"/>
      
      <s:HSlider
        id="progressSlider"
        enabled="{!this.playQueued}"
        width="75%"
        maximum="100"
        stepSize="0.1"
        changeStart="onProgressSliderChangeStart(event)"
        changeEnd="onProgressSliderChangeEnd(event)"
        dataTipFormatFunction="progressSliderDataTipFormatFunction"
        skinClass="de.dtele.ui.components.skins.ProgressSliderSkin"/>
      
      <s:Label id="durationLabel" width="15%"/>
      
      <s:VolumeBar
        id="volumeBar"
        enabled="{!this.playQueued}"
        width="30"
        height="30"
        maximum="1"
        minimum="0"
        stepSize="0.05"
        skinClass="de.dtele.ui.components.skins.VolumeButtonSkin"/>
      
    </s:HGroup>
    
  </s:VGroup>
  
</s:SkinnableContainer>