<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 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 wireframe skin class for the MX PopUpButton component. 

      @see mx.controls.PopUpButton
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
      
      minWidth="21" minHeight="21"
      alpha.disabled="0.5">
    
    <fx:Script>
        /**
         *  @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 -->
    <s: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" />
    </s:states>
    
    <!-- arrow background -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="18" top="0" bottom="0"
            height="20"
            topLeftRadiusX="2" bottomLeftRadiusX="2">
        <s:fill>
            <s:SolidColor color="#FFFFFF" color.over="#EEEEEE" color.down="#EEEEEE" />
        </s:fill>
    </s:Rect>
    
    <!-- background -->
    <!--- @private -->
    <s:Rect id="background" top="0" bottom="0"
            right="0" height="20" width="18"
            topRightRadiusX="2" bottomRightRadiusX="2">
        <s:fill>
            <s:SolidColor color="#FFFFFF" color.popUpOver="#EEEEEE" color.popUpDown="#EEEEEE" />
        </s:fill>
    </s:Rect>
    
    <!-- divider -->
    <!--- @private -->
    <s:Rect id="divider" top="0" bottom="0"
            right="18" height="20" width="1">
        <s:fill>
            <s:SolidColor color="#707070" />
        </s:fill>
    </s:Rect>
    
    <!-- border -->
    <!--- @private -->
    <s:Rect id="fill" left="0" right="0" top="0" bottom="0"
            width="69" height="20"
            radiusX="2">
        <s:stroke>
            <s:SolidColorStroke color="#707070" />
        </s:stroke>
    </s:Rect>
    
    <!-- shadow (down state only) -->
    <s:Rect left="2" top="1" right="18" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="18" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="18" top="2" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.07" />
        </s:fill>
    </s:Rect>
    
    <!-- arrow background shadow (popUpDown state only) -->
    <s:Rect width="18" top="1" right="2" height="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect width="18" bottom="1" right="1" height="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="2" bottom="1" width="1" includeIn="popUpDown">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="18" top="2" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="#5C5C5C" alpha="0.07" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 8: arrow -->
    <!--- The arrow that users click to drop down the list. -->
    <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>
            <!--- @private -->
            <s:SolidColor id="arrowFill" color="#666666" />
        </s:fill>
    </s:Path>
    
</s:Skin>