<?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 a Spark ToggleButton component.  

@see spark.components.ToggleButton

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkButtonSkin 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="20" minHeight="100"  height.selectedUpStates="100"  height.downStates="100" height.over="100" height.overAndSelected="100"
				   alpha.disabledStates="0.5" autoIconManagement="false" 
				   width="100%" height="100" >
	<!--h:33    height.selectedUpStates="37"  height.downStates="37" height.over="35" height.overAndSelected="37"-->
	<fx:Metadata>[HostComponent("spark.components.ButtonBarButton")]</fx:Metadata>
	
	<!-- host component -->
	<fx:Script fb:purpose="styling">
		
		<![CDATA[
			import mx.events.FlexEvent;
			
			protected function label1_initializeHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				var label:Label = event.currentTarget as Label; 
				var text:String = event.currentTarget.text; 
				var length:int = text.length; 
				var newText:String = ""; 
				for(var i:int = 0; i < length; i++) 
				{ 
					newText += text.charAt(i)+"\r\n"; 
				} 
				label.text = newText;
			}
		
			/* Define the skin elements that should not be colorized. 
			For toggle button, the graphics are colorized but the label is not. */
			static private const exclusions:Array = ["labelDisplay"];
			
			/**
			 * @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 = 2;
					//shadow.radiusX = cornerRadius;
//					fill.topLeftRadiusX = cornerRadius;
//					fill.topRightRadiusX= cornerRadius;
					fill.radiusX = cornerRadius;
				}
				
				
				
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
			
			private var cornerRadius:Number = 8;
		]]>
	</fx:Script>
	
	<!-- states -->
	<s:states>
		<!--一个组件会有8种状态-->
		<s:State name="up" /> <!--初始-->
		<s:State name="over" stateGroups="overStates" />  <!--鼠标悬停-->
		<s:State name="down" stateGroups="downStates" />  <!--鼠标按下去后-->
		<s:State name="disabled" stateGroups="disabledStates" />  <!-- 禁用   占时没有设置-->
		<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />   <!--选中-->
		<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />  
		<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
		<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
	</s:states>

	<s:Rect left="0" right="1" bottom="0" top="0">
		<s:fill>
			<s:SolidColor color.up="#cce8ff"
						  color.over="#afd3f1"
						  color.down="#afd3f1"
						  color.selectedStates="#afd3f1"
					 />
		</s:fill>
	</s:Rect>

	<s:Rect left="1" right="0" bottom="0" top="0">
		<s:fill>
			<s:SolidColor color.up="#cce8ff"
						  color.over="#afd3f1"
						  color.down="#EEF7FF"
						  color.selectedStates="#EEF7FF"
						  />
		</s:fill>
	</s:Rect>

	<s:Rect left="1" right="1" bottom="1" top="0">
		<s:fill>
			<s:SolidColor color.up="#cce8ff"
						  color.over="#afd3f1"
						  color.down="#afd3f1"
						  color.selectedStates="#afd3f1"
						  />
		</s:fill>
	</s:Rect>

	<s:Rect left="1" right="1" bottom="0" top="1">
		<s:fill>
			<s:SolidColor color.up="#cce8ff"
						  color.over="#afd3f1"
						  color.down="#afd3f1"
						  color.selectedStates="#afd3f1"
						  />
		</s:fill>
	</s:Rect>

	
	
	
	
	<s:Rect id="fill" left="1" right="1" top="1" bottom="1">  
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry ratio="0" alpha="1.0"  color.up="#cce8ff" color.over="#EEF7FF" color.down="#F5FAFE" color.selectedStates="#F5FAFE"  />
				<s:GradientEntry ratio="1"  alpha="1.0" color.up="#cce8ff" color.over="#EEF7FF" color.down="#F5FAFE" color.selectedStates="#F5FAFE"  />
			</s:LinearGradient>		
		</s:fill>		
	</s:Rect>


		
	<s:Label id="labelDisplay" maxDisplayedLines="0" textAlign="center" 
			 color="#2f6ea1" color.over="#2f6ea1" color.down="#2f6ea1"   color.selectedStates="#2f6ea1"  fontFamily="宋体"  fontSize="15"  
			 horizontalCenter="0" verticalCenter="10" left="-5" width="27" fontWeight="normal" fontWeight.over="normal" fontWeight.down="bold"  fontWeight.selectedStates="bold" creationComplete="label1_initializeHandler(event);" >
	</s:Label>
	
	
	<s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}" horizontalAlign="center" verticalAlign="middle" top="6" left="6"  />
	<s:DataGroup id="DataGroup" width="100%" height="100%" >
		<s:layout>
			<s:HorizontalLayout verticalAlign="top"/>
		</s:layout>
	</s:DataGroup>
	

	
</s:SparkButtonSkin>
