<?xml version="1.0" encoding="utf-8"?>

<!--

  ADOBE SYSTEMS INCORPORATED
  Copyright 2008 Adobe Systems Incorporated
  All Rights Reserved.

  NOTICE: Adobe permits you to use, modify, and distribute this file
  in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the mute button of a Spark VideoPlayer component  
    in the normal skin state. The normal skin state means the component is not in 
    one of the <code>fullScreen</code> skin states.  

    @see spark.components.VideoPlayer
    
    @langversion 3.0
    @playerversion Flash 10
    @playerversion AIR 1.5
    @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:fb="http://ns.adobe.com/flashbuilder/2009" creationComplete="init()"
   alpha.disabled="0.5">

  <!-- host component -->
  <fx:Metadata>
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.mediaClasses.MuteButton")]
  </fx:Metadata>
  
  <fx:Script>
    <![CDATA[
      import mx.events.FlexEvent;
      import spark.components.mediaClasses.VolumeBar;
       
      private function init():void
      {
        // this is essentially just binding code.  Anytime the volume changes, 
        // let us know.
        volume = hostComponent.muted ? 0 : hostComponent.volume;
        hostComponent.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
        hostComponent.addEventListener(FlexEvent.MUTED_CHANGE, valueCommitHandler);
      }
      
      private function valueCommitHandler(event:Event):void
      {
        volume = hostComponent.muted ? 0 : hostComponent.volume;
      }
      
      private var _volume:Number = 1;

      /**
      *  The volume of the video player, specified as a value between 0 and 1.
      */
      public function get volume():Number
      {
        return _volume;
      }
      
      public function set volume(value:Number):void
      {
        if (value == _volume)
          return;
        
        _volume = value;
        
        var bar1:Array = [bar1_1, bar1_2, bar1_3]; // 0-.25
        var bar2:Array = [bar2_1, bar2_2, bar2_3]; // .25-.5
        var bar3:Array = [bar3_1, bar3_2, bar3_3]; // .5-.75
        var bar4:Array = [bar4_1, bar4_2, bar4_3]; // .75-.1
        var bars:Array = [bar1, bar2, bar3, bar4];
        
        var curValue:Number = 0;
        for (var i:int = 0; i < bars.length; i++)
        {
          if (value <= curValue)
            setAlphaTo(bars[i], 0);
          else if (value >= (curValue + 0.25))
            setAlphaTo(bars[i], 1);
          else
            setAlphaTo(bars[i], (value-curValue)*4);
          
          curValue += 0.25;
        }
      }
      
      private function setAlphaTo(bar:Array, alpha:Number):void
      {
        for (var i:int = 0; i < bar.length; i++)
        {
          bar[i].alpha = alpha;
        }
      }
    ]]>
  </fx:Script>
  
  
  <!-- states -->
  <s:states>
    <s:State name="up" />
    <s:State name="over" stateGroups="overStates" />
    <s:State name="down" stateGroups="downStates" />
    <s:State name="disabled" stateGroups="disabledStates" />
    <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
  </s:states>
    
  <!-- layer 1: fill -->
  <s:Rect id="fill"
          left="1"
          right="1"
          top="1"
          bottom="1"
          bottomRightRadiusX="15"
          topRightRadiusX="15">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0xFFFFFF" 
                         color.selectedUpStates="0xBBBDBD"
                         color.overStates="0xBBBDBD" 
                         color.downStates="0xAAAAAA" 
                         alpha="0.85" 
                         alpha.overAndSelected="1" />
        <s:GradientEntry color="0xD8D8D8" 
                         color.selectedUpStates="0x9FA0A1"
                         color.over="0x9FA0A1" 
                         color.overAndSelected="0x8E8F90"
                         color.downStates="0x929496" 
                         alpha="0.85"
                         alpha.overAndSelected="1" />
      </s:LinearGradient>
    </s:fill>
  </s:Rect>
  
  <!-- layer 3: fill highlight  (exclude in down) -->
  <!--- @private -->
  <s:Rect id="highlight"
          excludeFrom="down"
          left="1"
          right="1"
          top="1"
          bottom="1"
          bottomRightRadiusX="15"
          topRightRadiusX="15">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0xFFFFFF"
                         ratio="0.0"
                         alpha="0.33" 
                         alpha.selectedUpStates="0.22"
                         alpha.overStates="0.22" 
                         alpha.downStates="0.12"/>
        <s:GradientEntry color="0xFFFFFF"
                         ratio="0.48"
                         alpha="0.33"
                         alpha.selectedUpStates="0.22"
                         alpha.overStates="0.22" 
                         alpha.downStates="0.12"/>
        <s:GradientEntry color="0xFFFFFF"
                         ratio="0.48001"
                         alpha="0" />
      </s:LinearGradient>
    </s:fill>
  </s:Rect>
  
  <!-- layer 5: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
  <!--- @private -->
  <s:Rect id="border"
          left="0"
          right="0"
          top="0"
          bottom="0"
          width="69"
          height="20"
          bottomRightRadiusX="15"
          topRightRadiusX="15">
    <s:stroke>
      <s:LinearGradientStroke rotation="90" weight="1">
        <s:GradientEntry color="0x000000" 
                         alpha="0.5625"
                         alpha.down="0.6375"
                         alpha.selectedStates="0.6375" />
        <s:GradientEntry color="0x000000" 
                         alpha="0.75" 
                         alpha.down="0.85"
                         alpha.selectedStates="0.85" />
      </s:LinearGradientStroke>
    </s:stroke>
  </s:Rect>
  
  <!--- Defines the volume symbol. -->
  <s:Group horizontalCenter="0" verticalCenter="0" id="volumeSymbol">
  
    <!-- big trapezoid in center -->
    <s:Path winding="evenOdd" data="M 9 13 L 9 0 L 4 4 L 4 9 L 9 13 Z">
      <s:fill>
        <!--- @private -->
        <s:SolidColor color="0x212121" alpha=".85" id="trapezoid1"/>
      </s:fill>
    </s:Path>
    
    <!-- small trapezoid on left -->
    <s:Path winding="evenOdd" data="M 3 9 L 3 4 L 0 5 L 0 8 L 3 9 Z">
      <s:fill>
        <!--- @private -->
        <s:SolidColor color="0x212121" alpha=".75" id="trapezoid2"/>
      </s:fill>
    </s:Path>
    
    <!-- volume bars -->
    
    <!-- big volume bar representing volume values [.75, 1] -->
    <s:Line yFrom="0" yTo="12" x="16">
      <s:stroke>
        <s:LinearGradientStroke rotation="90">
          <!--- @private -->
          <s:GradientEntry color="0x272727" ratio=".1" id="bar4_1" />
          <!--- @private -->
          <s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar4_2" />
          <!--- @private -->
          <s:GradientEntry color="0x484848" ratio=".3" id="bar4_3" />
        </s:LinearGradientStroke>
      </s:stroke>
    </s:Line>
    
    <!-- middle volume bar representing volume values [.5, .75] -->
    <s:Line yFrom="2" yTo="10" x="14">
      <s:stroke>
        <s:LinearGradientStroke rotation="90">
          <!--- @private -->
          <s:GradientEntry color="0x272727" ratio=".1" id="bar3_1" />
          <!--- @private -->
          <s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar3_2" />
          <!--- @private -->
          <s:GradientEntry color="0x484848" ratio=".3" id="bar3_3" />
        </s:LinearGradientStroke>
      </s:stroke>
    </s:Line>
    
    <!-- middle volume bar representing volume values [.25, .5] -->
    <s:Line yFrom="3" yTo="9" x="12">
      <s:stroke>
        <s:LinearGradientStroke rotation="90">
          <!--- @private -->
          <s:GradientEntry color="0x272727" ratio=".1" id="bar2_1" />
          <!--- @private -->
          <s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar2_2" />
          <!--- @private -->
          <s:GradientEntry color="0x484848" ratio=".3" id="bar2_3" />
        </s:LinearGradientStroke>
      </s:stroke>
    </s:Line>
    
    <!-- small volume bar representing volume values [0, .25] -->
    <s:Line yFrom="5" yTo="7" x="10">
      <s:stroke>
        <s:LinearGradientStroke rotation="90">
          <!--- @private -->
          <s:GradientEntry color="0x272727" ratio=".1" id="bar1_1" />
          <!--- @private -->
          <s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar1_2" />
          <!--- @private -->
          <s:GradientEntry color="0x484848" ratio=".3" id="bar1_3" />
        </s:LinearGradientStroke>
      </s:stroke>
    </s:Line>
  </s:Group>
</s:SparkSkin>