<?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 up button of the MX NumericStepper component. 

      @see mx.controls.NumericStepper
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:local="mx.skins.spark.*" alpha.disabled="0.5">
    
    <fx:Script>
        /* 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};
        
        /* Define the border items.*/
        static private const borderItem:Array = ["borderStroke"];
        /**
         * @private
         */
        override protected function get borderItems():Array {return borderItem;}
        /**
         * @private
         */
        override protected function get defaultBorderItemColor():uint {return 0x686868;}
        
        /**
         * @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.topRightRadiusX = cornerRadius;
                highlight.topRightRadiusX = cornerRadius;
            }
            
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
        
        private var cornerRadius:Number = 2;
    </fx:Script>
    
    <local:states>
        <s:State name="up" />
        <s:State name="over"/>
        <s:State name="down" />
        <s:State name="disabled" />
    </local:states>
    
    <!-- border/fill -->
    <!--- @private -->
    <s:Rect id="fill" left="-1" top="0" right="0" bottom="0" width="18" height="11" topRightRadiusX="2">
        <s:stroke>
            <!--- @private -->
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                               color.over="0xC2C2C2"
                               color.down="0xAEB0B1" />
                <s:GradientEntry color="0xF0F0F0"
                               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" topRightRadiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" 
                               color.down="0x000000"
                               alpha.over="0.55" 
                               alpha.down="0.15" />
                <s:GradientEntry color="0xFFFFFF" 
                               color.down="0x000000"
                               alpha="0.45"
                               alpha.over="0.2475"
                               alpha.down="0" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- shadow -->
    <s:Rect left="0" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    
    <!-- arrow -->
    <!--- @private -->
    <s:Path horizontalCenter="-1" verticalCenter="0" id="arrow"
          data="M 3.0 0.0 L 3.0 1.0 L 4.0 1.0 L 4.0 2.0 L 5.0 2.0 L 5.0 3.0 L 0.0 3.0 L 0.0 2.0 L 1.0 2.0 L 1.0 1.0 L 2.0 1.0 L 2.0 0.0 L 3.0 0.0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="arrowFill" color="0" alpha="0.8" />
        </s:fill>
    </s:Path>            
    
</local:SparkSkinForHalo>
