<?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 volume bar 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" alpha.disabled=".5"> 

    <!-- host component -->
    <fx:Metadata>
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.mediaClasses.VolumeBar")]
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["muteButton", "track", "thumb"];
        
        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
    
    <!--- The PopUpAnchor control that contains the drop-down slider control. -->
    <s:PopUpAnchor id="popup"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
        left="0" right="0" top="0" bottom="0" popUpPosition="above" itemDestructionPolicy="auto">
        
        <!--- @copy spark.components.mediaClasses.VolumeBar#dropDown -->
        <s:Group id="dropDown" width="38" height="84" horizontalCenter="0">
        
            <!-- dropshadow for the dropdown -->
            <s:Rect left="0" top="0" right="0" bottom="0">
                <s:filters>
                    <s:DropShadowFilter knockout="true" blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" />   
                </s:filters>    
                <s:fill>    
                    <s:SolidColor color="0x000000" />   
                </s:fill>   
            </s:Rect>
            
            <!-- background for the popup -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xFFFFFF"/>
                        <s:GradientEntry color="0xDCDCDC"/>
                    </s:LinearGradient>
                </s:fill>
                <s:stroke>
                    <s:SolidColorStroke color="0x000000" />
                </s:stroke>
            </s:Rect>
            
            <!--- The skin pat that defines the drop-down slider track.  -->
            <s:Button id="track" horizontalCenter="0" top="6" bottom="7"
                      skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarTrackSkin" />
            
            <!--- The skin pat that defines the thumb in the drop-down slider track.  -->
            <s:Button id="thumb" horizontalCenter="0" width="11" height="11" 
                      skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarThumbSkin" />
        </s:Group>
    </s:PopUpAnchor>
    
    <!--- @copy spark.components.mediaClasses.VolumeBar#muteButton -->
    <s:MuteButton id="muteButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="spark.skins.spark.mediaClasses.normal.MuteButtonSkin" />
    
</s:SparkSkin>
