<?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 Spark skin class for the first button in the MX ButtonBar component. 

      @see mx.controls.ButtonBar
      
      @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" 
      minWidth="21" minHeight="21" alpha.disabledStates="0.5">
    
    <fx:Script>
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
        
        /**
         * @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
        {
            var cr:Number = getStyle("cornerRadius");
            
            if (cornerRadius != cr)
            {
                cornerRadius = cr;
                shadow.topLeftRadiusX = cornerRadius;
                shadow.bottomLeftRadiusX = cornerRadius;
                fill.topLeftRadiusX = cornerRadius;
                fill.bottomLeftRadiusX = cornerRadius;
                lowlight.topLeftRadiusX = cornerRadius;
                lowlight.bottomLeftRadiusX = cornerRadius;
                highlight.topLeftRadiusX = cornerRadius;
                highlight.bottomLeftRadiusX = cornerRadius;
                highlightStroke.topLeftRadiusX = cornerRadius;
                highlightStroke.bottomLeftRadiusX = cornerRadius;
                border.topLeftRadiusX = cornerRadius;
                border.bottomLeftRadiusX = cornerRadius;
            }
            
            if (hldownstroke1) 
            {
                hldownstroke1.topLeftRadiusX = cornerRadius;
                hldownstroke1.bottomLeftRadiusX = cornerRadius;
            }
            if (hldownstroke2) 
            {
                hldownstroke2.topLeftRadiusX = cornerRadius;
                hldownstroke2.bottomLeftRadiusX = cornerRadius;
            }
            
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    
        private var cornerRadius:Number = 2;
    </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="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
    
    <s:Group left="-1" right="0" top="-1" bottom="-1">
        
        <!-- layer 1: shadow -->
        <!--- @private -->
        <s:Rect id="shadow" left="0" right="0" top="0" bottom="0" width="69" height="20" topLeftRadiusX="2" bottomLeftRadiusX="2">
            <s:stroke>
                <s:LinearGradientStroke rotation="90">
                    <s:GradientEntry color="0x000000" 
                                     color.downStates="0xFFFFFF"
                                     alpha="0.01"
                                     alpha.downStates="0" />
                    <s:GradientEntry color="0x000000" 
                                     color.downStates="0xFFFFFF" 
                                     alpha="0.07"
                                     alpha.downStates="0.5" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>
        
        <!-- layer 2: fill -->
        <!--- @private -->
        <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="2" bottomLeftRadiusX="2">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" 
                                     color.selectedUpStates="0xBBBDBD"
                                     color.overStates="0xBBBDBD" 
                                     color.downStates="0xAAAAAA" 
                                     alpha="0.85" 
                                     alpha.selectedOver="1" />
                    <s:GradientEntry color="0xD8D8D8" 
                                     color.selectedUpStates="0x9FA0A1"
                                     color.over="0x9FA0A1" 
                                     color.selectedOver="0x8E8F90"
                                     color.downStates="0x929496" 
                                     alpha="0.85"
                                     alpha.selectedOver="1" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        
        <!-- layer 3: fill lowlight -->
        <!--- @private -->
        <s:Rect id="lowlight" left="2" right="1" top="2" bottom="2" topLeftRadiusX="2" bottomLeftRadiusX="2">
            <s:fill>
                <s:LinearGradient rotation="270">
                    <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                    <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                    <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        
        <!-- layer 4: fill highlight -->
        <!--- @private -->
        <s:Rect id="highlight" left="2" right="1" top="2" bottom="2" topLeftRadiusX="2" bottomLeftRadiusX="2">
            <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: highlight stroke (all states except down) -->
        <!--- @private -->
        <s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="2" bottomLeftRadiusX="2">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                    <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>
        
        <!-- layer 6: highlight stroke (down state only) -->
        <!--- @private -->
        <s:Rect id="hldownstroke1" left="2" right="1" top="2" bottom="2" topLeftRadiusX="2"  bottomLeftRadiusX="2"
                includeIn="downStates, selectedUpStates, selectedOver">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                    <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                    <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                    <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                    <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>
        <!--- @private -->
        <s:Rect id="hldownstroke2" left="3" right="2" top="3" bottom="3" topLeftRadiusX="2"  bottomLeftRadiusX="2"
                includeIn="downStates, selectedUpStates, selectedOver">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                    <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
                </s:LinearGradientStroke>
            </s:stroke>
        </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="1" right="0" top="1" bottom="1" topLeftRadiusX="2" bottomLeftRadiusX="2">
            <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>
    </s:Group>
</s:SparkSkin>