<!--

      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 default skin class for the title bar of the Spark WindowedApplication component
      and Spark Window component when you use Flex chrome.  
      The title bar skin includes the close, minimize, and maximize buttons, the 
      title icon, and the title text.

      <p>The Flex chrome is defined by the SparkChromeWindowedApplicationSkin skin class 
      in the spark.skins.spark package. 
      To use the Flex chrome, set <code>systemChrome</code> to "none" in the application's .xml file,
      and set the <code>skinClass</code> style to spark.skins.spark.SparkChromeWindowedApplicationSkin. </p>

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4

      @see spark.components.WindowedApplication
      @see spark.components.Window
      @see spark.skins.spark.SparkChromeWindowedApplicationSkin
-->
<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" xmlns:mx="library://ns.adobe.com/flex/mx" 
             minHeight="24" >

    <fx:Metadata>
      /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
      [HostComponent("spark.components.windowClasses.TitleBar")]
    </fx:Metadata> 
  
    <fx:Script fb:purpose="styling">
        /*  Define the skin elements that should not be colorized. 
         *  Exclude the titleBar and scroller because they are SparkSkins and we 
         *  don't want to colorize them twice.
         */
        static private const exclusions:Array = ["titleIconImage", "titleText"];
        
        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }   
    </fx:Script>
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalAndMaximized" stateGroups="maximizedGroup" />
        <s:State name="disabledAndMaximized" stateGroups="maximizedGroup" />
    </s:states>

    <!-- fill -->
    <!--- Defines the background color of the skin. -->
    <s:Rect id="background" left="67" right="0" top="0" bottom="0" radiusX="8" radiusY="8" >
        <s:fill>
            <!--- @private -->
            <s:LinearGradient x="165.5" scaleX="27" rotation="90">
                <s:GradientEntry color="#ffffba" ratio="0"/>
                <s:GradientEntry color="#fbb83b" ratio="1"/>
            </s:LinearGradient>

        </s:fill>
        <s:filters>
            <s:DropShadowFilter alpha="0.5" angle="80" blurX="8" blurY="8" distance="2"/>
        </s:filters>
    </s:Rect>
        
    <s:Group minHeight="24" width="100%" height="100%" left="69" right="2" >
    
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" gap="5" />
        </s:layout>

        <!-- title bar icon -->
        <!--- @copy spark.components.windowClasses.TitleBar#titleIconImage -->
        <s:BitmapImage id="titleIconImage" minWidth="0" fillMode="clip"/>
        
        <!-- title -->
        <!--- @copy spark.components.windowClasses.TitleBar#titleText -->
        <s:Label id="titleText" minWidth="0" fontSize="9" color="#000000" maxDisplayedLines="1" width="100%" />

        <!-- minimize button --> 
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MinimizeButtonSkin class
            to define the skin for the mimimized button.
            
            @copy spark.components.windowClasses.TitleBar#minimizeButton 
        
            @see spark.skins.spark.windowChrome.MinimizeButtonSkin 
        -->
        <s:Button id="minimizeButton"
            skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
            top="2" bottom="2" verticalCenter="0" 
            />
        
        <!-- maximize button -->
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MinimizeButtonSkin class
            to define the skin for the maximized button.
            
            @copy spark.components.windowClasses.TitleBar#maximizeButton
        
            @see spark.skins.spark.windowChrome.MaximizeButtonSkin 
        -->
        <s:Button id="maximizeButton" 
            skinClass="spark.skins.spark.windowChrome.MaximizeButtonSkin"
            skinClass.maximizedGroup="spark.skins.spark.windowChrome.RestoreButtonSkin"
            verticalCenter="0" 
            />
                        
        <!-- close button -->
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MinimizeButtonSkin class
            to define the skin for the close button.
            
            @copy spark.components.windowClasses.TitleBar#closeButton 
        
            @see spark.skins.spark.windowChrome.CloseButtonSkin 
        -->
        <s:Button id="closeButton" 
            skinClass="spark.skins.spark.windowChrome.CloseButtonSkin"
            verticalCenter="0"  />
    
    </s:Group>

</s:SparkSkin>