<?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 default skin class for the Spark Button component.  

@see spark.components.Button

@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="21" minHeight="21" alpha.disabled="0.5" 
			 xmlns:mx="library://ns.adobe.com/flex/mx" 
			 creationComplete="init();"
			 height="40" width="40">
	
	<!-- host component -->
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.GroupSkin#hostComponent
		*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata>
	
	<fx:Script fb:purpose="styling">
		<![CDATA[
			/* Define the skin elements that should not be colorized. 
			For button, the graphics are colorized but the label is not. */
			static private const exclusions:Array = ["labelDisplay"];
			
			private function init():void
			{
				try
				{
					currImg.source = hostComponent.accessibilityDescription;
				}
				catch(e:Error)
				{
					
				}
			}
			
			/** 
			 * @private
			 */     
			override public function get colorizeExclusions():Array {return exclusions;}
			
			/**
			 * @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.radiusX = cornerRadius;
					lowlight.radiusX = cornerRadius;
					highlight.radiusX = cornerRadius;
					border.radiusX = cornerRadius;
				}
				
				if (highlightStroke) highlightStroke.radiusX = cornerRadius;
				if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
				if (hldownstroke2) hldownstroke2.radiusX = cornerRadius; 
				
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
			
			private var cornerRadius:Number = 2;
		]]>        
	</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: 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.down="0xFFFFFF"
								 alpha="0.01"
								 alpha.down="0" />
				<s:GradientEntry color="0x000000" 
								 color.down="0xFFFFFF" 
								 alpha="0.07"
								 alpha.down="0.5" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 2: fill -->
	<!--- @private -->
	<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="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>
	
	<!-- 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.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 5: highlight stroke (all states except down) -->
	<!--- @private -->
	<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" 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 6: highlight stroke (down state only) -->
	<!--- @private -->
	<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" 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="2" 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 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">
				<s:GradientEntry color="0x000000" 
								 alpha="0.5625"
								 alpha.down="0.6375" />
				<s:GradientEntry color="0x000000" 
								 alpha="0.75" 
								 alpha.down="0.85" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 8: text -->
	<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
	<s:Label id="labelDisplay"
			 textAlign="center"
			 verticalAlign="middle"
			 maxDisplayedLines="1"
			 horizontalCenter="0" verticalCenter="1"
			 left="10" right="10" top="2" bottom="2" text="">
	</s:Label>
	
	<mx:Image id="currImg" source="@Embed('flexResources/map/pan.png')" width="28" height="28" horizontalCenter="0" verticalCenter="0"/>
	
</s:SparkSkin>
