<?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 Spark Button component.  

       @see spark.components.Button
        
      @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="0.5"  height="25" xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        
        ]]>
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            
            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /**
             * @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>
    
    <s:transitions>
        <s:Transition fromState="up" toState="over" >
            <s:Fade target="{fill}" alphaFrom="1" alphaTo="0" duration="250" />
        </s:Transition>
        <s:Transition fromState="over" toState="up">
            <s:Fade target="{fill}" alphaFrom="0" alphaTo="1" duration="250" />
        </s:Transition>
    </s:transitions>
    
    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="1" right="1" top="1" bottom="1" radiusX="8">
        <s:filters>
            <s:DropShadowFilter
                blurX="5" blurY="5"
                alpha=".25"
                distance="1"
                color="0"
                angle="90"/>
        </s:filters>
    </s:Rect>
    
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="8">
        
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill_over" left="1" right="0" top="1" bottom="0" radiusX="8">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x868686" />
                <s:GradientEntry color="0xc6c6c6" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <s:Rect id="fill" left="1" right="0" top="1" bottom="0" radiusX="8">
        <s:fill>
            <s:LinearGradient rotation="-90">
                <s:GradientEntry color="0x868686" />
                <s:GradientEntry color="0xc6c6c6" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="8">
        
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="2" right="2" top="2" bottom="9" radiusX="8">
       <s:fill>
            <s:LinearGradient rotation="-90">
                <s:GradientEntry color="0xa5a5a5" />
                <s:GradientEntry color="0xc6c6c6" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="8">
       
    </s:Rect>
    
    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="8">
        
    </s:Rect>
    <!--- @private -->
    <s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="2" radiusX="8" 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="8">
        <s:stroke>
            <s:SolidColorStroke color="0xbcbcbc" />
        </s:stroke>
    </s:Rect>
    
    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1" fontSize="12"
             horizontalCenter="0" verticalCenter="1"
             left="20" right="20" top="2" bottom="2" fontFamily="allerBold" color="#FFFFFF" paddingLeft="5" paddingRight="5">
        <s:filters>
            <s:DropShadowFilter
                blurX="5" blurY="5"
                alpha=".25"
                distance="1"
                color="0"
                angle="90" />
        </s:filters>
    </s:Label>
    
</s:SparkSkin>