// demo.html

<HTML>
<HEAD>
    <SCRIPT LANGUAGE="Javascript" SRC="wCLASSInit.js"></SCRIPT>
    <SCRIPT LANGUAGE="Javascript" SRC="SelectSort.js"></SCRIPT>
    <SCRIPT LANGUAGE="Javascript" SRC="FormatText.js"></SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="Javascript">
    var c;
    function resort(ss)
    {
        ss.sortMethod = (c.sortMethod == 'alpha')? 'num': 'alpha';
        ss.sortOptions();
    }
</SCRIPT>
<BODY onload="init(document); 
      c=new SelectSort(document.demoForm.NumberList,'num');">
<FORM NAME="demoForm">
<TABLE NAME="demoTable" BORDER="0" CELLPADDING="10" CELLSPACING="0">
    <TR>
        <TD COLSPAN="5" ALIGN="CENTER" BGCOLOR="AABB99">
            <B><FONT SIZE="+1">Javascript Component Demo</FONT></B>
        </TD>
    </TR>
    <TR>
        <TD BGCOLOR="EEFFDD"><B>Numbers:</B></TD>
        <TD BGCOLOR="EEFFDD">
            <SELECT NAME="NumberList">
                <OPTION VALUE="a">222</OPTION>
                <OPTION VALUE="b">1111</OPTION>
                <OPTION VALUE="c">4</OPTION>
                <OPTION VALUE="d">33</OPTION>
            </SELECT>
            <INPUT TYPE="BUTTON" VALUE="Re-sort" onclick="resort(c);">
        </TD>
        <TD BGCOLOR="EEFFDD">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TD>
        <TD BGCOLOR="EEFFDD"><B>Letters:</B></TD>
        <TD BGCOLOR="EEFFDD">
            <SELECT NAME="AlphaList" wCLASS="SelectSort" PARM1="alpha">
                <OPTION VALUE="g">G</OPTION>
                <OPTION VALUE="x">X</OPTION>
                <OPTION VALUE="l">L</OPTION>
                <OPTION VALUE="a">A</OPTION>
            </SELECT>
        </TD>
    </TR>
    <TR>
        <TD BGCOLOR="CCDDBB"><B>Formatted SSN:</B></TD>
        <TD BGCOLOR="CCDDBB">
            <INPUT TYPE="TEXT" NAME="SSAN" wCLASS="FormatText" PARM1="SSN">
        </TD>
        <TD BGCOLOR="CCDDBB">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TD>
          <TD BGCOLOR="CCDDBB"><B>Formatted Phone:</B></TD>
        <TD BGCOLOR="CCDDBB">
            <INPUT TYPE="TEXT" NAME="ZIPPLUS4" 
             wCLASS="FormatText" PARM1="PHN">
        </TD>
    </TR>
</TABLE>
</FORM>
</BODY>
</HTML>