<!DOCTYPE html PUBLIC "-//VoiceXML Forum//DTD XHTML+Voice 1.2//EN" "http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:vxml="http://www.w3.org/2001/vxml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
	    xmlns:xv="http://www.voicexml.org/2002/xhtml+voice">
	  
<head>
<style type="text/css">
.style2 {font-size: 16px; font-weight: bold; }
.style3 {
	font-size: 36px;
	font-weight: bold;
}
.style5 {font-size: 12px;}
.style6 {font-size: 24px; }
</style>

<script type="text/javascript">
<![CDATA[
function init_menu(){
	document.getElementById('hiddenChoiceMenu').click();
}

function select_menu(which){

	if (which == 'dial'){
	    document.getElementById('hiddenDial').click();
	}
	else{
	    document.getElementById('hiddenAddress').click();
	}
	return 1;
}

function add_tel(num){
    var new_num = "";

    for (i=0; i < num.length; i++){
       if ( i == 3 || i == 6 ){
       	new_num = new_num + "-";
       }
       new_num = new_num + num[i];
    }
    document.myform.telnum.value = new_num;
    document.getElementById('callNow').click();

}
function append_num(digit){
   var num = document.myform.telnum.value;
   
   if (num.length == 3 || num.length == 7 ){
      num = num + "-";
   }
   document.myform.telnum.value = num + digit;
}

function TelNumLength(sText){

  return sText.length;
}

function resetTelNum(){

	document.myform.telnum.value = "";
}

function showAddressBook(divName){
 var imgDiv = divName+"img";
 var prevDiv =  document.myform.prevLookup.value;
 var prevImgDiv = prevDiv + "img";
 var initEachForm = "hidden" + divName;
	document.getElementById('addressDiv').style.display = "block";
	
  document.getElementById(prevDiv).style.display = "none";
	document.getElementById(divName).style.display = "block";

	document.getElementById(prevImgDiv).style.width="13";
	document.getElementById(prevImgDiv).style.width="11";
	document.getElementById(imgDiv).style.width="26";
	document.getElementById(imgDiv).style.width="22";
	
	document.myform.prevLookup.value = divName;
	
	document.getElementById(initEachForm).click();
}

function callNowWindow(){

	var OpenWindow=window.open("callwindow.html", "newwin", "height=160,width=410,status=0,scrollbars=0");
	OpenWindow.document.getElementById('callnum').innerHTML = document.myform.telnum.value;
	document.myform.telnum.value = "";

}

function set_telNum(telDiv){
document.myform.telnum.value = document.getElementById(telDiv).text;
document.getElementById('callNow').click();
}
]]> 
</script>


<vxml:form id="choiceMenuForm">

<vxml:field name="choice_menu" xv:id="choice_menu">
    <vxml:prompt> Welcome to Internet Phone System. Please say dial, if you would like to dial a phone number directly, Or say address book to search for a name in your address book.</vxml:prompt>
    <vxml:option value="dial">dial</vxml:option>
    <vxml:option value="address book">address book</vxml:option>
    <vxml:nomatch>Please try again.</vxml:nomatch>    
</vxml:field>
<vxml:filled>
    <vxml:if cond="choice_menu == 'dial'">
    		<vxml:prompt>Please speak a phone number you wish to dial.</vxml:prompt>
    		<vxml:assign name="dummy" expr="select_menu(choice_menu);"/>
    <vxml:else/>
   		 <vxml:assign name="dummy" expr="select_menu(choice_menu);"/>
    </vxml:if>
</vxml:filled>
      
</vxml:form>


<!-- dialForm -->
<vxml:form id="dialForm">
<vxml:field name="telephone_num" type="phone" xv:id="telephone_num">  
</vxml:field>

<vxml:filled>
    <vxml:if cond="TelNumLength(telephone_num) == '10'">
    		<vxml:assign name="dummy" expr="add_tel(telephone_num);"/>
    <vxml:else/>
   		 <vxml:prompt>The number can't be dialed as spoken. Please try it again.</vxml:prompt>
   		  <vxml:clear namelist = "telephone_num"/> 
    </vxml:if>
</vxml:filled>
</vxml:form>

<vxml:form id="callNowForm">
<vxml:field name="yes_no" xv:id="yes_no">
    <vxml:prompt>Do you wish to dial now?</vxml:prompt>
    <vxml:option value="yes">yes</vxml:option>
    <vxml:option value="no">no</vxml:option>    
</vxml:field>
<vxml:filled>
    <vxml:if cond="yes_no == 'yes'">
    		<vxml:assign name="dummy" expr="callNowWindow();"/>
    <vxml:else/>
   		 <vxml:prompt>Your call has been cancelled.</vxml:prompt>
   		 <vxml:assign name="dummy" expr="resetTelNum();"/>
    </vxml:if>
