<?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 down button of a Spark Spinner component.  

     @see spark.components.Spinner
        
      @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">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. 
           For spinner buttons, the graphics are colorized but the arrow is not. */
        static private const exclusions:Array = ["arrow"];

        /**
         * @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 = ["arrowFill"];

        /**
         * @private
         */
        override public function get symbolItems():Array {return symbols};
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
        
        /**
         *  @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
        {
            var cr:Number = getStyle("cornerRadius");
            
            if (cornerRadius != cr)
            {
                cornerRadius = cr;
                fill.bottomRightRadiusX = cornerRadius;
                fill.bottomLeftRadiusX = cornerRadius;
                highlight.bottomRightRadiusX = cornerRadius;
                highlight.bottomLeftRadiusX = cornerRadius;
            }
            
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
        
        private var cornerRadius:Number = 2;
    </fx:Script>
    
    <s:states>
        <s:State name="up" />
        <s:State name="over"/>
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <s:Group left="0" top="0" right="0" bottom="0">
        
        <!-- border/fill -->
        <!--- @private -->
        <s:Rect id="fill" left="0" top="0" right="0" bottom="0" width="18" height="16"
                bottomRightRadiusX="2" bottomLeftRadiusX="2">
            <s:stroke>
                <s:SolidColorStroke color="0x686868" weight="1"/>
            </s:stroke>
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xE8E8E8"
                                   color.over="0xC2C2C2"
                                   color.down="0xAEB0B1" />
                    <s:GradientEntry color="0xDFDFDF"
                                   color.over="0xADAEAF"
                                   color.down="0xA1A3A5" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>    
        
        <!-- highlight -->
        <!--- @private -->
        <s:Rect id="highlight" left="1" top="1" right="1" bottom="1"
                bottomRightRadiusX="2" bottomLeftRadiusX="2">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" 
                                   color.down="0x000000" 
                                   alpha="0.55"
                                   alpha.over="0.55" 
                                   alpha.down="0.15" />
                    <s:GradientEntry color="0xFFFFFF" 
                                   color.down="0x000000"
                                   alpha="0.2475"
                                   alpha.over="0.2475"
                                   alpha.down="0" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>
        
        <!-- shadow -->
        <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
            <s:fill>
                <s:SolidColor color="0x000000" alpha="0.07" />
            </s:fill>
        </s:Rect>
    </s:Group>
    
    <!-- arrow -->
    <!--- Defines the appearance of the down arrow. -->
    <s:Path horizontalCenter="0" verticalCenter="0" id="arrow"
          data="M 3.0 3.0 L 3.0 2.0 L 4.0 2.0 L 4.0 1.0 L 5.0 1.0 L 5.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0">
        <s:fill>
            <!--- @private
                  Defines the down arrow's fill. The default color is 0x000000. The default alpha is .8. -->
            <s:SolidColor id="arrowFill" color="0" alpha="0.8" />
        </s:fill>
    </s:Path>            

</s:SparkSkin>
