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 (19);
controlButtonArray[0] = 
"<li><img src=\"images/new.gif\" alt=\"\"/>Apagar. Apaga todos os dados na armação de estrutura (não afeta o disco)</li> \r\n";
controlButtonArray[1] = 
"<li><img src=\"images/open.gif\" alt=\"\"/>Abrir. Lê dados do disco na armação da árvore</li> \r\n";
controlButtonArray[2] = 
"<li><img src=\"images/save.gif\" alt=\"\"/>Salvar. Guarda dados da armação da árvore no disco</li> \r\n";
controlButtonArray[3] = 
"<li><img src=\"images/package.gif\" alt=\"\"/>"+
"Pacote. Uma coleção de objetos pode ficar dentro de um pacote. "+
"Um pacote pode ser só a raiz de uma árvore"+
"</li> \r\n";
controlButtonArray[4] = 
"<li><img src=\"images/subpackage.gif\" alt=\"\"/>Sub-Pacote.  Uma coleção de objetos pode ficar dentro de um sub-pacote. \r\n"+
"Um sub-pacote pode ser qualquer folha de uma árvore (mas a raiz, não)</li> \r\n";
controlButtonArray[5] = 
"<li><img src=\"images/instantiation.gif\" alt=\"\"/>Realização. Objetos ficando dentro do objeto de realização \r\n"+
"são gerados aos códigos de execução </li> \r\n";
controlButtonArray[6] = 
"<li><img src=\"images/combinatorial.gif\" alt=\"\"/>Combinatório. Objeto do tipo lógica combinatória \r\n"+
"A lógica combinatória não tem sentido do tempo (nem estados, nem memórias). A interface de um objeto lógico não tem \r\n"+
"sinal do tipo relógio. </li> \r\n";
controlButtonArray[7] = 
"<li><img src=\"images/sequential.gif\" alt=\"\"/>Seqüencial. Objeto do tipo seqüencial. \r\n"+
"Lógica seqüencial tem um sinal tipo relógio, que serve para dar sentido de tempo ao objeto. \r\n"+
"A cada tempo indicado pelo sinal do tipo relógio, o objeto terá um estado interno, cujo \r\n"+
"estado pode mudar de tempo ao tempo, e cujo tempo está memorizado (guardado) quando \r\n"+
"não muda.</li> \r\n";
controlButtonArray[8] = 
"<li><img src=\"images/test.gif\" alt=\"\"/>Prova. Um objeto tipo prova gera sinais de relógio \r\n"+
"e dados de verificação. O objeto do tipo prova também tem capacidade ler sinais devolvidos  \r\n"+
"dos objetos sob prova e verificar resultados </li> \r\n";
controlButtonArray[9] = 
"<li><img src=\"images/data.gif\" alt=\"\"/>Interface. Uma interface contém configuração \r\n"+
"dos sinais que comunicam com um objeto do tipo lógico. </li> \r\n";
controlButtonArray[10] = 
"<li><img src=\"images/bus.gif\" alt=\"\"/>Conexão (uni-). Uma conexão uni-direcional \r\n"+
"tem um sinal de entrada e sinais múltiplos de saída (pode também distribuir mais que \r\n"+
"uma sinal de entrada ao mesmo tempo). </li> \r\n";
controlButtonArray[11] = 
"<li><img src=\"images/tristate.gif\" alt=\"\"/>Conexão (bi-). Uma conexão bi-direcional \r\n"+
"tem porta da conexão múltiplas. Cada porta de conexão tem sinais múltiplos do tipo \r\n"+
"entrada-saída (bi-direcional). Estas portas são interligadas. </li> \r\n";
controlButtonArray[12] = 
"<li><img src=\"images/compose.gif\" alt=\"\"/>Composição. Uma linguagem gráfica \r\n"+
"que monta objetos em uma mesa de desenho. </li> \r\n";
controlButtonArray[13] = 
"<li><img src=\"images/logic.gif\" alt=\"\"/>Lógica. Uma linguagem escrita \r\n"+
"para representar soluções lógicas. </li> \r\n";
controlButtonArray[14] = 
"<li><img src=\"images/table.gif\" alt=\"\"/>Tabela. Uma tabela dos valores lógicos \r\n"+
"que representam uma solução combinatória. </li> \r\n";
controlButtonArray[15] = 
"<li><img src=\"images/state.gif\" alt=\"\"/>Máquina de Estado. Uma linguagem gráfica \r\n"+
"que faz descrição de uma máquina de estado de ser (que representa uma solução seqüencial). </li> \r\n";
controlButtonArray[16] = 
"<li><img src=\"images/sequence.gif\" alt=\"\"/>Diagrama de Relógio. Uma linguagem gráfica \r\n"+
"que faz descrição de comportamento dos sinais em referencia a um sinal de relógio. </li> \r\n";
controlButtonArray[17] = 
"<li><img src=\"images/generate.gif\" alt=\"\"/>Geração. Os objetos da árvore de realização \r\n"+
"indicado (selecionado) estão gerados aos códigos para execução. </li> \r\n";
controlButtonArray[18] = 
"<li><img src=\"images/generate.gif\" alt=\"\"/>Geração. Os objetos da árvore de realização \r\n"+
"indicado (selecionado) estão gerados aos códigos para execução.</li> \r\n";
//<!-- ************** BUTTON 1 ************** -->
button1Text="<center><H3><a href=\"http://www.hmlware.com.br/hml.jnlp\">"+
"Executar HML (Versão pre-alfa!)</a></H3></center>\r\n" +
"<p>O programa HML usa as tecnologias JavaScript, SWT e \"Web Start\" (os últimos dois são da Sun Java). \r\n" +
"As vezes é necessário dar permissão ao browser para executar páginas da JavaScript (pode aparecer uma \r\n" +
"mensagem de pedido na barra de informações). É possível permitir a execução da JavaScript - não há perigo como \r\n" +
"as outras linguagens da Web (ActiveX).</p> \r\n" +
"A tecnologia \"Web Start\" está provida com Java 6.0. Se você tem uma versão de Java mais velha, \r\n"+
"ela mesma pode baixar a versão nova e assim se atualiza. Senão, você pode \r\n"+
"<a href=http://www.java.com/pt_BR/>instalar a partir deste link</a>. \r\n" +
"Você pode também consultar às \r\n"+
"<a href=http://java.sun.com/javase/6/webnotes/install/system-configurations.html>notas de instalação</a>. \r\n"+
"As vezes, precisa-se executar o\r\n"+
"arquivo de Web Start \"hml.jnlp\" após baixar, dependendo da configuração do browser. </p>\r\n" +
"<p>O programa da HML usa tecnologia SWT, que precisa de acesso ao sistema inteiro, e vai exigir \r\n"+
"enquanto mostrando um certificado assinando o programa da HML.\r\n" +
"Por isso, antes que permite de execução, verifique que o certificado está provido do site hmlware.com.br, \r\n" +
"e está assinado por <a href=\"http://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\">Sistemas Suportados por 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>Linguagem Modelagem de Hardware (HML)</H3> \r\n"+
"<ul><li><a href=\"javascript:toggle('button2link1');\" <H4>O que é a HML?</H4></a></li> \r\n"+
"<div id=\"button2link1\" style=\"display:none\"> \r\n"+
"<ul><li>Linguagem gráfica que se parece com a UML</li> \r\n"+
"<li>Linguagem escrita que se parece com a Java ou a C</li> \r\n"+
"<li>Liguagem que faz abstração do processo de desenvolvimento de hardware</li> \r\n"+
"<li>Liguagem que gera \"firmware\" para chips tipo FPGA</li></ul><br></div> \r\n"+
"<li><a href=\"javascript:toggle('button2link2');\" <H4>Por que a HML?</H4></a></li> \r\n"+
"<div id=\"button2link2\" style=\"display:none\"> \r\n"+
"<ul><li>Linguagens de especificação de operação de hardware (VHDL, Verilog, SystemC) são inacessíveis aos programadores (são obscuras)</li> \r\n"+
"<li>Mesmo para engenheiros, as linguagens são complicadas porque pretendem guardar toda funcionalidade disponível teoricamente em hardware (pense em assembler)</li> \r\n"+
"<li>Comunicação entre programadores e engenheiros é bem difícil, pois eles têm treinamento e pontos de vista bem diferentes </li></ul><br></div> \r\n"+
"<li><a href=\"javascript:toggle('button2link3');\" <H4>Princípios da HML</H4></a></li> \r\n"+
"<div id=\"button2link3\" style=\"display:none\"> \r\n"+
"<ul><li>A HML personifica um modelo novo de desenvolvimento de hardware - não é nada semelhante à uma unificação das linguagens correntes </li> \r\n"+
"<li>A HML provê de um modelo simplificado, porém flexível e poderoso, para desenvolvimento de hardware </li> \r\n"+
"<li>A HML coopera com linguagens modernas para fazer uma solução completa </li> \r\n"+
"<li>A HML provê uma representação gráfica dos conceitos abstratos de firmware </li> \r\n"+
"<li>A HML provê uma representação escrita em linguagem semelhante à Java, para dar mais poder ao programador </li> \r\n"+
"<li>A HML gera automaticamente a solução em firmware </li> \r\n"+
"<li>A HML gera automaticamente o provador de verificação </li></ul><br></div> \r\n"+
"<li><a href=\"javascript:toggle('button2link4');\" <H4>Conclusões </H4></a></li> \r\n"+
"<div id=\"button2link4\" style=\"display:none\"> \r\n"+
"<ul><li>A HML é semelhante à UML e às linguagens modernas, simples para compreensão por programadores </li> \r\n"+
"<li>A HML é melhor adaptada para compilação do que a UML</li> \r\n"+
"<li>Com a HML, programadores podem especificar, até construir, soluções de hardware </li> \r\n"+
"<li>A HML está sendo escrita no Brasil como base para inventar novas tecnologias brasileiras </li></ul><br></div></ul> \r\n" +
"<a href=\"presentation/hml.pdf\"><H3>Apresentação resumindo as tecnologias HML, UML, e FPGA</H3></a>";
//<!-- ************** BUTTON 3 ************** -->
comboStep1Text=""+
"passo 1:<br>\r\n"+
"Esta demonstração vai construir um programa de &quot;demultiplexar&quot;. Dois bits de entrada \r\n"+
"são demultiplexados assim: \r\n"+
"<center> \r\n"+
"<table border=\"1\" style=\"text-align:center\"><tr><td>Valor dos Bits de Entrada</td><td>Valor Gerado (Bits de Saída)</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"+
"O projeto começa com dados vazios, sem conteúdo nenhum.";
comboStep2Text=""+
"passo 2:<br>\r\n"+
"Seleciona a função &quot;cria pacote&quot; (mostrado aqui em azul na armação de controle). \r\n"+
"Está criada uma raiz de árvore, chamada &quot;Package0&quot;, \r\n"+
"na armação de estrutura e na armação de trabalho &quot;Root&quot;.";
comboStep3Text=""+
"passo 3:<br>\r\n"+
"Seleciona o pacote &quot;Package0&quot; na armação de estrutura. \r\n"+
"As ações de criar objetos iniciados na armação de controle agem \r\n"+
"no objeto selecionado na armação de estrutura.";
comboStep4Text=""+
"passo 4:<br>\r\n"+
"Cria três objetos, um do tipo combinatório, um do tipo interface, e um do tipo uni-ligação. \r\n"+
"Os botões na armação de controle mostrado em azul criam estes objetos. A ação de criar objeto \r\n"+
"é iniciado por botão na armação de controle, que age sobre o objeto selecionado na armação de estrutura.";
comboStep5Text=""+
"passo 5:<br>\r\n"+
"Abre a mesa de trabalho (clica-duplo no pacote &quot;Package0&quot; na armação de estrutura). \r\n"+
"Assim se pode manter a configuração dos objetos já criados.";
comboStep6Text=""+
"passo 6:<br>\r\n"+
"Abre janela de configuração de sinais do objeto &quot;Bus3&quot;, tipo uni-ligação. \r\n"+
"Entra os sinais &quot;multiplexado&quot;, tipo &quot;data&quot; com largura 2 bits, e \r\n"+
"&quot;demultiplexado&quot;, tipo &quot;data&quot; com largura 4 bits. \r\n"+
"Para abrir a janela, pressiona botão &quot;Bus Def'n&quot;. ";
comboStep7Text=""+
"passo 7:<br>\r\n"+
"Abre janela de configuração de sinais do objeto &quot;Data2&quot;, tipo interface. \r\n"+
"Entra os sinais &quot;entrada&quot;, tipo &quot;data&quot; + &quot;input&quot; com largura 2 bits, e \r\n"+
"&quot;saida&quot;, tipo &quot;data&quot; + &quot;output&quot; com largura 4 bits. \r\n"+
"Para abrir a janela, pressiona botão &quot;Data Def'n&quot;. ";
comboStep8Text=""+
"passo 8:<br>\r\n"+
"Conecta a interface &quot;Data2&quot; ao objeto &quot;Combinatorial1&quot;. \r\n"+
"Toca botão &quot;Combinatorial1&quot; para abrir a janela. Entra qualquer nome (mux) para \r\n"+
"&quot;Qualified Name&quot;, e entra nome de interface, &quot;Data2&quot;, para \r\n"+
"&quot;Interface Name&quot;. ";
comboStep9Text=""+
"passo 9:<br>\r\n"+
"No passo final da configuração de sinais, abre a janela de fazer conexões (pressiona botão \r\n"+
"&quot;Data Conn'n&quot;) e entra os destinos das conexões. \r\r"+
"<center> \r\n"+
"<table border=\"1\" style=\"text-align:center\"><tr><td>Nome do Sinal</td><td>Destino da Conexão</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=""+
"passo 10:<br>\r\n"+
"Seleciona o objeto &quot;Combinatorial1&quot; na armação de estrutura, para aplicar uma ação \r\n"+
"da armação de controle.";
comboStep11Text=""+
"passo 11:<br>\r\n"+
"Aplica a linguagem de realização de objeto ao objeto &quot;Combinatorial1&quot; (pressiona botão &quot;tabela&quot; \r\n"+
"mostrado em azul). ";
comboStep12Text=""+
"passo 12:<br>\r\n"+
"Abre o objeto &quot;Combinatorial1&quot; e mostrar a tabela de programação \r\n"+
"(clica-duplo sobre o objeto &quot;Combinatorial1&quot; na armação de estrutura).";
comboStep13Text=""+
"passo 13:<br>\r\n"+
"Faz programação de objeto: \r\n"+
"<center> \r\n"+
"<table border=\"1\" style=\"text-align:center\"><tr><td>Bits de Entrada</td><td>Bits de Saída</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=""+
"passo 14:<br>\r\n"+
"Cria uma árvore de realização (pressiona botão realização, em azul). Só objetos na árvore de realização \r\n"+
"podem ser gerados.";
comboStep15Text=""+
"passo 15:<br>\r\n"+
"Abre a mesa de realização na armação de trabalho (clica-duplo sobre objeto \r\n"+
"&quot;Instantiation4&quot; na armação de estrutura).";
comboStep16Text=""+
"passo 16:<br>\r\n"+
"Arrasta o objeto &quot;Combinatorial1&quot; na armação de estrutura até \r\n"+
"a mesa de realização &quot;Instantiation4&quot; na armação de trabalho.";
comboStep17Text=""+
"passo 17:<br>\r\n"+
"Baixa o objeto arrastado &quot;Combinatorial1&quot; \r\n"+
"na mesa de realização &quot;Instantiation4&quot;.";
comboStep18Text=""+
"passo 18:<br>\r\n"+
"Seleciona a raiz da árvore &quot;Instantiation4&quot; na armação de estrutura, para aplicar uma ação \r\n"+
"da armação de controle.";
comboStep19Text=""+
"passo 19:<br>\r\n"+
"Aplica o processo de geração ao objeto &quot;Instantiation4&quot; (pressiona botão &quot;geração&quot;, \r\n"+
"mostrado em azul). Seleciona a pasta onde se quer guardar os códigos gerados.";
comboStep20Text=""+
"passo 20:<br>\r\n"+
"Exemplo de código gerado";
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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 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);\">passo 20</button> \r\n"+
"</center> \r\n"+
"</td> \r\n"+
"</tr> \r\n"+
"</table> \r\n"+
"";
//<!-- ************** BUTTON 4 ************** -->
button4Text="Já há um exemplo combinatório, mas ainda não está escrito um exemplo seqüencial.";
//<!-- ************** BUTTON 5 ************** -->
button5Text="<H1>Tutorial</H1> \r\n"+
"<H2><a href=\"presentation/hml_tutorial_ch00.pdf\">Índice</a></H2> \r\n"+
"<H2><a href=\"presentation/hml_tutorial_ch01.pdf\">O Capítulo 1: Os Problemas do Tutorial</a></H2> \r\n"+
"<H2><a href=\"presentation/hml_tutorial_ch02.pdf\">O Capítulo 2: Decoder 2:4</a></H2> \r\n"+
"<H2><a href=\"presentation/decode_2_4.hml\">Código: Decoder 2:4</a></H2> \r\n";
//<!-- ************** BUTTON 6 ************** -->
baseText=""+
"A tela de HML está dividido em três armações: \r\n" + 
"<ul><li>Estrutura - A estrutura dos objetos mostra, na forma arbóreo, \r\n"+ 
"a composição dos objetos quando um objeto está composto dos outros. </li> \r\n"+
"<li>Controle - A armação de controle é composto dos controles que \r\n"+
"inserem objetos novos na armação de estrutura, trocam características dos \r\n"+
"objetos, ou geram códigos. </li> \r\n"+
"<li>Trabalho - A armação de controle é a mesa onde objetos da mesma folha de uma árvore na \r\n"+
"armação de estrutura estão mostrados.  \r\n"+
"Também, conexões entre objetos são feitas nesta armação </li></ul>\r\n"+
"";
treeText=""+
"A armação da estrutura mostra árvores, cada árvore sendo uma coleção de objetos e \r\n"+
"as relações de composição entre os objetos. A raiz de uma árvore pode ser só uma de \r\n"+
"duas possibilidades: \r\n"+
"<ul><li><img src=\"images/package.gif\" alt=\"\"/>Pacote - A raiz do tipo pacote representa uma coleção de objetos. Estes objetos podem ser \r\n"+
"incompletamente especificados, mesmo porque eles são referidos para a geração, mas \r\n"+
"eles não estão firmados por sua própria conta. </li> \r\n"+
"<li><img src=\"images/instantiation.gif\" alt=\"\"/>Realização - A raiz do tipo realização representa também uma coleção de objetos, mas estes \r\n"+
"objetos precisam ser completamente especificados, porque eles estão gerados aos códigos \r\n"+
"para execução</li></ul> \r\n"+
"Dentro cada nível de uma árvore se pode encontrar objetos dos tipos: \r\n"+
"<ul><li><img src=\"images/subpackage.gif\" alt=\"\"/>Sub-pacote. Um sub-pacote representa uma coleção de objetos, e pode aparacer \r\n"+
"dentro uma árvore do tipo pacote (onde se organiza objetos) ou do tipo realização \r\n"+
"(os dados de firmar estão especificados).</li> \r\n"+
"<li><img src=\"images/combinatorial.gif\" alt=\"\"/>Objeto Combinatório. Um objeto do tipo combinatório \r\n"+
"implementa lógica do tipo combinatório (sem relógio ou memória). Este objeto pode ser escrito nas linguagens  \r\n"+
"de composição gráfica (<img src=\"images/compose.gif\" alt=\"\"/>),  \r\n"+
"de composição escrita (<img src=\"images/logic.gif\" alt=\"\"/>),  ou \r\n"+
"de composição tabela (<img src=\"images/table.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/sequential.gif\" alt=\"\"/>Objeto Seqüencial. Um objeto do tipo seqüencial \r\n"+
"implementa lógica do tipo seqüencial, lógica com um relógio e capacidade de memória. Este objeto pode ser escrito nas linguagens  \r\n"+
"de composição gráfica (<img src=\"images/compose.gif\" alt=\"\"/>),  \r\n"+
"de composição escrita (<img src=\"images/logic.gif\" alt=\"\"/>),  ou \r\n"+
"de composição máquina de estado de ser (<img src=\"images/state.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/test.gif\" alt=\"\"/>Objeto Prova. Um objeto do tipo prova \r\n"+
"implementa provas verificando a execução do modelo. Este objeto pode ser escrito nas linguagens  \r\n"+
"de composição escrita (<img src=\"images/logic.gif\" alt=\"\"/>)  ou \r\n"+
"de composição seqüencial, (<img src=\"images/sequence.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/data.gif\" alt=\"\"/>Interface. Uma interface define \r\n"+
"sinais de entrada e sinais de saída para os objetos do tipo \r\n"+
"pacote (<img src=\"images/package.gif\" alt=\"\"/>), \r\n"+
"sub-pacote(<img src=\"images/subpackage.gif\" alt=\"\"/>), \r\n"+
"realização(<img src=\"images/instantiation.gif\" alt=\"\"/>), \r\n"+
"combinatório(<img src=\"images/combinatorial.gif\" alt=\"\"/>) \r\n"+
"ou seqüencial(<img src=\"images/sequential.gif\" alt=\"\"/>).</li> \r\n"+
"<li><img src=\"images/bus.gif\" alt=\"\"/>Uni-ligação. Uma ligação uni-direcional \r\n"+
"faz ligações entre saídas de uma interface até as entradas de alguns interfaces. </li> \r\n"+
"<li><img src=\"images/tristate.gif\" alt=\"\"/>Bi-ligação. Uma ligação bi-direcional \r\n"+
"conecta sinais do tipo entrada-saída entre algumas interfaces. </li></ul> \r\n"+
"Para apagar uma folha e os seus filhos, ou uma árvore inteira, seleciona objeto para \r\n"+
"ser apagado, e pressiona botão \"Del\". \r\n"+
"";
controlText=""+
"A armação de controle aplica-se às árvores (às folhas ou raizes), mantendo a \r\n"+
"organização delas. As funções podem-se arrumar nas áreas de manutenção ao disco, \r\n"+
"organização dos objetos, criação dos objetos, conexões entre objetos, \r\n"+
"linguagens de implementação, e geração dos códigos: \r\n"+
"<ul><li><img src=\"images/new.gif\" alt=\"\"/><img src=\"images/open.gif\" alt=\"\"/><img src=\"images/save.gif\" alt=\"\"/> \r\n"+
"Disco. Funções suportando a persistência dos dados no disco: \r\n"+
"<ul><li><img src=\"images/new.gif\" alt=\"\"/>Apagar. Apaga todos os dados na armação de estrutura (não afeta o disco)</li> \r\n"+
"<li><img src=\"images/open.gif\" alt=\"\"/>Abrir. Lê dados do disco na armação da árvore</li> \r\n"+
"<li><img src=\"images/save.gif\" alt=\"\"/>Salvar. Guarda dados da armação da árvore no disco</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"+
"Organizar. Funções suportando organização dos objetos: \r\n"+
"<ul><li><img src=\"images/package.gif\" alt=\"\"/>Pacote. Uma coleção de objetos pode ficar dentro de um pacote. \r\n"+
"Um pacote pode ser só a raiz de uma árvore </li> \r\n"+
"<li><img src=\"images/subpackage.gif\" alt=\"\"/>Sub-Pacote.  Uma coleção de objetos pode ficar dentro de um sub-pacote. \r\n"+
"Um sub-pacote pode ser qualquer folha de uma árvore (mas a raiz, não)</li> \r\n"+
"<li><img src=\"images/instantiation.gif\" alt=\"\"/>Realização. Objetos ficando dentro do objeto de realização \r\n"+
"são gerados aos códigos de execução </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"+
"Lógica. Os objetos que contêm lógica (podem ser gerados): \r\n"+
"<ul><li><img src=\"images/combinatorial.gif\" alt=\"\"/>Combinatório. Objeto do tipo lógica combinatória \r\n"+
"A lógica combinatória não tem sentido do tempo (nem estados, nem memórias). A interface de um objeto lógico não tem \r\n"+
"sinal do tipo relógio. </li> \r\n"+
"<li><img src=\"images/sequential.gif\" alt=\"\"/>Seqüencial. Objeto do tipo seqüencial. \r\n"+
"Lógica seqüencial tem um sinal tipo relógio, que serve para dar sentido de tempo ao objeto. \r\n"+
"A cada tempo indicado pelo sinal do tipo relógio, o objeto terá um estado interno, cujo \r\n"+
"estado pode mudar de tempo ao tempo, e cujo tempo está memorizado (guardado) quando \r\n"+
"não muda. </li> \r\n"+
"<li><img src=\"images/test.gif\" alt=\"\"/>Prova. Um objeto tipo prova gera sinais de relógio \r\n"+
"e dados de verificação. O objeto do tipo prova também tem capacidade ler sinais devolvidos  \r\n"+
"dos objetos sob prova e verificar resultados </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"+
"Ligação. Os objetos que contêm dados para fazer ligações: \r\n"+
"<ul><li><img src=\"images/data.gif\" alt=\"\"/>Interface. Uma interface contém configuração \r\n"+
"dos sinais que comunicam com um objeto do tipo lógico. </li> \r\n"+
"<li><img src=\"images/bus.gif\" alt=\"\"/>Conexão (uni-). Uma conexão uni-direcional \r\n"+
"tem um sinal de entrada e sinais múltiplos de saída (pode também distribuir mais que \r\n"+
"uma sinal de entrada ao mesmo tempo). </li> \r\n"+
"<li><img src=\"images/tristate.gif\" alt=\"\"/>Conexão (bi-). Uma conexão bi-direcional \r\n"+
"tem porta da conexão múltiplas. Cada porta de conexão tem sinais múltiplos do tipo \r\n"+
"entrada-saída (bi-direcional). Estas portas são interligadas. </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"+
"Linguagem. Seleciona a linguagem que será usada para implementar a lógica interna de um objeto: \r\n"+
"<ul><li><img src=\"images/compose.gif\" alt=\"\"/>Composição. Uma linguagem gráfica \r\n"+
"que monta objetos em uma mesa de desenho. </li> \r\n"+
"<li><img src=\"images/logic.gif\" alt=\"\"/>Lógica. Uma linguagem escrita \r\n"+
"para representar soluções lógicas. </li> \r\n"+
"<li><img src=\"images/table.gif\" alt=\"\"/>Tabela. Uma tabela dos valores lógicos \r\n"+
"que representam uma solução combinatória. </li> \r\n"+
"<li><img src=\"images/state.gif\" alt=\"\"/>Máquina de Estado. Uma linguagem gráfica \r\n"+
"que faz descrição de uma máquina de estado de ser (que representa uma solução seqüencial). </li> \r\n"+
"<li><img src=\"images/sequence.gif\" alt=\"\"/>Diagráma de Relógio. Uma linguagem gráfica \r\n"+
"que faz descripção de comportamento dos sinais em referencia a um sinal de relógio. </li></ul></li> \r\n"+
"</ul> \r\n"+

