<!--

      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.

-->
<!--- A skin class for the Spark WindowedApplication component. 
      This class defines the Flex chrome which includes a border, status bar, 
      gripper button, title bar, and title bar buttons.
      
      <p>You can either use  system chrome, the FlexChromSkin class, or 
      the WindowedApplicationSkin class to define the appearance of 
      the WindowedApplication and Window containers. 
      To use the FlexChromSkin class with the WindowedApplication container, 
      set <code>systemChrome</code> to "none" 
      in the application's .xml file, and set the <code>skinClass</code> style to
      spark.skins.spark.FlexChromSkin. 
      To use the FlexChromSkin class with the Window container, 
      set the <code>Window.systemChrome</code> property to "none", 
      and set the <code>skinClass</code> style to
      spark.skins.spark.FlexChromSkin.</p>

      @see spark.components.WindowedApplication

      @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" alpha.disabledGroup="0.5" >

    <fx:Metadata>
      /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
      [HostComponent("Object")]
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        /*  Define the skin elements that should not be colorized. 
         *  For WindowedApplication, border and status bar background are colorized,
         *  but the content area and status text are not. 
         *  Exclude the titleBar because it is a SparkSkin and we 
         *  don't want to colorize it twice.
         * 
         * @langversion 3.0
         * @playerversion Flash 10
         * @playerversion AIR 1.5
         * @productversion Flex 4 
         */
        static private const exclusions:Array = ["backgroundRect", "contentGroup", "titleBar",
                                                 "titleBarBackgroundRect", "statusText",
                                                 "borderBgFill"];

        /**
         * @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
        {
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    </fx:Script>
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledGroup" />
        <s:State name="normalAndInactive" stateGroups="inactiveGroup" />
        <s:State name="disabledAndInactive" stateGroups="disabledGroup, inactiveGroup" />
    </s:states>

    <!-- layer 1: background fill -->
    <!--- Defines the background color of the skin. -->
    <s:Rect id="backgroundRect" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="backgroundFill"/>
        </s:fill>
    </s:Rect>

    <!-- title bar background fill for when the title bar is inactive -->
    <!--- Defines the background color of the title bar. -->
    <s:Rect id="titleBarBackgroundRect" left="0" right="0" top="0" height="24" visible="{titleBar.visible}" >
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="titleBarBgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>

        
    <!-- layer 2: titlebar + content + status bar -->
    <s:Group left="1" right="1" top="1" bottom="1" minHeight="24" minWidth="0" >
        <s:layout>
            <s:VerticalLayout gap="0"/>
        </s:layout>
    
        <!-- title bar to display when not using 'systemChrome' -->
        <!--- @copy spark.components.WindowedApplication#titleBar -->
        <s:TitleBar id="titleBar" width="100%" minHeight="24" alpha.inactiveGroup="0.5" />
        
        <!-- content -->
        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0"/>
        
        <!-- status bar -->
        <!--- @copy spark.components.WindowedApplication#statusBar -->
        <s:Group id="statusBar" width="100%" minHeight="24" >
        
            <!-- status bar fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xE2E2E2" />
                        <s:GradientEntry color="0xD9D9D9" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>
            
            <!-- status bar highlight -->
            <s:Rect left="1" right="1" top="1" bottom="0" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xEAEAEA" />
                        <s:GradientEntry color="0xBEBEBE" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>
        
            <!-- status text -->
            <!--- @copy spark.components.WindowedApplication#statusText -->
            <s:Label id="statusText" top="2" bottom="2" left="10" right="10" verticalAlign="middle" 
                fontSize="10" color="0x585858" width="100%" maxDisplayedLines="1" />
                    
        </s:Group> 

    </s:Group>
    
    <!-- layer 3: gripper -->
    <!--- 
        By default, the button uses the spark.skins.spark.windowChrome.GripperSkin class
        to define the skin for the gripper button.
            
        @copy spark.components.WindowedApplication#gripper
    
        @see spark.skins.spark.windowChrome.GripperSkin 
    -->
    <s:Button id="gripper" right="3" bottom="3" tabEnabled="false" 
              skinClass="spark.skins.spark.windowChrome.GripperSkin" /> 

    <!-- layer 4: border -->
    
    <!-- background of border for when it is alpha=0.5 -->
    <!--- Defines the background color of the border. -->
    <s:Group id="borderBgFill" left="0" right="0" top="0" bottom="0" >
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:stroke>
                <s:SolidColorStroke weight="1" color="0xFFFFFF" />
            </s:stroke>
        </s:Rect>
    </s:Group>

    <!-- the border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke alpha.inactiveGroup="0.5" weight="1" color="0xA6A6A6" />
        </s:stroke>
    </s:Rect>
        
</s:SparkSkin>
