<%@ Control Language="VB" AutoEventWireup="false" CodeFile="RetrieveUsernameStep1.ascx.vb"
    Inherits="Controls_RetrieveUsernameStep1" %>
<script type="text/JavaScript">

    function valPhoneOrAccount(source, args) {
        // this the custom validator control's validation function.
        // check to see they supplied an account number, if they did - continue
        // next check to see they supplied all three parts of the phone number
        // if both conditions fail, then fail the validation, otherwise, return success

        if (document.getElementById("<%= txtAccountNumber.ClientID %>").value != "") {
            args.IsValid = true;
        }
        else if (document.getElementById("<%= txtAreaCode.ClientID %>").value != "" &&
    		document.getElementById("<%= txtPrefix.ClientID %>").value != "" &&
    		document.getElementById("<%= txtExtension.ClientID %>").value != "") {
            args.IsValid = true;
        }
        else {
            args.IsValid = false;
        }
    } //end function

    function autotab(original) {
        if (original.id == '<%= txtPrefix.ClientID %>' && 
            original.value.length == original.getAttribute("maxlength"))
            document.getElementById('<%= txtExtension.ClientID %>').focus();

        if (original.id == '<%= txtAreaCode.ClientID %>' && 
            original.value.length == original.getAttribute("maxlength"))
            document.getElementById('<%= txtPrefix.ClientID %>').focus();
    }

    function ValidateEmptyBox(sender, args) {
        if (document.getElementById("<%= txtZipCode.ClientID %>").value != "")
            { args.IsValue = true; }
        else
            { args.IsValue = false; }
    }

    function clearPhoneOrAccountNumbers(original) {
        if (original.id == '<%= txtExtension.ClientID %>') {
            document.getElementById("<%= txtAccountNumber.ClientID %>").value = "";
        }
        if (original.id == '<%= txtAccountNumber.ClientID %>') {
            document.getElementById("<%= txtAreaCode.ClientID %>").value = "";
            document.getElementById("<%= txtPrefix.ClientID %>").value = "";
            document.getElementById("<%= txtExtension.ClientID %>").value = "";
        }
    }

    function setFocusToZipCode(original) {
        document.getElementById('<%= txtZipCode.ClientID %>').focus();
    }

</script>
    <asp:Label runat="server" ID="lblMultipleAccountMessage" ForeColor="Red" 
        Visible="false"> According to our records, the Phone Number entered is associated to multiple accounts. Please enter the Account Number or call 1-888-438-2427</asp:Label>
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td colspan="2" align="left">
            <!-- issue 27678 -->
                <asp:Label runat="server" ID="lblStep1Header" Font-Size="Larger" Font-Bold="true"
                    Text="Enter Home Phone Number or Account Number"></asp:Label>
                    <br />
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <div runat="server" id="tblPhoneNumber">
                    <tr>
                        <td colspan="2" align="left"> 
                        </td>
                    </tr>
                    <tr>
                        <td align="right" valign="middle" width="50%">
                            <sup><font color="red">*</font></sup>Home Phone Number&nbsp;&nbsp;
                        </td>
                        <td align="left" width="50%">
                            <asp:TextBox ID="txtAreaCode" 
                                runat="server" MaxLength="3" Width="30" onKeyup="autotab(this)" 
                                TabIndex="10000">
                            </asp:TextBox>
                            -<asp:TextBox ID="txtPrefix" runat="server" 
                                MaxLength="3" Width="30" onKeyup="autotab(this)"
                                TabIndex="10001">
                             </asp:TextBox>
                            -<asp:TextBox ID="txtExtension" runat="server" 
                                MaxLength="4" Width="40" TabIndex="10002" 
                                onFocus="clearPhoneOrAccountNumbers(this)"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <asp:RegularExpressionValidator runat="server" ID="revPrefix" ControlToValidate="txtAreaCode"
                                Display="Dynamic" ErrorMessage="Area Code must be three (3) digits." ForeColor="Red"
                                ValidationExpression="^\d{3}$" ValidationGroup="Step1" SetFocusOnError="true">
                            </asp:RegularExpressionValidator>
                            <asp:RegularExpressionValidator runat="server" ID="revAreaCode" ControlToValidate="txtPrefix"
                                Display="Dynamic" ErrorMessage="Prefix must be three (3) digits." ForeColor="Red"
                                ValidationExpression="^\d{3}$" ValidationGroup="Step1" SetFocusOnError="true">
                            </asp:RegularExpressionValidator>
                            <asp:RegularExpressionValidator runat="server" ID="revExtension" ControlToValidate="txtExtension"
                                Display="Dynamic" ErrorMessage="Extension must be four (4) digits." ForeColor="Red"
                                ValidationExpression="^\d{4}$" ValidationGroup="Step1" SetFocusOnError="true">
                            </asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <span style="text-decoration: line-through">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;or&nbsp;&nbsp;<span
                                style="text-decoration: line-through">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </td>
                    </tr>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <table>
                    <tr>
                        <td align="right" valign="middle" width="50%">
                            <sup><font color="red">*</font></sup>Account Number&nbsp;&nbsp;
                        </td>
                        <td align="left" width="50%">
                            <asp:TextBox runat="server" ID="txtAccountNumber" 
                                Width="120" MaxLength="16" TabIndex="9999"  
                                onFocus="clearPhoneOrAccountNumbers(this)" 
                                onBlur="setFocusToZipCode(this)">
                            </asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
				<asp:CustomValidator runat="server" ID="vldPhoneOrAccount" 
                    ClientValidationFunction="valPhoneOrAccount"
                    Display="Dynamic" ErrorMessage="You must supply a phone number or account number."
                    ForeColor="Red" ValidationGroup="Step1">
                </asp:CustomValidator>
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Label runat="server" ID="lblStep2Header" Font-Size="Larger" Font-Bold="true"
                    Text="Enter Service Address Zip Code"></asp:Label>
                <br />
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td align="right" width="50%">
                <sup><font color="red">*</font></sup>Service Address Zip Code&nbsp;&nbsp;
            </td>
            <td align="left">
                <asp:TextBox runat="server" ID="txtZipCode" Width="70" MaxLength="5" TabIndex="10004"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:RegularExpressionValidator runat="server" ID="revZipCode" ControlToValidate="txtZipCode"
                    ValidationGroup="Step1" ErrorMessage="Zip Code must be 5 digits." Display="Dynamic"
                    ForeColor="Red" ValidationExpression="^[0-9]{5}$" SetFocusOnError="true"/>
                <asp:RequiredFieldValidator runat="server" ID="rfvZipCode" ControlToValidate="txtZipCode"
                    ErrorMessage="You must supply a valid zip code." ForeColor="Red" Display="Dynamic"
                    ValidationGroup="Step1"/>
            </td>
        </tr>
    </table>