</vxml:filled>
</vxml:form>

<!-- addressForm -->
<vxml:form id="addressForm">
<vxml:block>
	<vxml:assign name="dummy" expr="showAddressBook('aa');"/>
</vxml:block>
</vxml:form>

<vxml:form id="lookUpFormA">
<vxml:field name="initChar" xv:id="initChar">
    <vxml:prompt>Please state the name as shown, or speak the first letter of the name you wish to call.</vxml:prompt>
    <vxml:option value="a">a</vxml:option>
    <vxml:option value="b">b</vxml:option>
    <vxml:option value="c">c</vxml:option>
    <vxml:option value="d">d</vxml:option>
    <vxml:option value="antoy">antoy</vxml:option>
    <vxml:option value="antoy">sergio</vxml:option>
    <vxml:nomatch>Please try it again.</vxml:nomatch>  
</vxml:field>
<vxml:filled>
    <vxml:if cond="initChar == 'a'"> <vxml:assign name="dummy" expr="showAddressBook('aa');"/>
    <vxml:elseif cond="initChar == 'b'"/>	<vxml:assign name="dummy" expr="showAddressBook('bb');"/>
    <vxml:elseif cond="initChar == 'c'"/>	<vxml:assign name="dummy" expr="showAddressBook('cc');"/>
    <vxml:elseif cond="initChar == 'd'"/>	<vxml:assign name="dummy" expr="showAddressBook('dd');"/>
    <vxml:elseif cond="initChar == 'antoy'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:else/>
   		 <vxml:prompt>Please try it again.</vxml:prompt>
   		 <vxml:clear namelist = "initChar"/> 
    </vxml:if>
</vxml:filled>
</vxml:form>

<vxml:form id="lookUpFormB">
<vxml:field name="initChar" xv:id="initChar">
    <vxml:prompt>Please state the name as shown, or speak the first letter of the name you wish to call.</vxml:prompt>
    <vxml:option value="a">a</vxml:option>
    <vxml:option value="b">b</vxml:option>
    <vxml:option value="c">c</vxml:option>
    <vxml:option value="d">d</vxml:option>
    <vxml:option value="binkley">binkley</vxml:option>
    <vxml:option value="black">black</vxml:option>
    <vxml:option value="brown">brown</vxml:option> 
    <vxml:option value="bulusu">bulusu</vxml:option>
    <vxml:nomatch>Please try it again.</vxml:nomatch> 
</vxml:field>
<vxml:filled>
    <vxml:if cond="initChar == 'a'"> <vxml:assign name="dummy" expr="showAddressBook('aa');"/>
    <vxml:elseif cond="initChar == 'b'"/>	<vxml:assign name="dummy" expr="showAddressBook('bb');"/>
    <vxml:elseif cond="initChar == 'c'"/>	<vxml:assign name="dummy" expr="showAddressBook('cc');"/>
    <vxml:elseif cond="initChar == 'd'"/>	<vxml:assign name="dummy" expr="showAddressBook('dd');"/>
    <vxml:elseif cond="initChar == 'binkley'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:elseif cond="initChar == 'black'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:elseif cond="initChar == 'brown'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:elseif cond="initChar == 'bulusu'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:else/>
   		 <vxml:prompt>Please try it again.</vxml:prompt>
   		 <vxml:clear namelist = "initChar"/> 
    </vxml:if>
</vxml:filled>
</vxml:form>

<vxml:form id="lookUpFormC">
<vxml:field name="initChar" xv:id="initChar">
    <vxml:prompt>Please state the name as shown, or speak the first letter of the name you wish to call.</vxml:prompt>
    <vxml:option value="a">a</vxml:option>
    <vxml:option value="b">b</vxml:option>
    <vxml:option value="c">c</vxml:option>
    <vxml:option value="d">d</vxml:option>
    <vxml:option value="chiang">chiang</vxml:option>
    <vxml:option value="cooper">cooper</vxml:option>
    <vxml:nomatch>Please try it again.</vxml:nomatch> 
</vxml:field>
<vxml:filled>
    <vxml:if cond="initChar == 'a'"> <vxml:assign name="dummy" expr="showAddressBook('aa');"/>
    <vxml:elseif cond="initChar == 'b'"/>	<vxml:assign name="dummy" expr="showAddressBook('bb');"/>
    <vxml:elseif cond="initChar == 'c'"/>	<vxml:assign name="dummy" expr="showAddressBook('cc');"/>
    <vxml:elseif cond="initChar == 'd'"/>	<vxml:assign name="dummy" expr="showAddressBook('dd');"/>
    <vxml:elseif cond="initChar == 'chiang'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:elseif cond="initChar == 'cooper'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:else/>
   		 <vxml:prompt>Please try it again.</vxml:prompt>
   		 <vxml:clear namelist = "initChar"/> 
    </vxml:if>
