<?xml version="1.0" encoding="utf-8"?>
<!--- The default skin class for the anchor button on a Spark DropDownList component.  

      @see spark.components.DropDownList        
      @see spark.skins.spark.DropDownListSkin
        
      @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" minWidth="21" minHeight="21" contentBackgroundColor.up="#E214EA">
    
    <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 dropDownList 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 = [];

         /**
          * @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;
                 shadow.radiusX = cornerRadius;
                 fill.radiusX = cornerRadius;
                 lowlight.radiusX = cornerRadius;
                 highlight.radiusX = cornerRadius;
                 border.radiusX = cornerRadius;
             }
             
             if (highlightStroke) highlightStroke.radiusX = cornerRadius;
             if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
             if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
             
             super.updateDisplayList(unscaledWidth, unscaledHeight);
         }
     
     private var cornerRadius:Number = 2;
    </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: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="5">
       
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="5">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xe9e9e9" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="5">
        <s:stroke>
            <s:SolidColorStroke color="0xFFFFFF" />
        </s:stroke>
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="5" includeIn="disabled,down,over">
       
    </s:Rect>
    
    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" excludeFrom="down" radiusX="5">
       
    </s:Rect>
    
    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="5" includeIn="down">
        
    </s:Rect>
    <!--- @private -->
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="5" includeIn="down">
      
    </s:Rect>
    
    <!-- layer 7: 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" radiusX="2">
        <s:stroke>
            <s:SolidColorStroke color="0xFFFFFF" alpha ="0"/>
        </s:stroke>
    </s:Rect>
    <s:Rect right="0" top="0" bottom="1" width="16" topRightRadiusX="5" bottomRightRadiusX="5" topRightRadiusY="5" bottomRightRadiusY="5">
       <s:fill>
           <s:LinearGradient rotation="90">
               <s:GradientEntry color="0xa2a2a2" />
               <s:GradientEntry color="0x6a6a6a" />
           </s:LinearGradient>
       </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x4c4c4c" />
        </s:stroke>
    </s:Rect>

    <!-- layer 8: arrow -->
    <!--- The arrow graphic displayed in the anchor button. -->
    <s:Path right="5" verticalCenter="0" id="arrow"
          data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.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 L 3.0 4.0 L 4.0 4.0">
        <s:fill>
             <s:SolidColor color="0xffffff" />
        </s:fill>
    </s:Path>
</s:SparkSkin>