"<ul><li><img src=\"images/generate.gif\" alt=\"\"/> \r\n"+
"Geração. Geração dos códigos para uma árvore de realização: \r\n"+
"<ul><li><img src=\"images/generate.gif\" alt=\"\"/>Geração. Os objetos da árvore de realização \r\n"+
"indicado (selecionado) estão gerados aos códigos para execução. </li></ul></li> \r\n"+
"</ul> \r\n"+
"";
workText=""+
"A armação de trabalho mostra sobre uma mesa de trabalho os objetos que têm o mesmo pai. \r\n"+
"Cada objeto pode ser configurado em detalhe, incluindo: \r\n" +
"<ul><li>Variáveis de Configuração. \r\n"+
"Se pode definir umas variáveis para uso em definição dos sinais de entrada ou de saída, \r\n"+
"ou na implementação de comportamento de objeto na linguagem de lógica escrita. Variáveis \r\n"+
"de um objeto podem ser referenciados por um outro objeto. \r\n"+
"</li> Também usa variáveis objetos do tipo ligação. \r\n"+
"<li>Sinais de Entrada ou de Saída. \r\n"+
"Um objeto do tipo interface tem definições de variáveis. \r\n"+
"Um objeto do tipo interface está associado com um objeto do tipo lógico (ou mais do que um objeto), e \r\n"+
"as variáveis estão usados por a lógica que defina o comportamento do objeto do tipo lógico. </li> \r\n"+
"<li>Ligações entres Objetos do tipo Lógica. \r\n"+
"Interfaces associadas com objetos do tipo lógica estão conectadas por os objetos do tipo ligação, \r\n"+
"realizando efetivamente inter-ligações entres os objetos do tipo lógica. \r\n"+
"A armação de trabalho serve como destino de operação \"drag-and-drop\" (arrasta-e-baixa) sobre objetos, \r\n"+
"suportando arrumação dos objetos na mesa de trabalho, para aclarar as ligações visualmente. </li> \r\n"+
"<li>Ligações entre Árvores. \r\n" +
"A armação da trabalho também serve como destino de operação \"drag-and-drop\" sobre árvores \r\n"+
"para representar importação de conteúdo das árvores dentro a mesa de estrutura. Três tipos de \r\n"+
"importação são suportados: copiar, herdar, e firmar. Ato de copiar faz uma copia nova da árvore, \r\n"+
"mas com cada objeto sendo novo e denominado novamente. Ato de herdar faz uma referencia ao objetos velhos \r\n"+
"significando que trocas feito contro um objeto original passam para a referencia \r\n"+
"(não os valores das variáveis nem os dados das ligações). Ato de firmar é copiar a um \r\n"+
"destino do tipo realização (dentro uma árvore do tipo realização).</li> \r\n"+
"<li>Especificação de Comportamento Lógico. \r\n"+
"A mesa de trabalho pode servir como a caixa de entrada para a especificação do comportamento lógico do objeto (caso que \r\n"+
"o objeto da folha de árvore que é o pai da mesa de trabalho tem configuração de realizar comportamento lógico).</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);\">Resumo</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);\">Estrutura</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);\">Controle</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);\">Trabalho</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>A sua seleção esta marcado no cor amarilho:</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>";
}