<!--
  Copyright 2006 Adobe Systems Incorporated
  -->
          <style>
          
          
          #container {
                  width: 1024px;
          }
  
          #controls {
                  margin-bottom: 20px; 
                  float: left; 
                  padding: 20px;
          }
  
          #flashoutput {
                  margin-top: 20px; 
                  width: auto;
          }
  
          textarea {
                  font-size: 1em;
          }
          
          </style>
          <script src="bridge/FABridge.js" ></script>
          <script src="bridge-example.js" ></script>
          <div id="container">
                  <div id="controls">
                          <textarea id="expr" cols="60" rows="20">type in javascript code here.  use the radio buttons below to view sample FABridge code</textarea>
                          <br />
                          <input type="button" onClick="testEval();return false;" value="execute" />
                  <div style="margin-left: 20px">
                  <p>sample code:<br />
                  <!--
                      <input id="make_rect" onClick="updateCode('make_rect')" name="code" type="radio"><label for="make_rect">make rectangle</label>
                      <input id="make_spinner" onClick="updateCode('make_spinner')" name="code" type="radio"><label for="make_spinner">make spinning rectangle</label>
                  -->
                  </p>
                                          <input id="get_slider" onClick="updateCode('get_slider')" name="code" type="radio">
                                          <label for="get_slider">get slider value</label>
                                          
                                          <input id="set_check" onClick="updateCode('set_check')" name="code" type="radio">
                                          <label for="set_check">set checkbox value</label>
                                          <br />
                                          
                                          <input id="invoke_as" onClick="updateCode('invoke_as')" name="code" type="radio">
                                          <label for="invoke_as">invoke actionscript function</label>
                                          
                                          <input id="button_event_handler" onClick="updateCode('button_event_handler')" name="code" type="radio">
                                          <label for="button_event_handler">call javascript from AS button</label>
                                          
                                          <br />
                                          <input id="slider_event_handler" onClick="updateCode('slider_event_handler')" name="code" type="radio">
                                          <label for="slider_event_handler">listen for slider changes</label>
                                          
                                          <input id="create_datagrid" onClick="updateCode('create_datagrid')" name="code" type="radio">
                                          <label for="create_datagrid">create and populate a datagrid</label>
                                  </p>
                                  <p>Charts:<br />
                                          <input id="make_chart" onClick="updateCode('make_chart')" name="code" type="radio">
                                          <label for="make_chart">create a chart</label>
                                          
                                          <input id="make_data" onClick="updateCode('make_data')" name="code" type="radio">
                                          <label for="make_data">generate data</label>
                                          <br>
                                          <input id="make_interpolate" onClick="updateCode('make_interpolate')" name="code" type="radio">
                                          <label for="make_interpolate">interpolate changes</label>
  
                                          <input id="make_zoom" onClick="updateCode('make_zoom')" name="code" type="radio">
                                          <label for="make_zoom">zoom changes</label>
                                  </p>
                          </div>
                          trace output:<br />
                          <textarea id="output" cols="60" rows="10"></textarea><br />
                  </div>
                  <div id="flashoutput">
                                  <object id=flex 
                                  classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 
                                  <param name=flashvars value="bridgeName=flex"/>
                                  <param name=src value="@mx-bridge-example.swf"/>
                                  <embed name=flex 
                                  pluginspage="http://www.macromedia.com/go/getflashplayer" 
                                  src=@mx-bridge-example.swf height=400 width=400 flashvars="bridgeName=flex"/>
                                  </object>
                          <br>
                          <br>
                  </div>
          </div>