</vxml:filled>
</vxml:form>

<vxml:form id="lookUpFormD">
<vxml:field name="initChar" xv:id="initChar">
    <vxml:prompt>Please state the name as shown, or speak the first letter of the name you wish to call.</vxml:prompt>
    <vxml:option value="a">a</vxml:option>
    <vxml:option value="b">b</vxml:option>
    <vxml:option value="c">c</vxml:option>
    <vxml:option value="d">d</vxml:option>
    <vxml:option value="darwin">darwin</vxml:option>
    <vxml:nomatch>Please try it again.</vxml:nomatch> 
</vxml:field>
<vxml:filled>
    <vxml:if cond="initChar == 'a'"> <vxml:assign name="dummy" expr="showAddressBook('aa');"/>
    <vxml:elseif cond="initChar == 'b'"/>	<vxml:assign name="dummy" expr="showAddressBook('bb');"/>
    <vxml:elseif cond="initChar == 'c'"/>	<vxml:assign name="dummy" expr="showAddressBook('cc');"/>
    <vxml:elseif cond="initChar == 'd'"/>	<vxml:assign name="dummy" expr="showAddressBook('dd');"/>
    <vxml:elseif cond="initChar == 'darwin'"/>	<vxml:assign name="dummy" expr="set_telNum(initChar);"/>
    <vxml:else/>
   		 <vxml:prompt>Please try it again.</vxml:prompt>
   		 <vxml:clear namelist = "initChar"/> 
    </vxml:if>
</vxml:filled>
</vxml:form>



</head>

