1 
<html>
2 
  <head>
3 
    <link href="style.css"  rel="stylesheet" />
4 
    <link href="flow.scxml" rel="statechart" />
5 
    <script src="statechartz.js"></script>
6 
    <script>
7 
      function outputText(txt) {
8 
        document.getElementById("calc_output").innerHTML = txt;
9 
      }
10 
      function showPopup(txt) {
11 
        document.getElementById('popup_text').innerHTML = txt;
12 
        document.statechart.raise("POPUP.SHOW",true);
13 
      }
14 
      function handleKey(ev) {
15 
        if (document.statechart != undefined) {
16 
          document.statechart.raise("KEY.PRESS");
17 
          if (ev.keyCode == 32) {
18 
            document.statechart.raise('WIDGETS.NEXT');
19 
          }
20 
        }
21 
      }
22 
    </script>
23 
  </head>
24 
  <body onkeydown="handleKey(event)">
25 
    <div id="screen_weather" class="screen">
26 
      <script type="text/javascript" src="http://voap.weather.com/weather/oap/USGA0028?template=OTDRH&par=3000000007&unit=0&key=twciweatherwidget"></script>
27 
    </div>
28 
    <div id="screen_shopping" class="screen">
29 
      <iframe src="http://onetrip.org/onetrip/?pass&go" height="240" width="320" scrolling="no" style="overflow:hidden" frameborderwidth="0"></iframe>
30 
    </div>
31 
    <div id="screen_calc" class="screen">
32 
      <table cellspacing="5">
33 
        <tr>
34 
          <td colspan="5"><div class="output" id="calc_output">&nbsp;</div></td>
35 
        </tr>
36 
        <tr>
37 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.7')">7</a></td>
38 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.8')">8</a></td>
39 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.9')">9</a></td>
40 
          <td><a href="#" onmousedown="statechart.raise('OPER.PLUS')">+</a></td>
41 
          <td><a href="#" onmousedown="statechart.raise('OPER.MINUS')">-</a></td>
42 
        </tr>
43 
        <tr>
44 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.4')">4</a></td>
45 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.5')">5</a></td>
46 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.6')">6</a></td>
47 
          <td><a href="#" onmousedown="statechart.raise('OPER.STAR')">*</a></td>
48 
          <td><a href="#" onmousedown="statechart.raise('OPER.DIV')">/</a></td>
49 
        </tr>
50 
        <tr>
51 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.1')">1</a></td>
52 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.2')">2</a></td>
53 
          <td><a href="#" onmousedown="statechart.raise('DIGIT.3')">3</a></td>
54 
          <td><a href="#" onmousedown="statechart.raise('CE')">CE</a></td>
55 
          <td><a href="#" onmousedown="statechart.raise('C')">C</a></td>
56 
        </tr>
57 
        <tr>
58 
          <td colspan="3"><a href="#" onmousedown="statechart.raise('DIGIT.0')">0</a></td>
59 
          <td><a href="#" onmousedown="statechart.raise('POINT')">.</a></td>
60 
          <td><a href="#" onmousedown="statechart.raise('EQUALS')">=</a></td>
61 
        </tr>
62 
      </table>
63 
    </div>
64 
    <div id="screen_popup">
65 
      <div id="popup_text">&nbsp</div>
66 
    </div>
67 
  </body>
68 
</html>