<?xml version="1.0"?>

<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>
    <title>Voice recognizing bookmarks</title>
    <style>
      body { font-family: arial; sans-serif;
             color: #003344;
             background-color: #2288ff }
      input.button { color: #003344;
             background-color: #2288ff; }
    </style>


    <!-- Boiler plate stolen from: http://www.ibm.com/developerworks/wireless/library/wi-message.html -->
  
    <vxml:form id="getMessageInfo">
  
	    <vxml:block>
		    <vxml:prompt> Welcome to multimodal favorites. </vxml:prompt>
	    </vxml:block>

      <vxml:grammar src="favorites.grxml#main" type="application/srgs+xml"/>
	    <vxml:initial name="start">
		    <vxml:prompt> Please choose a website to visit. </vxml:prompt>
		    <!-- assign something to start so that FIA continues on -->
		    <vxml:help count="1">
			    
		    <vxml:prompt> Let's try a different approach. </vxml:prompt>
			    <vxml:assign name="start" expr="true"/>
		    </vxml:help>
		    <vxml:nomatch count="1">
			    <vxml:assign name="start" expr="true"/>
		    </vxml:nomatch>
		    <vxml:noinput count="1">
			    <vxml:assign name="start" expr="true"/>
		    </vxml:noinput>
	    </vxml:initial>

      <vxml:field xv:id="site" name="site">
	      <vxml:prompt> Please choose a website from the list. </vxml:prompt>
      <vxml:grammar src="favorites.grxml#main" type="application/srgs+xml"/>
        <vxml:nomatch>
          <vxml:prompt> Please choose from: Telegraph, Newsforge, gee mail, oh ess news, google, or easy tee vee </vxml:prompt>
        </vxml:nomatch>
        <vxml:noinput>
          <vxml:prompt> Select one of: Telegraph, Newsforge, gee mail, oh ess news, google, or easy tee vee </vxml:prompt>
        </vxml:noinput>
        <vxml:help>
          <vxml:prompt> Say one of: Telegraph, Newsforge, gee mail, oh ess news, google, or easy tee vee. You can also use the mouse to select a favorite from the drop down list. </vxml:prompt>
        </vxml:help>
      <vxml:filled>
	      <vxml:prompt> Ok, forwarding you to <vxml:value expr = "site"/>. </vxml:prompt>
      </vxml:filled>
      </vxml:field>
  
    </vxml:form>
  
  
    <!--                                                                 -->
    <!-- Synchronize the data - when a Voice field is filled in, then    -->
    <!-- the corresponding XHTML field is filled in and vice versa.      -->
    <!--                                                                 -->
  
    <xv:sync xv:input="site" xv:field="#site"/>
    <xv:cancel id="voice_cancel"/>


    <script id="scripts" language="JavaScript">
  
      <![CDATA[
  
      function forward ( site ) {
	var d = new Array();
	d['Newsforge'] = "http://www.newsforge.com/";
	d['Telegraph'] = "http://www.telegraph.co.uk/";
	d['OSNews'] = "http://www.osnews.com/";
	d['GMail'] = "http://mail.google.com/";
	d['Google'] = "http://www.google.com/";
	d['EZTV'] = "http://eztv.nl/frontpage.php";

	//DEBUG: {{{
	// show the values stored
	/*for (var i in d) {
		alert('key is: ' + i + ', value is: ' + d[i]);
		}*/
	//END_DEBUG }}}
      
	//	alert ( "Sending you to: " + site + " at " + d[site] );
	    window.location = d[site];
	    }

      	
      function SendMessage () {
        site = document.doIt.site.value;
	forward(site);
      }
  
      ]]>
    </script>

    <!--                                                                 -->
    <!-- A handler that catches the vxmldone event (send to the document -->
    <!-- body and kicks off the SendMessage ( ) function.                -->

    <script id="doneHandler" declare="declare"
            ev:event="vxmldone" ev:observer="documentBody">
      SendMessage ( );
    </script>

  </head>


  <body id="documentBody" ev:event="load" ev:handler="#getMessageInfo">

    <p/> <p/>
 
     <h1>Multimodal favorites</h1>
    <table>
	    <tr>
	    <td align = "center">
		    <a href="http://www.telegraph.co.uk/">
			    <img src = "telegraph.gif" />
		    </a>
	    </td>
	    <td align = "center">
		    <a href="http://www.newsforge.com">
    <img src = "newsforge.gif" />
		    </a>
	    </td>
	    </tr>
	    <tr>
	    <td align = "center">
		    <a href="http://mail.google.com/">
    <img src = "gmail.gif" />
		    </a>
	    </td>
	    <td align = "center">
		    <a href="http://www.osnews.com/">
    <img src = "osnews.gif" />
		    </a>
	    </td>
	    </tr>
	    <tr>
	    <td align = "center">
		    <a href="http://www.google.com/">
    <img src = "google.gif" />
		    </a>
	    </td>
	    <td align = "center">
		    <a href="http://eztv.nl/frontpage.php">
    <img src = "eztv.jpg" />
		    </a>
	    </td>
	    </tr>
    </table>
 
    <p/> <p/>

    <form name="doIt" method="get">
 
	    <b><label for="site"> Choose a favorite: </label></b>
      <select name="site" id="site">
        <option value="Newsforge"> Newsforge </option>
        <option value="Telegraph"> Telegraph </option>
        <option value="OSNews"> OSNews </option>
        <option value="GMail"> GMail </option>
        <option value="Google"> Google </option>
        <option value="EZTV"> EZTV </option>
      </select>
      <p/>
 
    </form>

 
 
    <!-- This is the submit button.  For some reason, it stopped receiving -->
    <!-- events after adding the "+V" parts of the code - it works outside -->
    <!-- the form, so that's where I'll leave it.                          -->
 
    <input type="button" value="Go!" class="button"
           onclick="forward(document.doIt.site.value)"/>

  </body>

</html>
