<?xml version="1.0" encoding="utf-8"?>
<ui:TitleForm xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:mx="library://ns.adobe.com/flex/mx" 
              xmlns:form="com.afi.estimator.views.form.*" 
              xmlns:ui="com.afi.estimator.views.ui.*"
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:model="com.afi.estimator.model.*" 
              xmlns:vo="com.afi.estimator.views.vo.*"
              creationComplete="init()" >
    <fx:Script>
    
        <![CDATA[
            import com.afi.estimator.model.ContactModel;
            import com.afi.estimator.model.PagesModel;
            import com.afi.estimator.model.TextModel;
            import com.afi.estimator.style.buttons.GreenButton;
            import com.afi.estimator.style.forms.BlueAFIInput;
            import com.afi.estimator.views.View;
            import com.afi.estimator.views.paging.FormScroller;
            import com.afi.estimator.views.vo.ContactVO;
            import com.sharewithagent.ShareMain;
            import com.sharewithagent.services.valueObject.AgentContact;
            
            import mx.collections.ArrayCollection;
            
            [Bindable]public static var selectForMe:String = "Select an Agent for Me";
            
            [Bindable]public static var illSelect:String = "I'd Like to Pick an Agent";
            
            [Bindable]public static var email:String = 'Email';
            
            [Bindable]public static var phone:String = 'Phone';
            
            [Bindable]private var pageName:String = 'contactPage';
            
            
            
            [Bindable]private var header_padding:Number = 30;
            
            [Bindable]private var padding:Number = 5;
            
            [Bindable]private var labelWidth:Number = 110;
            
            [Bindable]private var inputWidth:Number = 238;
            
            public var view:View;
            
            [Bindable]public var statesArray:Array =
                ["AL","AK","AZ","AR","CA","CO","CT","DE","FL","GA","HI","ID","IL",
                    "IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT",
                    "NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI",
                    "SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"];    
            
            [Bindable]public var statesCollection:ArrayCollection = new ArrayCollection(statesArray);
            
            private var display_value:String;
            
            [Bindable]private var copy:Object;
            [Bindable]private var age:String;
            
            public function checkEmail(email:String):Boolean {
                var emailExpression:RegExp = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;
                return emailExpression.test(email);
            }
            
            private function init():void
            {
                view = this.parentApplication.getElementAt(0) as View;
                view.head.printVisibility = false;
                
                copy = TextModel.get(pageName);
                
                ContactModel.instance.selectedAgent = null; // Make sure each time the user fills ou the form this is reset.
                
                if(ContactModel.instance.VO.contact_method == '') {
                    contactMethod.selectedValue = ContactsPage.email;
                }
                
                if(ContactModel.instance.VO.name) contactVO = ContactModel.instance.VO;
                
                View.instance.nextprevious.currentState = 'both';
            }
            
            override public function next():void
            {
                if(valid()) {
                    
                    ContactModel.instance.VO.name = name_TI.text;
                    ContactModel.instance.VO.comments = comments_TI.text;
                    ContactModel.instance.VO.contact_method = contactMethod.selectedValue.toString();
                    ContactModel.instance.VO.phone = String(this.phoneAreaCode_TI.text+'-'+this.phonePrefix_TI.text+'-'+this.phoneNumber_TI.text);
                    ContactModel.instance.VO.email = email_TI.text;
                    ContactModel.instance.VO.address = address_TI.text;
                    ContactModel.instance.VO.city = city_TI.text;
                    ContactModel.instance.VO.state = states_DDL.selectedItem.toString();
                    ContactModel.instance.VO.zip = zip_TI.text;
                    ContactModel.instance.selectedAgent = null;
                    
                    if(!PagesModel.shareMain) {
                        var shareMain:ShareMain = new ShareMain();
                    }
                    
                    FormScroller.instance.next();    
                    
                }
            }
            
            private function valid():Boolean
            {
                var ret:Boolean = true;
                var msg:String = '';
                
                if(name_TI.text == '' || name_TI.text == copy.myNameInit) {
                    e_name_TI.visible = true;
                    e_name_TI.label = copy.fieldReq;
                    return false;
                } else {
                    e_name_TI.visible = false;
                }
                
                if(phoneNumber_TI.text == '' && contactMethod.selectedValue.toString() == copy.contactMethodPhone) {
                    e_phone.visible = true;
                    e_phone.label = copy.fieldReq;
                    return false;
                } else {
                    e_phone.visible = false;
                }
                
                if(!contactMethod.selectedValue) {
                    e_contactMethod.visible = true;
                    e_contactMethod.label = copy.fieldReq;
                    return false;
                } else {
                    e_contactMethod.visible = false;
                }
                
                if(email_TI.text == copy.emailInit && contactMethod.selectedValue.toString() == copy.contactMethodEmail) {
                    e_email_TI.visible = true;
                    e_email_TI.label = copy.fieldReq;
                    return false;
                } else {
                    e_email_TI.visible = false;
                }
                
                if(!checkEmail(email_TI.text) && contactMethod.selectedValue.toString() == copy.contactMethodEmail) {
                    e_email_TI.visible = true;
                    e_email_TI.label = copy.emailValid;
                    ret = false;
                } else {
                    e_email_TI.visible = false;
                }
                
                if (states_DDL.selectedIndex == -1) {
                    e_address_TI.visible = true;                    
                    e_address_TI.label = copy.stateReq;
                    return false;
                }
                
                if(zip_TI.text == '' || zip_TI.text == copy.zipInit) {
                    e_address_TI.visible = true;
                    e_address_TI.label = copy.zipReq;
                    return false;
                } else {
                    e_address_TI.visible = false;
                }
                
                return ret;
                
            }
            
            protected function name_TI_focusInHandler(event:FocusEvent):void
            {
                if(name_TI.text == copy.myNameInit) name_TI.text = '';
            }
            
            protected function name_TI_focusOutHandler(event:FocusEvent):void
            {
                if(name_TI.text == '') name_TI.text = copy.myNameInit;
            }
            
            
            
            protected function comments_TI_focusInHandler(event:FocusEvent):void
            {
                if(comments_TI.text == copy.commentsInit) comments_TI.text = '';
            }
            
            
            protected function comments_TI_focusOutHandler(event:FocusEvent):void
            {
                if(comments_TI.text == '') comments_TI.text = copy.commentsInit;
            }
            
            protected function address_TI_focusInHandler(event:FocusEvent):void
            {
                if(address_TI.text == copy.addressInit) address_TI.text = '';
            }
            
            
            protected function address_TI_focusOutHandler(event:FocusEvent):void
            {
                if(address_TI.text == '') address_TI.text = copy.addressInit;
            }
            
            
            protected function city_TI_focusInHandler(event:FocusEvent):void
            {
                if(city_TI.text == copy.cityInit) city_TI.text = '';
            }
            
            
            protected function city_TI_focusOutHandler(event:FocusEvent):void
            {
                if(city_TI.text == '') city_TI.text = copy.cityInit;
            }
            
            
            protected function zip_TI_focusInHandler(event:FocusEvent):void
            {
                if(zip_TI.text == copy.zipInit) zip_TI.text = '';
            }
            
            
            protected function zip_TI_focusOutHandler(event:FocusEvent):void
            {
                if(zip_TI.text == '') zip_TI.text = copy.zipInit;
            }
            
            protected function email_TI_focusInHandler(event:FocusEvent):void
            {
                if(email_TI.text == copy.emailInit) email_TI.text = '';
            }
            
            
            protected function email_TI_focusOutHandler(event:FocusEvent):void
            {
                if(email_TI.text == '') email_TI.text = copy.emailInit;
            }
            
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:RadioButtonGroup id="contactMethod" selectedValue="{contactVO.contact_method}"/>
        
        <s:VerticalLayout />
        
        <mx:CurrencyFormatter id="cur" currencySymbol="$" useThousandsSeparator="true" />
        <vo:ContactVO id="contactVO"
                      comments="{copy.commentsInit}" 
                      address="{copy.addressInit}" 
                      city="{copy.cityInit}" 
                      zip="{copy.zipInit}"
                      agent_selection_preference="" 
                      contact_method=""
                      name="{copy.myNameInit}" 
                      state="" 
                      phone="" 
                      email="{copy.emailInit}" />
    </fx:Declarations>
    
    <s:Label id="formTitle" text="{copy.title}" styleName="formTitle" paddingBottom="20"/> 
    
    <s:Group>
        <s:Group width="500" id="theContainer">
            
            <!--<ui:BlueFormbackground width="100%" height="100%" />-->
            <ui:Formbackground width="100%" height="100%" />
            
            <s:VGroup horizontalAlign="center">
                
                <s:VGroup paddingLeft="{header_padding}" 
                          paddingRight="{header_padding}" 
                          paddingTop="{header_padding}" 
                          paddingBottom="{header_padding}"
                          gap="20">
                    
                    <s:HGroup verticalAlign="middle">
                        <ui:ErrorAlert id="e_name_TI" />
                        <s:Label width="{labelWidth}" text="{copy.myName}" />
                        <s:TextInput tabIndex="1"
                                     text="{contactVO.name}" 
                                     focusIn="name_TI_focusInHandler(event)" 
                                     focusOut="name_TI_focusOutHandler(event)" 
                                     id="name_TI" 
                                     skinClass="com.afi.estimator.style.forms.BlueAFIInput" 
                                     width="{inputWidth}" />
                    </s:HGroup>    
                    
                    <s:HGroup verticalAlign="top">
                        <ui:ErrorAlert id="e_comments_TI" />
                        <s:Label width="{labelWidth}" text="{copy.comments}"  />
                        <s:TextArea id="comments_TI" focusIn="comments_TI_focusInHandler(event)" 
                                    text="{contactVO.comments}" maxWidth="{inputWidth}"
                                    focusOut="comments_TI_focusOutHandler(event)"
                                    tabIndex="2" height="80" skinClass="com.afi.estimator.style.forms.BlueAFITextArea" width="{inputWidth}" />
                    </s:HGroup>
                    
                    
                    <s:HGroup verticalAlign="middle" horizontalAlign="center">
                        <ui:ErrorAlert id="e_contactMethod" />
                        <s:Label text="{copy.contactMethod}" paddingRight="10"/>
                        <s:RadioButton tabIndex="3" groupName="contactMethod" color="#FFFFFF" skinClass="com.afi.estimator.style.forms.AFICheckbox" value="{ContactsPage.phone}" label="{copy.contactMethodPhone}" />
                        <s:RadioButton tabIndex="4" groupName="contactMethod" color="#FFFFFF" skinClass="com.afi.estimator.style.forms.AFICheckbox" value="{ContactsPage.email}" label="{copy.contactMethodEmail}" />
                    </s:HGroup>
                    
                    <s:HGroup verticalAlign="middle" includeInLayout="{contactMethod.selectedValue == copy.contactMethodPhone}"   visible="{contactMethod.selectedValue == copy.contactMethodPhone}">
                        <ui:ErrorAlert id="e_phone" />
                        <s:Label text="Phone"  width="{labelWidth}" />
                        <s:TextInput id="phoneAreaCode_TI" restrict="0-9 \-" skinClass="com.afi.estimator.style.forms.BlueAFIInput" 
                                     width="35" maxChars="3" text="{contactVO.phone.split('-')[0]}" tabIndex="5"/>
                        <s:TextInput id="phonePrefix_TI"  restrict="0-9 \-" skinClass="com.afi.estimator.style.forms.BlueAFIInput" 
                                     width="35" maxChars="3" tabIndex="6" text="{contactVO.phone.split('-')[1]}"/>
                        <s:TextInput id="phoneNumber_TI"  restrict="0-9 \-" skinClass="com.afi.estimator.style.forms.BlueAFIInput" 
                                     width="60" maxChars="4" tabIndex="7" text="{contactVO.phone.split('-')[2]}"/>
                        
                    </s:HGroup>
                    <s:VGroup includeInLayout="{contactMethod.selectedValue == copy.contactMethodEmail}" >
                        <s:HGroup verticalAlign="middle" includeInLayout="{contactMethod.selectedValue == copy.contactMethodEmail}" visible="{contactMethod.selectedValue == copy.contactMethodEmail}">
                            <ui:ErrorAlert id="e_email_TI" />
                            <s:Label text="{copy.emailLabel}" width="{labelWidth}" />
                            <s:TextInput id="email_TI"  text="{contactVO.email}" focusIn="email_TI_focusInHandler(event)" focusOut="email_TI_focusOutHandler(event)"
                                         tabIndex="5" skinClass="com.afi.estimator.style.forms.BlueAFIInput" width="{inputWidth}" />
                        </s:HGroup>
                        
                    </s:VGroup>
                    
                    <s:HGroup verticalAlign="middle">
                        <ui:ErrorAlert id="e_address_TI" />
                        <s:Label width="{labelWidth}" text="{copy.address}" />
                        <s:TextInput tabIndex="8" focusIn="address_TI_focusInHandler(event)" focusOut="address_TI_focusOutHandler(event)" skinClass="com.afi.estimator.style.forms.BlueAFIInput" borderColor="#215676" text="{contactVO.address}" borderAlpha="0" width="100" id="address_TI" />
                        <s:TextInput tabIndex="9" focusIn="city_TI_focusInHandler(event)" focusOut="city_TI_focusOutHandler(event)" skinClass="com.afi.estimator.style.forms.BlueAFIInput" width="65" text="{contactVO.city}" id="city_TI" />
                        <s:DropDownList tabIndex="10" id="states_DDL" selectedItem="{contactVO.state}" width="73" prompt="State" dataProvider="{statesCollection}"></s:DropDownList>
                        <s:TextInput tabIndex="11" restrict="0-9 \-" focusIn="zip_TI_focusInHandler(event)" focusOut="zip_TI_focusOutHandler(event)" skinClass="com.afi.estimator.style.forms.BlueAFIInput" text="{contactVO.zip}" width="53" id="zip_TI"></s:TextInput>
                    </s:HGroup>    
                    
                </s:VGroup>
                
            </s:VGroup>
            
        </s:Group>
        
    </s:Group>
    
</ui:TitleForm>