<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*"  viewSourceURL="srcview/index.html"
    creationComplete="handler.execute();">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            /**
             * Switch between search and replace modes
             */
            private function updateState(event:Event):void
            {
                currentState = event.target.selectedItem.state;
                callLater(handler.checkExecute);
            }

            /**
             * Switch between showing the manual execute button.
             */
            private function toggleButton():void
            {
                action.visible = !continuous.selected;
                callLater(handler.checkExecute);
            }
        ]]>
    </mx:Script>
    <mx:Style>
       Label {
           font-weight: bold;
       } 
    </mx:Style>
    <!-- Logic for regexps -->
    <local:RegExpHandler id="handler" regExpTester="{this}"/>
    <!-- Default view -->
    <mx:VDividedBox id="mainArea" width="100%" height="100%">
        <mx:HBox id="regexpArea" width="100%" height="15%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Regular Expression"/>
                <mx:TextArea id="regexp" width="100%" height="100%" change="handler.checkExecute();">
                    <mx:text>reg?e*([xp])?</mx:text>
                </mx:TextArea>
            </mx:VBox>
        </mx:HBox>
        <mx:HBox id="optionsArea" width="100%" height="5%">
            <mx:CheckBox id="global" label="Global" click="handler.checkExecute();" selected="true"/>
            <mx:CheckBox id="ignoreCase" label="Ignore Case" click="handler.checkExecute();"/>
            <mx:CheckBox id="dotall" label="Dot Matches New-line" click="handler.checkExecute();"/>
            <mx:CheckBox id="multiline" label="Multi-line" click="handler.checkExecute();"/>
            <mx:CheckBox id="extended" label="Extended Format" click="handler.checkExecute();"/>
            <mx:Button id="action" label="Search" click="handler.execute();"/>
            <mx:CheckBox id="continuous" label="Continuous" click="toggleButton();"/>
            <mx:ComboBox id="mode" change="updateState(event);">
                <mx:ArrayCollection>
                    <mx:Object label="Search Mode" state=""/>
                    <mx:Object label="Replace Mode" state="replaceMode"/>
                    <mx:Object label="Split Mode" state="splitMode"/>
                </mx:ArrayCollection>
            </mx:ComboBox>
        </mx:HBox>
        <mx:VBox width="100%" height="40%">
            <mx:Label text="Sample Text" styleName="label"/>
            <mx:TextArea id="input" width="100%" height="100%" change="handler.checkExecute();">
                <mx:text>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </mx:text>
            </mx:TextArea>
        </mx:VBox>
        <mx:VBox id="resultsVBox" width="100%" height="40%">
            <mx:Label text="Matching Text" styleName="label"/>
            <mx:DataGrid id="results" editable="false" width="100%" height="100%" click="handler.highlight(event);">
                <mx:columns>
                    <mx:Array>
                        <mx:DataGridColumn dataField="position" headerText="Position" width="100"/>
                        <mx:DataGridColumn dataField="group" headerText="Group Number" width="100"/>
                        <mx:DataGridColumn dataField="match" headerText="Matched String"/>
                    </mx:Array>
               </mx:columns>
            </mx:DataGrid>
        </mx:VBox>
    </mx:VDividedBox>
    <!-- Changes to support replace state -->
    <mx:states>
        <mx:State name="replaceMode">
            <mx:AddChild relativeTo="{regexpArea}">
                <mx:VBox width="100%" height="100%">
                    <mx:Label text="Replacement Pattern" styleName="label"/>
                    <mx:TextArea id="replaceText" width="100%" height="100%" change="handler.checkExecute()"/>
                </mx:VBox>
            </mx:AddChild>
            <mx:SetProperty target="{action}" name="label" value="Replace"/>
            <mx:RemoveChild target="{resultsVBox}"/>
            <mx:AddChild relativeTo="{mainArea}">
                <mx:VBox width="100%" height="40%">
                    <mx:Label text="Replaced Text" styleName="label"/>
                    <mx:TextArea id="replaceOutput" wordWrap="false" width="100%" height="100%" editable="false"/>
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
        <mx:State name="splitMode">
            <mx:SetProperty target="{action}" name="label" value="Split"/>
            <mx:RemoveChild target="{resultsVBox}"/>
            <mx:AddChild relativeTo="{mainArea}">
                <mx:VBox width="100%" height="40%">
                    <mx:Label text="Split Text" styleName="label"/>
                    <mx:DataGrid id="splitData" editable="false" width="100%" height="100%">
                        <mx:columns>
                            <mx:Array>
                                <mx:DataGridColumn dataField="position" headerText="Position" width="100"/>
                                <mx:DataGridColumn dataField="match" headerText="String"/>
                            </mx:Array>
                       </mx:columns>
                    </mx:DataGrid>
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>
</mx:Application>