image1 = new Image();
image1.src = "images/newcolor.gif";
image2 = new Image();
image2.src = "images/opencolor.gif";
image3 = new Image();
image3.src = "images/savecolor.gif";
image4 = new Image();
image4.src = "images/packagecolor.gif";
image5 = new Image();
image5.src = "images/subpackagecolor.gif";
image6 = new Image();
image6.src = "images/instantiationcolor.gif";
image7 = new Image();
image7.src = "images/combinatorialcolor.gif";
image8 = new Image();
image8.src = "images/sequentialcolor.gif";
image9 = new Image();
image9.src = "images/testcolor.gif";
image10 = new Image();
image10.src = "images/data.gif";
image11 = new Image();
image11.src = "images/bus.gif";
image12 = new Image();
image12.src = "images/tristate.gif";
image13 = new Image();
image13.src = "images/compose.gif";
image14 = new Image();
image14.src = "images/logic.gif";
image15 = new Image();
image15.src = "images/truth.gif";
image16 = new Image();
image16.src = "images/state.gif";
image17 = new Image();
image17.src = "images/sequence.gif";
image18 = new Image();
image18.src = "images/generate.gif";
image20 = new Image();
image20.src = "images/button1.jpg";
var controlButtonArray = new Array (18);
controlButtonArray[0] = 
"<li><img src=\"images/new.gif\" alt=\"\"/>New. Reset all internal data (no effect on disk).</li> \r\n";
controlButtonArray[1] = 
"<li><img src=\"images/open.gif\" alt=\"\"/>Open. Read data from the disk into the structure panel.</li> \r\n";
controlButtonArray[2] = 
"<li><img src=\"images/save.gif\" alt=\"\"/>Save. Save project data to disk.o</li> \r\n";
controlButtonArray[3] = 
"<li><img src=\"images/package.gif\" alt=\"\"/>"+
"Package. Create a package into which other objects may be created. "+
"Packages occur only at the root level of a tree."+
"</li> \r\n";
controlButtonArray[4] = 
"<li><img src=\"images/subpackage.gif\" alt=\"\"/>Subpackage.  Objects may be created within a subpackage, \r\n"+
"and subpackages are created within other objects (they may not appear as the root).</li> \r\n";
controlButtonArray[5] = 
"<li><img src=\"images/instantiation.gif\" alt=\"\"/>Instantiation. Objects within the instantiation tre \r\n"+
"generate code (instantiations occur only at the root). </li> \r\n";
controlButtonArray[6] = 
"<li><img src=\"images/combinatorial.gif\" alt=\"\"/>Combinatorial. Create a combinatorial logic-implementing object. \r\n"+
"Sequential logic supports a single clock signal in its interface, which serves to implement time-sensitive activities within the object. \r\n"+
"does not comtain a clock signal. </li> \r\n";
controlButtonArray[7] = 
"<li><img src=\"images/sequential.gif\" alt=\"\"/>Sequential. Create a sequential logic-implementing object. \r\n"+
"Sequential logic supports a single clock signal in its interface, which serves to implement time-sensitive activities within the object. \r\n"+
"At each descrete moment marked by the clock interface, the object transitions to (or maintains) a persistent internal state.</li> \r\n";
controlButtonArray[8] = 
"<li><img src=\"images/test.gif\" alt=\"\"/>Test. A test object generates clock signals and \r\n"+
"test sequences. Capability is provided to verify returned results. </li> \r\n";
controlButtonArray[9] = 
"<li><img src=\"images/data.gif\" alt=\"\"/>Interface. A signal configuration object \r\n"+
"to be associated with a logic-implementing object. </li> \r\n";
controlButtonArray[10] = 
"<li><img src=\"images/bus.gif\" alt=\"\"/>Bus. A uni-directional \r\n"+
"bus that distributes signals driven to a single input port to \r\n"+
"potentially many output ports. </li> \r\n";
controlButtonArray[11] = 
"<li><img src=\"images/tristate.gif\" alt=\"\"/>Tritstate. A bi-directional tristate bus \r\n"+
"interconnects multiple input-output ports, each of which has peer functionality (while this object \r\n"+
"distributes data, arbitration functionality is not included). </li> \r\n";
controlButtonArray[12] = 
"<li><img src=\"images/compose.gif\" alt=\"\"/>Composition. A graphical \r\n"+
"object placement language. </li> \r\n";
controlButtonArray[13] = 
"<li><img src=\"images/logic.gif\" alt=\"\"/>Logic. A written Java-like \r\n"+
"logic implementation language. </li> \r\n";
controlButtonArray[14] = 
"<li><img src=\"images/table.gif\" alt=\"\"/>Truth Table. A table of logical values \r\n"+
"configures combinatorial object behavior. </li> \r\n";
controlButtonArray[15] = 
"<li><img src=\"images/state.gif\" alt=\"\"/>State Machine. A graphical \r\n"+
"state machine description language. </li> \r\n";
controlButtonArray[16] = 
"<li><img src=\"images/sequence.gif\" alt=\"\"/>Timing Diagram. A graphical \r\n"+
"language describing signal behavior with reference to a clock signal. </li> \r\n";
controlButtonArray[17] = 
"<li><img src=\"images/generate.gif\" alt=\"\"/>Generation. The objects within an instantiation object \r\n"+
"generate code ready for upload into a FPPGA device.</li> \r\n";
//<!-- ************** BUTTON 1 ************** -->
button1Text="<center><H3><a href=\"http://www.hmlware.com.br/hml.jnlp\">"+
"Run HML (Pre-Alpha Version!)</a></H3></center>\r\n" +
"<p>The HML program uses JavaScript, SWT e \"Web Start\" technologies (the last two from Sun Java). \r\n" +
"Depending on your browser configuration, you may need to explicitly approve the execution of \r\n" +
"JavaScript (a message will appear in the information bar of the browser). As JavaScript is a \r\n" +
"fairly benign technology, there is no real harm in approving this action.</p> \r\n" +
"\"Web Start\" is delivered with Java 6.0. Older versions of Java may install the upgrade \r\n"+
"automatically. Otherwise, you may install Java 6.0 manually \r\n"+
"<a href=http://www.java.com/pt_BR/>from here</a>. \r\n" +
"You may choose first to read the \r\n"+
"<a href=http://java.sun.com/javase/6/webnotes/install/system-configurations.html>installation notes</a>. \r\n"+
"The downloaded Web Start file,\r\n"+
" \"hml.jnlp\", may have to be started manually after download, depending on the browser configuration. </p>\r\n" +
"<p>SWT technology requires access to the entire system, and will ask for permission \r\n"+
"while reporting the contents of the certificate used to sign the software.\r\n" +
"Before approving execution of the program, verify the certificate is downloaded from site hmlware.com, \r\n" +
"and is signed by <a href=\"www.futureware.com\">Future Ware, Inc.<a></p>"+
"<p><a href=\"http://download.eclipse.org/eclipse/downloads/drops/R-3.4-200806172000/index.php#swt\">Systems Supported by SWT:</a>"+
"<ul><li>Windows 32-bit</li><li>Windows 64-bit</li>" +
"<li>Spark-GTK</li><li>Spark-Motif</li>" +
"<li>Linux-GTK</li><li>Linux-Motif</li>" +
"<li>Mac-OSX (Carbon)</li></p>";
//<!-- ************** BUTTON 2 ************** -->
button2Text="<H3>Hardware Modeling Language (HML)</H3> \r\n"+
"<ul><li><a href=\"javascript:toggle('button2link1');\" <H4>What is HML?</H4></a></li> \r\n"+
"<div id=\"button2link1\" style=\"display:none\"> \r\n"+
"<ul><li>A UML-like visual programming language</li> \r\n"+
"<li>A modern Java-like, or C-like, language</li> \r\n"+
"<li>A language that abstracts the process of hardware development</li> \r\n"+
"<li>A language that generates firmware for FPGAs</li></ul></div> \r\n"+
"<li><a href=\"javascript:toggle('button2link2');\" <H4>Why HML?</H4></a></li> \r\n"+
"<div id=\"button2link2\" style=\"display:none\"> \r\n"+
"<ul><li>Hardware specification languages (VHDL, Verilog, SystemC) are inaccessable to programmers</li> \r\n"+
"<li>Even for hardware engineers, these languages are clumsy to use, as the preservation every design possibility adds complexity</li> \r\n"+
"<li>Programmers and hardware engineers communicate at crossed purposes due to their very different training and points of view</li></ul></div> \r\n"+
"<li><a href=\"javascript:toggle('button2link3');\" <H4>HML Design Principles</H4></a></li> \r\n"+
"<div id=\"button2link3\" style=\"display:none\"> \r\n"+
"<ul><li>HML embodies an entirely new design paradigm, and looks nothing like a unification of existing design languages</li> \r\n"+
"<li>A simplified conceptual model of hardware development is provided, which is still quite flexible and powerful</li> \r\n"+
"<li>Modern-language interface is provided</li> \r\n"+
"<li>HML provides a graphical design environment capable of expressing complex abstract designs</li> \r\n"+
"<li>HML provides a more powerful modern Java like design language</li> \r\n"+
"<li>HML generates firmare solutions</li> \r\n"+
"<li>HML generates test-beds</li></ul></div> \r\n"+
"<li><a href=\"javascript:toggle('button2link4');\" <H4>Summary</H4></a></li> \r\n"+
"<div id=\"button2link4\" style=\"display:none\"> \r\n"+
"<ul><li>HML has features and capabilities similar to UML and modern languages, simplifying adoption by programmers</li> \r\n"+
"<li>HML is far better suited to the compilation process than is UML</li> \r\n"+
"<li>With HML, programmers may be expected to design, and even construct, hardware solutions</li></ul> \r\n";
//<!-- ************** BUTTON 3 ************** -->
comboStep1Text=""+
"step 1:<br>\r\n"+
"This exercise builds a simplex demultiplexor. Two bits are demultiplexed into four: \r\n"+
"<center> \r\n"+
"<table border=\"1\" style=\"text-align:center\"><tr><td>2-bit input value</td><td>Generated 4-bit value</td></tr> \r\n"+
"<tr><td>0 0</td><td>0 0 0 1</td></tr> \r\n"+
"<tr><td>0 1</td><td>0 0 1 0</td></tr> \r\n"+
"<tr><td>1 0</td><td>0 1 0 0</td></tr> \r\n"+
"<tr><td>1 1</td><td>1 0 0 0</td></tr></table> \r\n"+
"</center> \r\n"+
"The project begins in a blank state, without any data.";
comboStep2Text=""+
"step 2:<br>\r\n"+
"Select the function &quot;package&quot;, shown in blue in the control panel. \r\n"+
"The root of a tree is created and named &quot;Package0&quot;, \r\n"+
"as shown in both the structure panel and the &quot;Root&quot; work panel page.";
comboStep3Text=""+
"step 3:<br>\r\n"+
"Select package &quot;Package0&quot; in the structure panel. \r\n"+
"Object creation actions in the control panel act upon \r\n"+
"the pbject selected in the structure panel.";
comboStep4Text=""+
"step 4:<br>\r\n"+
"Create three objects, one each of type combinatorial, interface, and bus. \r\n"+
"The blue-highlighted controls in the control panel are used. Object creation \r\n"+
"is initiated by pressing a button in the control panel, and acts upon the object selected in the structure panel.";
comboStep5Text=""+
"step 5:<br>\r\n"+
"Open the work panel (doube-click on package &quot;Package0&quot; in the structure panel). \r\n"+
"Configuration of the created objects takes place in the opened work panel window.";
comboStep6Text=""+
"step 6:<br>\r\n"+
"Open the signal configuration window of bus &quot;Bus3&quot;. \r\n"+
"Enter signals &quot;multiplexado&quot;, type &quot;data&quot;, width 2 bits, and \r\n"+
"&quot;demultiplexado&quot;, type &quot;data&quot;, width 4 bits. \r\n"+
"Press the &quot;Bus Def'n&quot; button to open the window. ";
comboStep7Text=""+
"step 7:<br>\r\n"+
"Open the signal configuration window of interface &quot;Data2&quot;. \r\n"+
"Enter signals &quot;entrada&quot;, type &quot;data&quot; + &quot;input&quot;, width 2 bits, and \r\n"+
"&quot;saida&quot;, type &quot;data&quot; + &quot;output&quot;, width 4 bits. \r\n"+
"Press the &quot;Data Def'n&quot; button to open the window. ";
comboStep8Text=""+
"step 8:<br>\r\n"+
"Connect interface &quot;Data2&quot; to object &quot;Combinatorial1&quot;. \r\n"+
"Press &quot;Combinatorial1&quot; to open the window. Enter any name (mux) in column \r\n"+
"&quot;Qualified Name&quot;, and enter the interface name, &quot;Data2&quot;, in column \r\n"+
"&quot;Interface Name&quot;. ";
comboStep9Text=""+
"step 9:<br>\r\n"+
"To finalize signal configuration, open the connection window (press \r\n"+
"&quot;Data Conn'n&quot;) and enter the connection destinations. \r\r"+
"<center> \r\n"+
"<table border=\"1\" style=\"text-align:center\"><tr><td>Signal Name</td><td>Destination</td></tr> \r\n"+
"<tr><td>entrata</td><td>Bus3.multiplexado</td></tr> \r\n"+
"<tr><td>saida</td><td>Bus3.demultiplexado</td></tr></table> \r\n"+
"</center> \r\n";
comboStep10Text=""+
"step 10:<br>\r\n"+
"Select &quot;Combinatorial1&quot; in the structure panel as destination for actions \r\n"+
"originating from the control panel.";
comboStep11Text=""+
"step 11:<br>\r\n"+
"Apply the logic specification language to object &quot;Combinatorial1&quot; (press button &quot;tabela&quot; \r\n"+
"highlighted in blue). ";
comboStep12Text=""+
"step 12:<br>\r\n"+
"Open object &quot;Combinatorial1&quot;, showing the logic truth table use to program the object's behavior \r\n"+
"(double-click object &quot;Combinatorial1&quot; in the structure panel).";
comboStep13Text=""+
"step 13:<br>\r\n"+
"Program the obejct: \r\n"+
"<center> \r\n"+
"<table border=\"1\" style=\"text-align:center\"><tr><td>Input Values</td><td>Output Result</td></tr> \r\n"+
"<tr><td>0 0</td><td>0 0 0 1</td></tr> \r\n"+
"<tr><td>0 1</td><td>0 0 1 0</td></tr> \r\n"+
"<tr><td>1 0</td><td>0 1 0 0</td></tr> \r\n"+
"<tr><td>1 1</td><td>1 0 0 0</td></tr></table> \r\n"+
"</center> \r\n";
comboStep14Text=""+
"step 14:<br>\r\n"+
"Create an instantiation tree (press the instantiation button high-lighted in blue). Code-generation applies \r\n"+
"only to objects in the instantiation tree.";
comboStep15Text=""+
"step 15:<br>\r\n"+
"Open the window of the instantiation tree in the work panel (double-click \r\n"+
"&quot;Instantiation4&quot; in the structure panel).";
comboStep16Text=""+
"step 16:<br>\r\n"+
"Drag the object &quot;Combinatorial1&quot; from the structure panel \r\n"+
"to the instantiaion window &quot;Instantiation4&quot; in the work panel.";
comboStep17Text=""+
"step 17:<br>\r\n"+
"Drop the dragged object &quot;Combinatorial1&quot; \r\n"+
"into the instantiation window &quot;Instantiation4&quot;.";
comboStep18Text=""+
"step 18:<br>\r\n"+
"Select the root of the instantiation tree &quot;Instantiation4&quot; in the structure window \r\n"+
"as target for actions originated by the control panel.";
comboStep19Text=""+
"step 19:<br>\r\n"+
"Activate the code generation process on the instantiation tree &quot;Instantiation4&quot; (press the generation button \r\n"+
"found on the right-hand side of the control panel). Select the destination directory into which code will be generated.";
comboStep20Text=""+
"step 20:<br>\r\n"+
"An example of generated code";
button3Text=""+
"<table border=\"1\"> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep1.jpg');setFrameHtml('comboString', comboStep1Text);\">step 1</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"<td rowspan=\"20\" style=\"vertical-align:top\"> \r\n"+
"<center> \r\n"+
"<img id=\"comboDisplay\" src=\"images/comboStep1.jpg\" alt=\" \"> </img> \r\n"+
"</center> \r\n"+
"<div id=\"comboString\"> \r\n"+
"</div> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep2.jpg');setFrameHtml('comboString', comboStep2Text);\">step 2</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep3.jpg');setFrameHtml('comboString', comboStep3Text);\">step 3</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep4.jpg');setFrameHtml('comboString', comboStep4Text);\">step 4</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep5.jpg');setFrameHtml('comboString', comboStep5Text);\">step 5</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep6.jpg');setFrameHtml('comboString', comboStep6Text);\">step 6</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep7.jpg');setFrameHtml('comboString', comboStep7Text);\">step 7</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep8.jpg');setFrameHtml('comboString', comboStep8Text);\">step 8</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep9.jpg');setFrameHtml('comboString', comboStep9Text);\">step 9</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep10.jpg');setFrameHtml('comboString', comboStep10Text);\">step 10</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep11.jpg');setFrameHtml('comboString', comboStep11Text);\">step 11</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep12.jpg');setFrameHtml('comboString', comboStep12Text);\">step 12</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep13.jpg');setFrameHtml('comboString', comboStep13Text);\">step 13</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep14.jpg');setFrameHtml('comboString', comboStep14Text);\">step 14</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep15.jpg');setFrameHtml('comboString', comboStep15Text);\">step 15</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep16.jpg');setFrameHtml('comboString', comboStep16Text);\">step 16</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep17.jpg');setFrameHtml('comboString', comboStep17Text);\">step 17</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep18.jpg');setFrameHtml('comboString', comboStep18Text);\">step 18</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep19.jpg');setFrameHtml('comboString', comboStep19Text);\">step 19</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('comboDisplay', 'images/comboStep20.jpg');setFrameHtml('comboString', comboStep20Text);\">step 20</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"</table> \r\n"+
"";
//<!-- ************** BUTTON 4 ************** -->
button4Text="An example of sequential logic code generation has not yet been written.";
//<!-- ************** BUTTON 5 ************** -->
button5Text="The Tutorial has not yet been written, please consult the Reference in the meanwhile.";
//<!-- ************** BUTTON 6 ************** -->
baseText=""+
"The HML display is logically divided into three panels of operation: \r\n" + 
"<ul><li>Structure Panel - The hierarchy of object composition \r\n"+ 
"is visually represented in tree form.</li> \r\n"+
"<li>Control Panel - The control panelinserts new objects into an object tree, \r\n"+
"changes object representation (implementation language), \r\n"+
"or generates code.</li> \r\n"+
"<li>Work Panel - The work panel provides a window enabling interconnection of the children of a single parent object. \r\n"+
"Programming of an object's implementation also takes plave in this window.</li></ul>\r\n"+
"";
treeText=""+
"The structure panel shows a forest of object trees, each of which is comprised of a hierarchy of objects \r\n"+
"in a parent-child relationship. The root of each tree may be one of only two object types: \r\n"+
"<ul><li><img src=\"images/package.gif\" alt=\"\"/>Package - A package represents a collection of objects. These objects may be \r\n"+
"incomletely specified as they may be used in the construction of additional objects, but do not \r\n"+
"directly generate code.</li> \r\n"+
"<li><img src=\"images/instantiation.gif\" alt=\"\"/>Instantiation - An instantiation object also collects objects, \r\n"+
"but these objects must be completely configured as they will be generating code. \r\n"+
"At each level within the tree, objects may be of the following types: \r\n"+
"<ul><li><img src=\"images/subpackage.gif\" alt=\"\"/>Subpackage. A subpackage collects objects, and may appear \r\n"+
"within a package or an instantiation. \r\n"+
"<li><img src=\"images/combinatorial.gif\" alt=\"\"/>Combinatorial. An object that implements \r\n"+
"pure combinatorial logic (no clocking or memory). These objects support the implementation languages \r\n"+
"graphical composition (<img src=\"images/compose.gif\" alt=\"\"/>),  \r\n"+
"written (<img src=\"images/logic.gif\" alt=\"\"/>),  or \r\n"+
"truth table (<img src=\"images/table.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/sequential.gif\" alt=\"\"/>Sequential. An object that implements \r\n"+
"sequential logic (clock-driven logic with storage capability). These objects support the implementation languages \r\n"+
"graphical composition (<img src=\"images/compose.gif\" alt=\"\"/>),  \r\n"+
"written (<img src=\"images/logic.gif\" alt=\"\"/>),  or \r\n"+
"state machine (<img src=\"images/state.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/test.gif\" alt=\"\"/>Test. An object that exercizes \r\n"+
"implementations, verifying the model's behavior. These objects support the implementation languages  \r\n"+
"written (<img src=\"images/logic.gif\" alt=\"\"/>)  or \r\n"+
"timing diagram (<img src=\"images/sequence.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/data.gif\" alt=\"\"/>Interface. An object that defines \r\n"+
"input and output signals for objects of type \r\n"+
"package (<img src=\"images/package.gif\" alt=\"\"/>), \r\n"+
"subpackage(<img src=\"images/subpackage.gif\" alt=\"\"/>), \r\n"+
"implementation (<img src=\"images/instantiation.gif\" alt=\"\"/>), \r\n"+
"combinatorial (<img src=\"images/combinatorial.gif\" alt=\"\"/>) \r\n"+
"or sequencial (<img src=\"images/sequential.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/bus.gif\" alt=\"\"/>Bus. A bus \r\n"+
"distributes connections from a single input port to a collection of output ports.</li> \r\n"+
"<li><img src=\"images/tristate.gif\" alt=\"\"/>Tristate bus. A bi-directional bus \r\n"+
"interconnecting input-output ports.</li></ul> \r\n"+
"To delete a subtree, or the entire tree, select the parent object \r\n"+
"and press the \"Del\" key. \r\n"+
"";
controlText=""+
"The control panel generally acts upon the currently selected item in the structure panel, serving the \r\n"+
"primary function of structural organization. The control functions may be organized into the primary areas of disk maintenance (persistence), \r\n"+
"collection of objects, object creation, object interconnection, \r\n"+
"implementation language specification, and code generation: \r\n"+
"<ul><li><img src=\"images/new.gif\" alt=\"\"/><img src=\"images/open.gif\" alt=\"\"/><img src=\"images/save.gif\" alt=\"\"/> \r\n"+
"Disk. Data persistence functions: \r\n"+
"<ul><li><img src=\"images/new.gif\" alt=\"\"/>New. Reset all internal data (no effect on disk)</li> \r\n"+
"<li><img src=\"images/open.gif\" alt=\"\"/>Open. Read data from the disk into the structure panel</li> \r\n"+
"<li><img src=\"images/save.gif\" alt=\"\"/>Save. Save project data to disk</li></ul></li> \r\n"+
"</ul> \r\n"+
"<ul><li><img src=\"images/package.gif\" alt=\"\"/><img src=\"images/subpackage.gif\" alt=\"\"/><img src=\"images/instantiation.gif\" alt=\"\"/> \r\n"+
"Collection. Obkect collection functions: \r\n"+
"<ul><li><img src=\"images/package.gif\" alt=\"\"/>Package. Create a package into which other objects may be created. \r\n"+
"Packages occur only at the root level of a tree.</li> \r\n"+
"<li><img src=\"images/subpackage.gif\" alt=\"\"/>Subpackage.  Objects may be created within a subpackage, \r\n"+
"and subpackages are created within other objects (they may not appear as the root).</li> \r\n"+
"<li><img src=\"images/instantiation.gif\" alt=\"\"/>Instantiation. Objects within the instantiation tree \r\n"+
"generate code (instantiations occur only at the root). </li></ul></li> \r\n"+
"</ul> \r\n"+
"<ul><li><img src=\"images/combinatorial.gif\" alt=\"\"/><img src=\"images/sequential.gif\" alt=\"\"/><img src=\"images/test.gif\" alt=\"\"/> \r\n"+
"Logic. Logic-containing objects (which may generate code modules): \r\n"+
"<ul><li><img src=\"images/combinatorial.gif\" alt=\"\"/>Combinatorial. Create a combinatorial logic-implementing object. \r\n"+
"As combinatorial logic does not support timing operations, its interface \r\n"+
"does not comtain a clock signal. </li> \r\n"+
"<li><img src=\"images/sequential.gif\" alt=\"\"/>Sequential. Create a sequential logic-implementing object. \r\n"+
"Sequential logic supports a single clock signal in its interface, which serves to implement time-sensitive activities within the object. \r\n"+
"At each descrete moment marked by the clock interface, the object transitions to (or maintains) a persistent internal state.</li> \r\n"+
"<li><img src=\"images/test.gif\" alt=\"\"/>Test. A test object generates clock signals and \r\n"+
"test sequences. Capability is provided to verify returned results. </li></ul></li> \r\n"+
"</ul> \r\n"+
"<ul><li><img src=\"images/data.gif\" alt=\"\"/><img src=\"images/bus.gif\" alt=\"\"/><img src=\"images/tristate.gif\" alt=\"\"/> \r\n"+
"Connections. Objects that cooperate in signal distribution: \r\n"+
"<ul><li><img src=\"images/data.gif\" alt=\"\"/>Interface. A signal configuration object \r\n"+
"to be associated with a logic-implementing object. </li> \r\n"+
"<li><img src=\"images/bus.gif\" alt=\"\"/>Bus. A uni-directional \r\n"+
"bus that distributes signals driven to a single input port to \r\n"+
"potentially many output ports. </li> \r\n"+
"<li><img src=\"images/tristate.gif\" alt=\"\"/>Tritstate. A bi-directional tristate bus \r\n"+
"interconnects multiple input-output ports, each of which has peer functionality (while this object \r\n"+
"distributes data, arbitration functionality is not included). </li></ul></li> \r\n"+
"</ul> \r\n"+
"<ul><li><img src=\"images/compose.gif\" alt=\"\"/><img src=\"images/logic.gif\" alt=\"\"/> \r\n"+
"<img src=\"images/table.gif\" alt=\"\"/><img src=\"images/state.gif\" alt=\"\"/><img src=\"images/sequence.gif\" alt=\"\"/>\r\n"+
"Implementation language. Select the internal logic implementation language: \r\n"+
"<ul><li><img src=\"images/compose.gif\" alt=\"\"/>Composition. A graphical \r\n"+
"object placement language. </li> \r\n"+
"<li><img src=\"images/logic.gif\" alt=\"\"/>Logic. A written Java-like \r\n"+
"logic implementation language. </li> \r\n"+
"<li><img src=\"images/table.gif\" alt=\"\"/>Truth Table. A table of logical values \r\n"+
"configures combinatorial object behavior. </li> \r\n"+
"<li><img src=\"images/state.gif\" alt=\"\"/>State Machine. A graphical \r\n"+
"state machine description language. </li> \r\n"+
"<li><img src=\"images/sequence.gif\" alt=\"\"/>Timing Diagram. A graphical \r\n"+
"language describing signal behavior with reference to a clock signal. </li></ul></li> \r\n"+
"</ul> \r\n"+
"<ul><li><img src=\"images/generate.gif\" alt=\"\"/> \r\n"+
"Generation. Code generation: \r\n"+
"<ul><li><img src=\"images/generate.gif\" alt=\"\"/>Generation. The objects within an instantiation object \r\n"+
"generate code ready for upload into a FPPGA device. </li></ul></li> \r\n"+
"</ul> \r\n"+
"";
workText=""+
"The work panel opens a window showing all objects that share a common parent, or the \r\n"+
"entry window for the implemtnation of a single object. \r\n"+
"Objects may be configured in greater detail, including: \r\n" +
"<ul><li>Configuration of Variables. \r\n"+
"Variables are defined for use in signal configuration or internal logic configuration. \r\n"+
"Variables defined by one object may be referenced by another object. \r\n"+
"</li> \r\n"+
"<li>Signals. \r\n"+
"Interface objects define signals of type input, output, or input-output. \r\n"+
"Interface objects are associated with one or more logic-defining objects, and \r\n"+
"variables are used to define the final configuration of the signal interface.</li> \r\n"+
"<li>Inter-Object Connections. \r\n"+
"Interfaces associated with objects are in turn associated with bus objects, \r\n"+
"effectively inter-connecting logic-generation objects. \r\n"+
"The work panel serves as destination for drag-and-drop operations on objects, \r\n"+
"allowing rearrangement of objects in order to clarify signal interconnections.</li> \r\n"+
"<li>Tree Rearrangement. \r\n" +
"The work panel serves as a destination for frag-and-drop operations on tree objects within the structure panel. \r\n"+
"Three operations transfering data into the work panel are represented: \r\n"+
"copy, inheritance, and instantiation. A copy operation duplicates the content of the dragged tree, \r\n"+
"creating new names and independent copies of each object. Inheritance creates references to the dragged objects \r\n"+
"such that changes later made to the original objects are reflected to the copies \r\n"+
"(variable values and signal connections excepted). A tree dragged into an instantiated object \r\n"+
"becomes itself instantiated. </li> \r\n"+
"<li>Specification of Logic Behavior. \r\n"+
"A work window within the work panel serves a logic data entry window for the specification of the object's behavior when \r\n"+
"the parent object has been configured with a logic specification language.</li></ul>  \r\n";
button6Text=""+
"<table border=\"1\" width=\"520\"> \r\n"+
"<tr> \r\n"+
"<td colspan=\"4\"> \r\n"+
"<center> \r\n"+
"<img id=\"referenceDisplay\" src=\"images/base.jpg\" alt=\" \"> </img> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<tr> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('referenceDisplay', 'images/base.jpg');setFrameHtml('frameString', baseText);\">Overview</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('referenceDisplay', 'images/baseTree.jpg');setFrameHtml('frameString', treeText);\">Structure</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('referenceDisplay', 'images/baseControl.jpg');setFrameHtml('frameString', controlText);\">Control</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"<td> \r\n"+
"<center> \r\n"+
"<button onclick=\"javascript:setImageFile('referenceDisplay', 'images/baseWork.jpg');setFrameHtml('frameString', workText);\">Work</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"<td colspan=\"4\"> \r\n"+
"<div id=\"frameString\"> \r\n"+
"</div> \r\n"+
"</td> \r\n"+
"</table> \r\n"+
"";
function setTextColor(button)
{
  document.getElementById(button).style.color = 'white';
}
function resetTextColor(button)
{
  document.getElementById(button).style.color = 'black';
}
function setTextContent(text)
{
//<!--  document.getElementById("displayText").rows[1].cells[3].innerHTML=text; -->
  document.getElementById("displayText").innerHTML=text;
}
function toggle(divIn)
{
	var div1 = document.getElementById(divIn)
	if (div1.style.display == 'none') {
		div1.style.display = 'block'
	} else {
		div1.style.display = 'none'
	}
}
function setImageFile(id, file)
{
  document.getElementById(id).src=file;
}
function setFrameHtml(id, text)
{
  document.getElementById(id).innerHTML = text;
}
function setBackgroundColor(id)
{
  var i;
  controlButtonText = "<H4>Your selection is marked in yellow:</H4>";
  controlButtonText = controlButtonText + "<ul>";
  for (i = 0; i < 18; i++)
  {
    if (id == i)
    {
      controlButtonText = controlButtonText + "<div style=\"background-color:yellow\">";
    }
    controlButtonText = controlButtonText + controlButtonArray[i];
    if (id == i)
    {
      controlButtonText = controlButtonText + "</div>";
    }
  }
  controlButtonText = controlButtonText + "</ul>";
}