<?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 fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["volumeSymbol"];
            
            /**
             * @private
             */
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /* Define the symbol fill items that should be colored by the "symbolColor" style. */
            static private const symbols:Array = ["trapezoid1", "trapezoid2", "bar1_1", "bar1_2", 
                                                  "bar1_3", "bar2_1", "bar2_2", "bar2_3", "bar3_1", 
                                                  "bar3_2", "bar3_3", "bar4_1", "bar4_2", "bar4_3"];
            
            /**
             * @private
             */
            override public function get symbolItems():Array {return symbols};
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
    
    <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"/>
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
        
    <!-- layer 1: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 color.over="0xCACACA"
                                 color.down="0xA8A8A8" />
                <s:GradientEntry color="0xDCDCDC"
                                 color.over="0x8D8D8D" 
                                 color.down="0x6B6B6B"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: One pixel stroke inside border (exclude in down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke weight="1" rotation="90">
                <s:GradientEntry color="0xFEFEFE" alpha.over="0.22" />
                <s:GradientEntry color="0xEAEAEA" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 3: fill highlight  (exclude in down) -->
    <s:Rect left="1" right="1" top="1" height="11" excludeFrom="down">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                        alpha="0.3" 
                        alpha.over="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: downstate inset border  (include only in down) -->
    <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.4" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="38" height="24">
        <s:stroke>
            <s:SolidColorStroke color="0x131313" />
        </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>