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

     @see spark.components.TextInput
        
      @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" >

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        private var paddingChanged:Boolean;
        
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background", "textDisplay"];

        /**
         * @private
         */   
        override public function get colorizeExclusions():Array {return exclusions;}
        
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];

        /**
         *  @private
         */
        override public function get contentItems():Array {return contentFill};
        
        /**
         *  @private
         */
        override protected function commitProperties():void
        {
            super.commitProperties();
            
            if (paddingChanged)
            {
                updatePadding();
                paddingChanged = false;
            }
        }
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
        
        /**
         *  @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                shadow.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
            }
            else
            {
                border.visible = false;
                shadow.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
            }
            
           // borderStroke.color = getStyle("borderColor");
          //  borderStroke.alpha = getStyle("borderAlpha");
            
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        /**
         *  @private
         */
        private function updatePadding():void
        {
            if (!textDisplay)
                return;
            
            // Push padding styles into the textDisplay
            var padding:Number;
            
            padding = getStyle("paddingLeft");
            if (textDisplay.getStyle("paddingLeft") != padding)
                textDisplay.setStyle("paddingLeft", padding);
            
            padding = getStyle("paddingTop");
            if (textDisplay.getStyle("paddingTop") != padding)
                textDisplay.setStyle("paddingTop", padding);
            
            padding = getStyle("paddingRight");
            if (textDisplay.getStyle("paddingRight") != padding)
                textDisplay.setStyle("paddingRight", padding);
            
            padding = getStyle("paddingBottom");
            if (textDisplay.getStyle("paddingBottom") != padding)
                textDisplay.setStyle("paddingBottom", padding);
        }
        
        /**
         *  @private
         */
        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);
            
            if (allStyles || styleProp.indexOf("padding") == 0)
            {
                paddingChanged = true;
                invalidateProperties();
            }
        }
    </fx:Script>
    
    <fx:Script>
        <![CDATA[
        /** 
         * @private 
         */     
        private static const focusExclusions:Array = ["textDisplay"];

        /**
         *  @private
         */
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
    
    <!-- shadow -->
    <!--- @private -->
    <s:Rect left="1" top="1" right="1" radiusX="5" height="1" id="shadow">
        <s:fill>
            <!--- @private Defines the background fill color. -->
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    
    <!-- border --> 
    <!--- @private -->
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" id="border">
        <s:stroke>     
            <!--- @private -->
            <s:LinearGradientStroke id="borderStroke" weight="2" rotation="90">
                <s:entries>
                    <s:GradientEntry color="#000000" alpha=".7" />
                    <s:GradientEntry color="#000000" alpha="0" />
                </s:entries>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" radiusX="5" right="1" top="1" bottom="1">
        <s:fill>
            <!--- @private Defines the background fill color. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    
    
    <!-- text -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:TextArea id="textDisplay" styleName="inputLabel" borderAlpha="0"
              widthInChars="10" maxWidth="238" width="238"
              left="1" right="1" top="1" bottom="1" fontSize.normal="12"/>

</s:SparkSkin>