<?xml version="1.0" encoding="utf-8"?>
<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2010 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.

-->

<!-- TODO
Move the indicator tooltip string to a resource bundle
-->

<!--- An alternate skin class for the Spark FormItem component 
which positions the label above the content.

@see spark.components.FormItem

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4.5
-->
<s:Skin 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.disabledStates=".5">
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.FormItem")]
        ]]>
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                }
                else
                {
                    background.visible = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
                
                var indicatorSource:Object; 
                if (currentState == "error" || currentState == "requiredAndError")
                    indicatorSource = getStyle("errorIndicatorSource");
                else if (currentState == "required" || "requiredAndDisabled")
                    indicatorSource = getStyle("requiredIndicatorSource");
                
                if (indicatorSource && indicatorDisplay)
                {
                    indicatorDisplay.source = indicatorSource;
                }
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            /**
             *  @private
             */
            override public function setCurrentState(stateName:String, playTransition:Boolean=true):void
            {
                super.setCurrentState(stateName, playTransition);
                invalidateDisplayList();
            }

        ]]>        
    </fx:Script>    
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledStates"/> 
        <s:State name="error" stateGroups="errorStates"/>   
        <s:State name="required" stateGroups="requiredStates"/> 
        <s:State name="requiredAndDisabled" stateGroups="requiredStates, disabledStates"/>
        <s:State name="requiredAndError" stateGroups="requiredStates, errorStates"/>    
    </s:states>
    
    <s:layout>
        <s:FormItemLayout>
            <s:constraintColumns>
                <!--- The column containing the sequence label. -->
                <s:ConstraintColumn id="sequenceCol" />
                <!--- The column containing the FormItem's label and content. -->
                <s:ConstraintColumn id="contentCol" width="100%"/>
                <!--- The column containing the FormItem's help content. -->
                <s:ConstraintColumn id="helpCol" maxWidth="200"/>
            </s:constraintColumns>         
            <s:constraintRows>
                <!--- @private -->
                <s:ConstraintRow id="row1" baseline="maxAscent:10"/>
                <!--- @private -->
                <s:ConstraintRow id="row2" height="100%"/>
            </s:constraintRows>  
        </s:FormItemLayout>
    </s:layout>    
                
    <!--- Defines the appearance of the FormItem's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
    
    <!--- @copy spark.components.FormItem#sequenceLabelDisplay -->
    <s:Label id="sequenceLabelDisplay"
             fontWeight="bold"
             left="sequenceCol:10" right="sequenceCol:5"
             bottom="row1:5" baseline="row1:0"/>
    <!--- @copy spark.components.FormItem#labelDisplay -->
    <s:Label id="labelDisplay"
             fontWeight="bold"
             left="contentCol:0" right="contentCol:5"
             bottom="row1:5" baseline="row1:0"/>
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" 
             showErrorTip="false" showErrorSkin="true"
             left="contentCol:0" right="contentCol:1" 
             top="row2:0" bottom="row2:10" baseline="row2:0">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
    </s:Group>
    <s:Group x="{contentGroup.x + contentGroup.contentWidth + 4}" y="{contentGroup.y}"
             height="{Math.max(indicatorDisplay.height, contentGroup.contentHeight)}" includeInLayout="false">
        <!--- @private -->
        <s:Image id="indicatorDisplay" verticalCenter="0"
                  toolTip="Required" toolTip.errorStates="{hostComponent.errorString}"
                  includeIn="requiredStates,errorStates"/>
    </s:Group>
    <!--- @copy spark.components.FormItem#helpContentGroup -->
    <s:Group id="helpContentGroup"
             fontStyle="italic" fontWeight="normal" color="0x666666" 
             left="helpCol:27" right="helpCol:10" 
             bottom="row2:10" baseline="row2:0"/>
</s:Skin>