<body id="mybody" ev:event="load" ev:handler="#choiceMenuForm">
<center>
  <p><font size="+3"><b>Internet Phone System</b></font></p>
  <form name="myform">
  <input type="hidden" name="hiddenDial" id="hiddenDial" ev:event="click" ev:handler="#dialForm"/>
  <input type="hidden" name="callNow" id="callNow" ev:event="click" ev:handler="#callNowForm"/>
  <input type="hidden" name="hiddenAddress" id="hiddenAddress" ev:event="click" ev:handler="#addressForm"/>
  <input type="hidden" name="hiddenChoiceMenu" id="hiddenChoiceMenu" ev:event="click" ev:handler="#choiceMenuForm"/>
  <input type="hidden" name="hiddenaa" id="hiddenaa" ev:event="click" ev:handler="#lookUpFormA"/>
  <input type="hidden" name="hiddenbb" id="hiddenbb" ev:event="click" ev:handler="#lookUpFormB"/>
  <input type="hidden" name="hiddencc" id="hiddencc" ev:event="click" ev:handler="#lookUpFormC"/>
  <input type="hidden" name="hiddendd" id="hiddendd" ev:event="click" ev:handler="#lookUpFormD"/>
  <input type="hidden" name="prevLookup" value="aa"/>
  
  
   <table width="797" align="center" border="0">
    <tr>
      <td width="225"><table width="225" border="0" cellpadding="3" cellspacing="1" bgcolor="#99CCFF">
        <tr>
          <td align="center">
              <input name="telnum" id="texttelnum" type="text" value="" size="20" maxlength="12"/>
          </td>
        </tr>
        <tr>
          <td><table width="163" border="1" align="center" cellpadding="2" bgcolor="#FFFFFF">
              <tr>
				<td><div align="center" class="style2"><a href="javascript:append_num(1)"><img src="images/1.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(2)"><img src="images/2.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(3)"><img src="images/3.gif" border="0"/></a></div></td>
              </tr>
              <tr>
                <td><div align="center" class="style2"><a href="javascript:append_num(4)"><img src="images/4.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(5)"><img src="images/5.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(6)"><img src="images/6.gif" border="0"/></a></div></td>
              </tr>
              <tr>
                <td><div align="center" class="style2"><a href="javascript:append_num(7)"><img src="images/7.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(8)"><img src="images/8.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(9)"><img src="images/9.gif" border="0"/></a></div></td>
              </tr>
              <tr>
                <td><div align="center" class="style2">*</div></td>
                <td><div align="center" class="style2"><a href="javascript:append_num(0)"><img src="images/0.gif" border="0"/></a></div></td>
                <td><div align="center" class="style2">#</div></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td align="center">
              <a href="javascript:callNowWindow();"><input name="dial" type="button" value="Dial"/></a>
          </td>
        </tr>
        <tr>
          <td align="center">
              <a href="javascript:showAddressBook('aa');"><input name="address" type="button" id="address" value="Address Book"/></a>
          </td>
        </tr>
      </table></td>
      <td width="24"></td>
      <td width="524" align="center" class="style2"><table width="530" border="0" bgcolor="#D9ECFF">
          <div id="addressDiv" align="center" style="display:none;">
          <tr>
            <td height="50" align="center" class="style6">Address Book</td>
          </tr>
          <tr>
            <td height="50" align="center" class="style6">
            <div align="center" style="font-size:10pt;font-weight:bold">(* Please note, as of current, the functionality of the address book is limited from A to D.)</div> </td>
          </tr>           
          <tr>
            <td height="30" align="center" class="style5">
             <a href="javascript:showAddressBook('aa');"><img id="aaimg" src="images/a.gif" border="0"/></a>
             <a href="javascript:showAddressBook('bb');"><img id="bbimg" src="images/b.gif" border="0"/></a>
             <a href="javascript:showAddressBook('cc');"><img id="ccimg" src="images/c.gif" border="0"/></a>
             <a href="javascript:showAddressBook('dd');"><img id="ddimg" src="images/d.gif" border="0"/></a>
             <img id="eeimg" src="images/e.gif" border="0"/>
             <img id="ffimg" src="images/f.gif" border="0"/>
             <img id="ggimg" src="images/g.gif" border="0"/>
             <img id="hhimg" src="images/h.gif" border="0"/>
             <img id="iiimg" src="images/i.gif" border="0"/>
             <img id="jjimg" src="images/j.gif" border="0"/>
             <img id="kkimg" src="images/k.gif" border="0"/>
             <img id="llimg" src="images/l.gif" border="0"/>
             <img id="mmimg" src="images/m.gif" border="0"/>
             <img id="nnimg" src="images/n.gif" border="0"/>
             <img id="ooimg" src="images/o.gif" border="0"/>
             <img id="ppimg" src="images/p.gif" border="0"/>
             <img id="qqimg" src="images/q.gif" border="0"/>
             <img id="rrimg" src="images/r.gif" border="0"/>
             <img id="ssimg" src="images/s.gif" border="0"/>
             <img id="ttimg" src="images/t.gif" border="0"/>
             <img id="uuimg" src="images/u.gif" border="0"/>
             <img id="vvimg" src="images/v.gif" border="0"/>
             <img id="wwimg" src="images/w.gif" border="0"/>
             <img id="xximg" src="images/x.gif" border="0"/>
             <img id="yyimg" src="images/y.gif" border="0"/>
             <img id="zzimg" src="images/z.gif" border="0"/>
            </td>
          </tr>
          </div>
          <div id="aa" align="center" style="display:none;">
          <tr>
            <td class="style5"><table width="443" align="center" border="1">
              <tr>
                <td width="143">Name</td>
                <td width="239">Phone Number </td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('antoy');">Antoy</a>, Sergio </td>
                <td><div id="antoy">503-725-3434</div></td>
              </tr>
            </table></td>
          </tr>
          </div>
          <div id="bb" align="center" style="display:none;">
          <tr>
            <td class="style5"><table width="443" align="center" border="1">
              <tr>
                <td width="143">Name</td>
                <td width="239">Phone Number </td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('binkley');">Binkley</a>, Jim</td>
                <td><div id="binkley">503-725-1234</div></td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('black');">Black</a>, Andrew </td>
                <td><div id="black">503-725-2345</div></td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('brown');">Brown</a>, Cynthia</td>
                <td><div id="brown">503-725-0987</div></td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('bulusu');">Bulusu</a>, Nirupama</td>
                <td><div id="bulusu">503-725-5678</div></td>
              </tr>
            </table></td>
          </tr>
          </div>
          <div id="cc" align="center" style="display:none;">
          <tr>
            <td class="style5"><table width="443" align="center" border="1">
              <tr>
                <td width="143">Name</td>
                <td width="239">Phone Number </td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('chiang');">Chiang</a>, Su-Hui</td>
                <td><div id="chiang">503-725-3434</div></td>
              </tr>
               <tr>
                <td><a href="javascript:set_telNum('cooper');">Cooper</a>, Dennis</td>
                <td><div id="cooper">503-725-7878</div></td>
              </tr>
            </table></td>
          </tr>
          </div>
           <div id="dd" align="center" style="display:none;">
          <tr>
            <td class="style5"><table width="443" align="center" border="1">
              <tr>
                <td width="143">Name</td>
                <td width="239">Phone Number </td>
              </tr>
              <tr>
                <td><a href="javascript:set_telNum('darwin');">Darwin</a>, Lois </td>
                <td><div id="darwin">503-725-8888</div></td>
              </tr>
            </table></td>
          </tr>
          </div>
         
         </table></td>
     </tr>
  </table>
  </form>
</center>
</body>
</html>