 package spark.skins.mobile 
 {
 
+import flash.display.Graphics;
 import flash.events.Event;
+import flash.events.FocusEvent;
+import flash.system.Capabilities;
 
 import mx.core.DPIClassification;
-import mx.core.UIComponentGlobals;
 import mx.core.mx_internal;
 import mx.events.FlexEvent;
 
+import spark.components.Group;
+import spark.components.Scroller;
 import spark.components.TextArea;
+import spark.components.VGroup;
+import spark.components.supportClasses.StyleableTextField;
 import spark.skins.mobile.supportClasses.TextSkinBase;
 import spark.skins.mobile160.assets.TextInput_border;
 import spark.skins.mobile240.assets.TextInput_border;


use namespace mx_internal;

/**
 *  ActionScript-based skin for TextArea components in mobile applications.
 * 

        // if we have an estimated width, use it here.  Otherwise, we'll keep it 
        // the same width as it was before
        if (!isNaN(estimatedWidth))
            textDisplayGroup.width = estimatedWidth;
        
        measuredHeight = Math.max(layoutMeasuredHeight, textDisplay.measuredTextSize.y + paddingTop + paddingBottom);
    }
    
    /**
     * @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        drawBackground(unscaledWidth, unscaledHeight);
        
        // position & size border
        if (border)
        {
            setElementSize(border, unscaledWidth, unscaledHeight);
            setElementPosition(border, 0, 0);
        }
        
        setElementSize(scroller, unscaledWidth, unscaledHeight);
        setElementPosition(scroller, 0, 0);
        
        // position & size the text
        var paddingLeft:Number = getStyle("paddingLeft");
        var paddingRight:Number = getStyle("paddingRight");
        var paddingTop:Number = getStyle("paddingTop");
        var paddingBottom:Number = getStyle("paddingBottom");
        
        textDisplayGroup.paddingLeft = paddingLeft;
        textDisplayGroup.paddingRight = paddingRight;
        textDisplayGroup.paddingTop = paddingTop;
        textDisplayGroup.paddingBottom = paddingBottom;
        
        var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
        
        // set width first to measure height correctly
        textDisplay.width = unscaledTextWidth;
        
        var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
        var textHeight:Number = unscaledTextHeight;
        
        // TextField height should match it's content or the TextArea bounds
        // iOS special case to prevent Flex Scroller scrolling
        if (!_isIOS || !textDisplay.editable)
            textHeight = Math.max(textDisplay.measuredTextSize.y, textHeight);
        
        setElementSize(textDisplay, unscaledTextWidth, textHeight);
        
        // size the Group to the StyleableTextField plus padding
        setElementSize(textDisplayGroup, unscaledWidth, paddingTop + textHeight + paddingBottom);
        
        if (promptDisplay)
        {
            promptDisplay.commitStyles();
            setElementSize(promptDisplay, unscaledTextWidth, unscaledTextHeight);
            setElementPosition(promptDisplay, paddingLeft, paddingTop);
        }
    }
    
    private function caret_changeHandler(event:Event):void
    {
        // TODO (jasonsj): caret positioning on iOS
        // textDisplayGroup.verticalScrollPosition = textDisplay.getCharBoundaries(textDisplay.caretIndex).y;
    }
    
    /**
     *  @private
     */
    private function textDisplay_changeHandler(event:Event):void
    {
        textDisplayGroup.invalidateSize();
    }
}
}