<?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 MX PopUpButton component. 

      @see mx.controls.PopUpButton
        
      @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.*"
      minWidth="21" minHeight="21"
      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"];
        /**
         *  @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"];
        /**
         *  @private
         */
        override public function get symbolItems():Array {return symbols};

        /* Define the border items.*/
        static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
        /**
         *  @private
         */
        override protected function get borderItems():Array {return borderItem;}
        
        /**
         * @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.topLeftRadiusX = cornerRadius;
                fill.bottomLeftRadiusX = cornerRadius;
                fill2.topRightRadiusX = cornerRadius;
                fill2.bottomRightRadiusX = cornerRadius;
                lowlight.radiusX = cornerRadius;
                highlight.radiusX = cornerRadius;
                border.radiusX = cornerRadius;
            }
                
            if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
        
        private var cornerRadius:Number = 2;
    </fx:Script>
    
    <!-- states -->
    <local:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" />
        <s:State name="popUpOver" stateGroups="overStates, popUpStates" />
        <s:State name="popUpDown" stateGroups="downStates, popUpStates" />
    </local:states>
    
    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient 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:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="18" top="1" bottom="1" 
            topLeftRadiusX="2" bottomLeftRadiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                                 color.over="0xBBBDBD" 
                                 color.down="0xAAAAAA" 
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                                 color.over="0x9FA0A1" 
                                 color.down="0x929496" 
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <!--- @private -->
    <s:Rect id="fill2" width="18" right="1" top="1" bottom="1" 
            topRightRadiusX="2" bottomRightRadiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                                 color.popUpOver="0xBBBDBD" 
                                 color.popUpDown="0xAAAAAA" 
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                                 color.popUpOver="0x9FA0A1" 
                                 color.popUpDown="0x929496" 
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="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="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33"
                                 alpha.overStates="0.22" 
                                 alpha.downStates="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 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="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="19" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="19" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="19" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
    
    <s:Rect right="17" top="1" bottom="1" width="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect width="16" top="1" right="2" height="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect width="17" top="2" right="1" height="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </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:LinearGradientStroke rotation="90" weight="1">
                <!--- @private -->
                <s:GradientEntry id="borderEntry1" 
                               alpha="0.5625"
                               alpha.downStates="0.6375" />
                <!--- @private -->
                <s:GradientEntry id="borderEntry2"  
                               alpha="0.75" 
                               alpha.downStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <s:Rect right="18" top="1" bottom="1" width="1">
        <s:fill>
             <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                               alpha="0.5625"
                               alpha.downStates="0.6375" />
                <s:GradientEntry color="0x000000" 
                               alpha="0.75" 
                               alpha.downStates="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 8: arrow -->
    <!--- @private -->
    <s:Path right="6" 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:RadialGradient rotation="90" focalPointRatio="1">    
                <!--- @private -->
                <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                <!--- @private -->
                <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
            </s:RadialGradient>
        </s:fill>
    </s:Path>
</local:SparkSkinForHalo>