<?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 next year arrow of an MX DateChooser component. 

      @see mx.controls.DateChooser
        
      @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="7" minHeight="6" alpha.disabled="0.5">

    <fx:Script> 
        /* Define the skin elements that should not be colorized. 
        For button, the graphics are colorized but the arrow is not. */
        static private const exclusions:Array = ["arrow", "arrowHighlight"];
        /**
         * @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 = ["arrowFill1", "arrowFill2", "arrowFill3"];
        /**
         * @private
         */
        override public function get symbolItems():Array {return symbols};      
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- highlight semicircle (over/down states) -->
    <!--- @private -->
    <s:Ellipse left="-5" right="-5" top="-3" bottom="-9">
        <s:fill>
            <s:SolidColor color="0" alpha="0" alpha.over=".12" alpha.down=".22" />
        </s:fill>
        <s:mask>
            <s:Group left="0" right="0" top="0" bottom="0">
                <s:Rect left="0" right="-20" top="0" bottom="-9">
                    <s:fill>
                        <s:SolidColor alpha="0"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:mask>
    </s:Ellipse>
    
    <!--- @private -->
    <s:Path id="arrow" top="1" left="1" data="M 0 3 L 0 2 L 1 2 L 1 1 L 2 1 L 2 0 L 3 0 L 3 1 L 4 1 L 4 2 L 5 2 L 5 3 L 0 3 Z">
        <s:fill>
            <s:RadialGradient x="2" y="3" scaleX="3" scaleY="5">    
                <!--- @private -->
                <s:GradientEntry id="arrowFill1" color="0" alpha="0.5" ratio="0"/>
                <!--- @private -->
                <s:GradientEntry id="arrowFill2" color="0" alpha="0.65" ratio="0.9"/>
                <!--- @private -->
                <s:GradientEntry id="arrowFill3" color="0" alpha="0.75" ratio="1"/>
            </s:RadialGradient>
        </s:fill>
    </s:Path>
        <!-- Highlight -->
    <!--- @private -->
    <s:Rect id="arrowHighlight" top="4" left="1" width="5" height="1">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
   
</s:SparkSkin>
