<?xml version="1.0"?>

<topicsections>
<manipulative id="diningout" type="export">

<exposure name="total">
  <description> The total price of orders </description>
</exposure>

<initialize>
  init();
</initialize>

<component id="display" type="html" deploy="auto">
<unit>
<table cellspacing="10">
<tr><th>Quantity</th><th>Item</th><th align="right">Amount</th></tr>
<tr>
<td align="center"><input id="cns" size="2" onclick="init()" onchange="subtotal(this,1.95)" /></td>
<td>Chicken Noodle Soup (1.95)</td><td align="right"><span id="cnsamt">&#160;</span></td>
</tr>
<tr>
<td align="center"><input id="gs" size="2" onchange="subtotal(this,2.45)" /></td>
<td>Garden Salad (2.45)</td><td align="right"><span id="gsamt">&#160;</span></td>
</tr>
<tr>
<td align="center"><input id="cs" size="2" onchange="subtotal(this,3.95)" /></td>
<td>Club Sandwich (3.95)</td><td align="right"><span id="csamt">&#160;</span></td>
</tr>
<tr>
<td align="center"><input id="abb" size="2" onchange="subtotal(this,3.25)" /></td>
<td>All Beef Burger (3.25)</td><td align="right"><span id="abbamt">&#160;</span></td>
</tr>
<tr>
<td align="center"><input id="dcc" size="2" onchange="subtotal(this,2.95)" /></td>
<td>Double Chocolate Cake (2.95)</td><td align="right"><span id="dccamt">&#160;</span></td>
</tr>
<tr>
<td align="center"><input id="ap" size="2" onchange="subtotal(this,2.65)" /></td>
<td>Apple Pie (2.65)</td><td align="right"><span id="apamt">&#160;</span></td>
</tr>
<tr>
<td colspan="2" align="center"><b>Total:</b></td>
<td align="right"><span id="total">&#160;</span></td>
</tr>
</table>
</unit>
</component>

<component id="calculate" type="interact" deploy="manual">
<parameter name="#input" type="string" default="total"/>
<parameter name="#percent" type="number"/>
<parameter name="#amount" type="number" default="0"/>
<unit>
<input id="#input" size="6" />&#160;<input value="Check it!" type="button" onclick="check('#input', #percent, #amount)" />
</unit>
</component>

</manipulative>

<manipulative id="pizzapan" type="export">

<initialize>
  init();
</initialize>

<component id="pizzapan" type="html" deploy="auto">
<unit>
<table id="pizza" cellpadding="5" class="pizzanb" align="center" frame="void">
<tr> 
<td class="nouse"></td>
<td class="pickCol" onclick="pickColumn(this);">c1</td>
<td class="pickCol" onclick="pickColumn(this);">c2</td>
<td class="pickCol" onclick="pickColumn(this);">c3</td>
<td class="pickCol" onclick="pickColumn(this);">c4</td>
<td class="pickCol" onclick="pickColumn(this);">c5</td>
<td class="pickCol" onclick="pickColumn(this);">c6</td>
<td class="pickCol" onclick="pickColumn(this);">c7</td>
<td class="pickCol" onclick="pickColumn(this);">c8</td>
<td class="pickCol" onclick="pickColumn(this);">c9</td>
<td class="pickCol" onclick="pickColumn(this);">c10</td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r1</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r2</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r3</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r4</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r5</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r6</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r7</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r8</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r9</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>

<tr> 
<td class="pickRow" onclick="pickRow(this);">r10</td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
<td class="grids" onclick="change(this);"><div>&#160;</div></td>
</tr>
</table>
</unit>
</component>

<component id="pizzapercent" type="html" deploy="auto">
<parameter name="#" type="symbol" default="&amp;" />
<unit>
<p></p>
<center>
<table border="0" style="margin-left: auto; margin-right: auto; font-size: large;" cellpadding="10" cellspacing="0">
  <tbody>
    <tr>
      <td style="background-color: rgb(255, 0, 0);">Taken: #nbsp;<span id="picked"> 0 </span>
percent</td>
      <td>#nbsp;#nbsp;#nbsp;#nbsp;#nbsp;#nbsp;#nbsp;#nbsp;</td>
      <td style="background-color: rgb(0, 255, 0);">Left:#nbsp;<span id="left">100</span>
percent</td>
    </tr>
  </tbody>
</table>
</center>
</unit>
</component>

</manipulative>

</topicsections>