<!--

      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 for an Apple Macintosh 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>
    
    <fx:Script>
        /**
         *  @private 
         *  Override to keep the spacer's width up-to-date.
         */ 
        override protected function updateDisplayList(unscaledWidth:Number,
                                                   unscaledHeight:Number):void
        {
            /** Spacer. Create enough space move the titleIcon and titleText to the
             *  right so they are centered.
             *  "0 + titleText.width - titleText.width" is a trick so binding will call
             *  us when the titleText changes width. We can't use titleText.width in the 
             *  expression because its width is 100% percent, which is not the measured size of
             *  the text (the size includes layout space). We call getPreferredBoundsWidth()
             *  to get the actual size of the text. 
             
             *  In the below formula:
             *  4 = 2 (left margin) + 2 (right margin)
             *  5 = gap between the titleIcon and the titleText
             *  58 = 2 (left margin) + 4 * 5 (four gaps of 5 pixels) + 3 * 12 (three images, each 12 pixels wide)
             */
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            spacer.width = Math.max(0, ((hostComponent.width - titleText.getPreferredBoundsWidth() - 
                   titleIconImage.getPreferredBoundsWidth() - 4 - 5) / 2) - 58);
        }
    </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="0" right="0" top="0" bottom="0" radiusX="2" radiusY="2" >
        <s:fill>
            <!--- @private -->
            <s:LinearGradient id="bgFill" rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xBABABA" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
        
    <s:Group minHeight="24" width="100%" height="100%"
            left="2" right="2" >

        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" gap="5" />
        </s:layout>

        <!-- close button -->
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MacCloseButtonSkin class
            to define the skin for the close button.
        
            @copy spark.components.windowClasses.TitleBar#closeButton
            
            @see spark.skins.spark.windowChrome.MacCloseButtonSkin 
        -->
        <s:Button id="closeButton" 
            skinClass="spark.skins.spark.windowChrome.MacCloseButtonSkin"
            verticalCenter="0" />
    
        <!-- mac minimize button --> 
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MacMinimizeButtonSkin class
            to define the skin for the mimimized button.
            
            @copy spark.components.windowClasses.TitleBar#minimizeButton 
        
            @see spark.skins.spark.windowChrome.MacMinimizeButtonSkin 
        -->
        <s:Button id="minimizeButton"
            skinClass="spark.skins.spark.windowChrome.MacMinimizeButtonSkin"
            top="2" bottom="2" verticalCenter="0" />
        
        <!-- maximize button -->
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MacMaximizeButtonSkin class
            to define the skin for the maximized button.
            
            @copy spark.components.windowClasses.TitleBar#maximizeButton
        
            @see spark.skins.spark.windowChrome.MacMaximizeButtonSkin 
        -->
        <s:Button id="maximizeButton" 
            skinClass="spark.skins.spark.windowChrome.MacMaximizeButtonSkin"
            verticalCenter="0" />
                        
        <!--- @private
              Spacer. Create enough space move the titleIcon and titleText to the
              right so they are centered.
        -->
        <mx:Spacer id="spacer" minWidth="0" /> 
 
        <!-- 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="#585858" maxDisplayedLines="1" width="100%" />
    </s:Group>

</s:SparkSkin>
