<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" visible="false" includeInLayout="false"
         xmlns:mx="library://ns.adobe.com/flex/mx" currentState="left"
         creationComplete="creationComplete()">
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import com.afi.estimator.util.ValidationUtil;
            
            import spark.components.DropDownList;
            import spark.components.RadioButtonGroup;
            import spark.components.TextInput;
            
            public static const LEFT:String = "left";
            public static const RIGHT:String = "right";
            
            [Bindable]public var label:String = "Required";
            
            [Bindable]public var padding:Number;
            
            public var control:Object;
            public var defaultValue:Object;
            
            
            public function creationComplete():void {
                ValidationUtil.instance.addEventListener(ValidationUtil.VALIDATE, function():void {
                    if(control is Array) {
                        var oneInvalid:Boolean = false;
                        var arr:Array = control as Array;
                        arr.map(function(obj:Object, ...rest):void {
                            var input:String = obj.input.text;
                            var defaultInput:String = obj.defaultInput;
                            var controlIsValid:Boolean = ValidationUtil.validateTI(input,defaultInput);
                            if(!controlIsValid){
                                oneInvalid = true;
                            }
                        })
                        visible = oneInvalid;
                    }
                    if(control is TextInput) {
                        visible = !ValidationUtil.validateTI(control.text, defaultValue as String);
                    }
                    if(control is DropDownList) {
                        visible = !ValidationUtil.validateDDL(control.selectedIndex);
                    }
                    if(control is RadioButtonGroup) {
                        visible = !ValidationUtil.validateRBG(control.selectedValue);
                    }
                })
            }
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="left"/>
        <s:State name="right"/>
    </s:states>
    
    <mx:Image id="img" source="@Embed(source='/com/afi/estimator/assets/images/red-error-alert.png')" x.left="-25" x.right="0"/>
    
    <!-- Left side renderer -->
    <s:Group id="leftAlert" x="{-(leftAlert.width + 25)}" y="-2" includeIn="left">
        <s:filters>
            <s:DropShadowFilter
                blurX="3" blurY="3"
                color="0x04355f"
                distance="0"
                alpha=".4"
                angle="90" />
        </s:filters>
        
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="#FF0000"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="#FFFFFF"/>
            </s:stroke>
        </s:Rect>
        <!--
        <s:Path data="M 0 0 L 5 10 L 0 20">
            <s:fill>
                <s:SolidColor color="#FF0000"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="#FFFFFF"/>
            </s:stroke>
        </s:Path>
        -->
        <s:VGroup paddingBottom="8" paddingTop="8" paddingLeft="8" paddingRight="8">
            <s:Label text="{label}" color="#FFFFFF" maxWidth="150"/>
        </s:VGroup>
    </s:Group>
    
    <!-- Right side renderer -->
    <s:Group includeInLayout="false">
        <s:Group id="rightAlert" x="{img.width}" y="-2" includeIn="right">
            <s:filters>
                <s:DropShadowFilter
                    blurX="3" blurY="3"
                    color="0x04355f"
                    distance="0"
                    alpha=".4"
                    angle="90" />
            </s:filters>
            
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:SolidColor color="#FF0000"/>
                </s:fill>
                <s:stroke>
                    <s:SolidColorStroke color="#FFFFFF"/>
                </s:stroke>
            </s:Rect>
            <s:VGroup paddingBottom="8" paddingTop="8" paddingLeft="8" paddingRight="8">
                <s:Label text="{label}" color="#FFFFFF" maxWidth="150"/>
            </s:VGroup>
        </s:Group>
    </s:Group>
    
</s:Group>