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

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2010 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 anchor button on a Spark ComboBox component.  

@see spark.components.ComboBox        
@see spark.skins.spark.ComboBoxSkin

@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" minWidth="19" minHeight="23">
	
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata> 
	
	<fx:Script fb:purpose="styling">
		/* Define the skin elements that should not be colorized. 
		For dropDownList buttons, the graphics are colorized but the arrow is not. */
		static private const exclusions:Array = ["arrow"];
		
		private var cornerRadius:Number = 0;
		
		/** 
		 * @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};
		
		/**
		 * @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.bottomRightRadiusX = fill.topRightRadiusX = cornerRadius;
				lowlight.bottomRightRadiusX = lowlight.topRightRadiusX = cornerRadius;
				highlight.bottomRightRadiusX = highlight.topRightRadiusX = cornerRadius;
				border.bottomRightRadiusX = border.topRightRadiusX = cornerRadius;
			}
			
			if (highlightStroke) 
				highlightStroke.bottomRightRadiusX = highlightStroke.topRightRadiusX = cornerRadius;
			if (hldownstroke1)
				hldownstroke1.bottomRightRadiusX = hldownstroke1.topRightRadiusX = cornerRadius;
			if (hldownstroke2)
				hldownstroke2.bottomRightRadiusX = hldownstroke2.topRightRadiusX = cornerRadius;
			
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
	</fx:Script>
	
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
	
	<!-- layer 1: fill -->
	<!--- @private -->
	<s:Rect id="fill" left="1" right="1" top="1" bottom="1">
		<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>
	
	<!-- layer 2: fill lowlight -->
	<!--- @private -->
	<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1">
		<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 3: fill highlight -->
	<!--- @private -->
	<s:Rect id="highlight" left="1" right="1" top="1" bottom="1">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.0"
								 alpha="0.33" 
								 alpha.over="0.22" 
								 alpha.down="0.12"/>
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.48"
								 alpha="0.33"
								 alpha.over="0.22"
								 alpha.down="0.12" />
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.48001"
								 alpha="0" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 4: highlight stroke (all states except down) -->
	<!--- @private -->
	<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="0" radiusY="0" excludeFrom="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 5: highlight stroke (down state only) -->
	<!--- @private -->
	<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="0" radiusY="0" includeIn="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
				<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
				<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
				<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
				<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	<!--- @private -->
	<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="0" radiusY="0" includeIn="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
				<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 6: 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="18" height="21">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				
				<!-- 000000 -->
				<s:GradientEntry color="0xd2d2d2" 
								 alpha="0.5625"
								 alpha.down="0.6375" />
				<s:GradientEntry color="0xd2d2d2" 
								 alpha="0.75" 
								 alpha.down="0.85" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 7: arrow -->
	<!--- The arrow graphic displayed in the anchor button. -->
	<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
				The first part of the arrow's gradient fill. 
				The default alpha is .6. The default color if 0x000000.
				-->
				<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
				<!--- 
				@private 
				The second part of the arrow's gradient fill. 
				The default alpha is .6. The default color if 0x000000.
				-->
				<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
			</s:RadialGradient>
		</s:fill>
	</s:Path>
</s:SparkSkin>