/*
O presente script cria uma tabela de cores HTML/CSS (na verdade, são duas tabelas acopladas). Através do JavaScript, serão criadas duas tabelas:
1)uma tabela dividida em seções com as cores definidas na array "cores" abaixo (poderão ser feitas novas inclusões).
2)e outra tabela (a última seção) com 216 cores (As Cores Seguras da Web). 
Autor: Aires Bento Pereira Filho.
--------
Abaixo, a criação de uma array que irá receber o nome e o código hexadecimal das cores que serão apresentadas na primeira tabela. As posições da array de número par contém o código da cor e as de de número ímpar, o nome da cor. Por isso fizemos as inclusões duas a duas. Essa sequencia deve ser obedecida, no caso de novas inclusões. É muito importante que novas inclusões sejam feitas em números múltiplos de 8.
Como resolvemos dividir primeira tabela em seções, sendo que cada seção tem um título que encabeça as diversas cores, é necessário que, ao designar uma seção, no lugar do código da cor, coloquemos a palavra __secao e a seguir, no lugar do nome da cor, o título da secao.  
*/ 
var cores = new Array (
  "__secao", "<a name=\"1\">Seção 1 - Cores cujos nomes podem ser usados no lugar do código. O asterisco indica tratar-se de cor oficial.<\/a>", 
  "#F0F8FF", "AliceBlue",
  "#FAEBD7", "AntiqueWhite",
  "#00FFFF",  "* Aqua",
  "#7FFFD4", "Aquamarine",
  "#F0FFFF", "Azure", 
  "#F5F5DC", "Beige",
  "#FFE4C4", "Bisque",
  "#000000", "* Black",
  "#FFEBCD", "BlanchedAlmond",
  "#0000FF", "* Blue",
  "#8A2BE2", "BlueViolet",
  "#A52A2A", "Brown",
  "#DEB887", "BurlyWood",
  "#5F9EA0", "CadetBlue",
  "#7FFF00", "Chartreuse",
  "#D2691E", "Chocolate",
  "#FF7F50", "Coral",
  "#6495ED", "CornflowerBlue",
  "#FFF8DC", "Cornsilk",
  "#DC143C", "Crimson",
  "#00FFFF", "Cyan",
  "#00008B", "DarkBlue",
  "#008B8B", "DarkCyan",
  "#B8860B", "DarkGoldenRod",
  "#A9A9A9", "DarkGray",
  "#006400", "DarkGreen",
  "#BDB76B", "DarkKhaki",
  "#8B008B", "DarkMagenta",
  "#556B2F", "DarkOliveGreen",
  "#FF8C00", "DarkOrange",
  "#9932CC", "DarkOrchid",
  "#8B0000", "DarkRed",
  "#E9967A", "DarkSalmon",
  "#8FBC8F", "DarkSeaGreen",
  "#483D8B", "DarkSlateBlue",
  "#2F4F4F", "DarkSlateGray",
  "#00CED1", "DarkTurquoise",
  "#9400D3", "DarkViolet",
  "#FF1493", "DeepPink",
  "#00BFFF", "DeepSkyBlue",
  "#696969", "DimGray",
  "#1E90FF", "DodgerBlue",
  "#D19275", "Feldspar",
  "#B22222", "FireBrick",
  "#FFFAF0", "FloralWhite",
  "#228B22", "ForestGreen",
  "#FF00FF", "* Fuchsia",
  "#DCDCDC", "Gainsboro",
  "#F8F8FF", "GhostWhite",
  "#FFD700", "Gold",
  "#DAA520", "GoldenRod",
  "#808080", "* Gray",
  "#008000", "* Green",
  "#ADFF2F", "GreenYellow",
  "#F0FFF0", "HoneyDew",
  "#FF69B4", "HotPink",
  "#CD5C5C", "IndianRed",
  "#4B0082", "Indigo",
  "#FFFFF0", "Ivory",
  "#F0E68C", "Khaki",
  "#E6E6FA", "Lavender",
  "#FFF0F5", "LavenderBlush",
  "#7CFC00", "LawnGreen",
  "#FFFACD", "LemonChiffon",
  "#ADD8E6", "LightBlue",
  "#F08080", "LightCoral",
  "#E0FFFF", "LightCyan",
  "#FAFAD2", "LightGoldenRodYellow",
  "#D3D3D3", "LightGrey",
  "#90EE90", "LightGreen",
  "#FFB6C1", "LightPink",
  "#FFA07A", "LightSalmon",
  "#20B2AA", "LightSeaGreen",
  "#87CEFA", "LightSkyBlue",
  "#8470FF", "LightSlateBlue",
  "#778899", "LightSlateGray",
  "#B0C4DE", "LightSteelBlue",
  "#FFFFE0", "LightYellow",
  "#00FF00", "* Lime",
  "#32CD32", "LimeGreen",
  "#FAF0E6", "Linen",
  "#FF00FF", "Magenta",
  "#800000", "* Maroon",
  "#66CDAA", "MediumAquaMarine",
  "#0000CD", "MediumBlue",
  "#BA55D3", "MediumOrchid",
  "#9370D8", "MediumPurple",
  "#3CB371", "MediumSeaGreen",
  "#7B68EE", "MediumSlateBlue",
  "#00FA9A", "MediumSpringGreen",
  "#48D1CC", "MediumTurquoise",
  "#C71585", "MediumVioletRed",
  "#191970", "MidnightBlue",
  "#F5FFFA", "MintCream",
  "#FFE4E1", "MistyRose",
  "#FFE4B5", "Moccasin",
  "#FFDEAD", "NavajoWhite",
  "#000080", "* Navy",
  "#FDF5E6", "OldLace",
  "#808000", "* Olive",
  "#6B8E23", "OliveDrab",
  "#FFA500", "* Orange",
  "#FF4500", "OrangeRed",
  "#DA70D6", "Orchid",
  "#EEE8AA", "PaleGoldenRod",
  "#98FB98", "PaleGreen",
  "#AFEEEE", "PaleTurquoise",
  "#D87093", "PaleVioletRed",
  "#FFEFD5", "PapayaWhip",
  "#FFDAB9", "PeachPuff",
  "#CD853F", "Peru",
  "#FFC0CB", "Pink",
  "#DDA0DD", "Plum",
  "#B0E0E6", "PowderBlue",
  "#800080", "* Purple",
  "#FF0000", "* Red",
  "#BC8F8F", "RosyBrown",
  "#4169E1", "RoyalBlue",
  "#8B4513", "SaddleBrown",
  "#FA8072", "Salmon",
  "#F4A460", "SandyBrown",
  "#2E8B57", "SeaGreen",
  "#FFF5EE", "SeaShell",
  "#A0522D", "Sienna",
  "#C0C0C0", "* Silver",
  "#87CEEB", "SkyBlue",
  "#6A5ACD", "SlateBlue",
  "#708090", "SlateGray",
  "#FFFAFA", "Snow",
  "#00FF7F", "SpringGreen",
  "#4682B4", "SteelBlue",
  "#D2B48C", "Tan",
  "#008080", "* Teal",
  "#D8BFD8", "Thistle",
  "#FF6347", "Tomato",
  "#40E0D0", "Turquoise",
  "#EE82EE", "Violet",
  "#D02090", "VioletRed",
  "#F5DEB3", "Wheat",
  "#FFFFFF", "* White",
  "#F5F5F5", "WhiteSmoke",
  "#FFFF00", "* Yellow",
  "#9ACD32", "YellowGreen",
  "#000000", "* Black",
  "__secao", "<a name=\"2\">Seção 2 - Algumas cores cujos nomes em português são conhecidos<\/a>", 
  "#FFC800", "Laranja ou cor-de-abóbora", 
  "#FF78C7", "Carmim",
  "#CD5C5C", "Vermelho-indiano",
  "#A52A2A", "Marrom-claro",
  "#FFC8D7", "Rosa ou cor-de-rosa", 
  "#000099", "Índigo ou anil", 
  "#CC99FF", "Violeta ou lilás", 
  "#FFF8D9", "Bege",
  "#6B521D", "Ocre",
  "#CC3399", "Grená",
  "#FFB2AD", "Salmão",
  "#FF9600", "Coral",
  "#EFD66D", "Pardo",
  "#9F9F5F", "Cáqui",
  "#0066CC", "Azul-marinho",
  "#00C4C4", "Ciano-escuro ou ciano-petróleo",
  "#B9C300", "Verde-oliva",
  "#40E0D0", "Turquesa",
  "#993366", "Vinho",
  "#33CCFF", "Azul-celeste",
  "__secao", "<a name=\"3\">Seçao 3 - Gradações - I<\/a>",
  "#E6E8FA", "",
  "#FFCCCC", "",
  "#FFCC99", "",
  "#FFFFCC", "",
  "#D9D9F3", "",
  "#FF6666", "",
  "#FFCC33", "",
  "#FFFF99", "",
  "#CDC5BF", "",
  "#FF0000", "",
  "#FF9900", "",
  "#FFFF00", "",
  "#CCCCCC", "",
  "#CC0000", "",
  "#FF6600", "",
  "#FFCC00", "",
  "#999999", "",
  "#990000", "",
  "#CC6600", "",
  "#999900", "",
  "#666666", "",
  "#660000", "",
  "#993300", "",
  "#666600", "",
  "#333333", "",
  "#330000", "",
  "#663300", "",
  "#333300", "",
  "__secao", "<a name=\"4\">Seção 4 - Gradações - II<\/a>",
  "#99FF99", "",
  "#CCFFFF", "",
  "#FFCCFF", "",
  "#FFFFED", "",
  "#66FF99", "",
  "#66FFFF", "",
  "#FF99FF", "",
  "#FFFFCC", "",
  "#33FF33", "",
  "#33CCFF", "",
  "#CC66CC", "",
  "#FFFFAA", "",
  "#00CC00", "",
  "#3366FF", "",
  "#CC33CC", "",
  "#FFFF90", "",
  "#009900", "",
  "#3333FF", "",
  "#993366", "",
  "#FFFF80", "",
  "#006600", "",
  "#000099", "",
  "#663366", "",
  "#FFFF66", "",
  "#003300", "",
  "#000066", "",
  "#330033", "",
  "#FFFF33", "",
  "__secao", "<a name=\"5\">Seção 5 - Tonalidades de Verde<\/a>",
  "#70DB93", "Aquamarine",
  "#238E23", "Forest Green",
  "#93DB70", "Green Yellow",
  "#00FF7F", "Spring Green",
  "#006400", "Dark Green",
  "#646937", "Dark Green Copper",
  "#466464", "Green Copper",
  "#215E21", "Hunter Green",
  "#7FFF00", "Medium Spring Green",
  "#426F42", "Medium Sea Green",
  "#6B8E23", "Medium Forest Green",
  "#238E68", "Sea Green", 
  "__secao", "<a name=\"6\">Seção 6 - Tonalidades de marrom<\/a>",
  "#5C3317", "Baker\'s Chocolate",
  "#5C4033", "Dark Brown",
  "#A62A2A", "Brown",
  "#97694F", "Dark Tan",
  "#E9C2A6", "Light Wood",
  "#855E42", "Dark Wood",
  "#D19275", "Feldspar",
  "#8E2323", "Firebrick",
  "#A67A64", "Medium Wood", 
  "#EBC79E", "New Tan", 
  "#6B4226", "Semi-Sweet Chocolate", 
  "#8E6B23", "Sienna",
  "__secao", "<a name=\"7\">Seção 7 - Tonalidades de Violeta<\/a>",
  "#9F5F9F", "Blue Violet",
  "#9932CD", "Dark Orchid", 
  "#871F78", "Dark Purple",
  "#EE82EE", "Violet",
  "#DB7093", "Medium Violet Red",
  "#FF6EC7", "Neon Pink",       
  "#DDA0DD", "Plum",
  "#8A2BE2", "Blue Violet", 
  "#9400D3", "Dark Violet",
  "#FF1CAE", "Spicy Pink",
  "#CC3299", "Violet Red",
  "#DA70D6", "Orchid", 
  "__secao", "<a name=\"8\">Seção 8 - Tonalidades de Amarelo<\/a>",
  "#B5A642", "Brass", 
  "#D9D919", "Bright Gold", 
  "#FFEFD5", "Papaya Whip", 
  "#A67D3D" , "Bronze", 
  "#D98719", "Cool Copper", 
  "#B87333", "Copper", 
  "#CD7F32" , "Gold",
  "#FFE4C4", "Bisque",  
  "#DBDB70" , "Goldenrod", 
  "#E47833", "Mandarian Orange", 
  "#EAEAAE", "Medium Goldenrod", 
  "#CFB53B" , "Old Gold", 
  "#FF8C00", "Dark Orange", 
  "#FFF8DC", "Cornsilk", 
  "#FFDEAD", "Navajo White", 
  "#D8D8BF" , "Wheat",  
  "__secao", "<a name=\"9\">Seção 9 - Tonalidades de Azul<\/a>",
  "#42426F", "Corn Flower Blue",
  "#87CEFF", "Sky Blue", 
  "#7093DB", "Dark Turquoise",
  "#C0D9D9", "Light Blue",
  "#8F8FBD", "Light Steel Blue",
  "#3232CD", "Medium Blue",
  "#7F00FF", "Medium Slate Blue",
  "#4169E1", "Royal Blue",
  "#4D4DFF", "Neon Blue",
  "#00009C", "New Midnight Blue ",
  "#1E90FF", "Dodger Blue",
  "#5959AB", "Rich Blue",
  "#007FFF", "Slate Blue",
  "#00BFFF", "Deep Sky Blue",
  "#236B8E", "Steel Blue",
  "#38B0DE", "Summer Sky"
 );
var 
 e=0, // esta variável recebe a quantidade de elementos da matriz cores
 s=0; // esta variável recebe a quantidade de elementos que contém a string "__secao"

/*Apurando a quantidade total elementos da matriz cores e a quantidade de 
  elementos da mesma matriz que contém a string "__secao".*/
for (i=0;i<cores.length; i++) {
  e=i;
  if (cores[i]=="__secao") s=s+1;
}
var n=((e+1-2*s)/8)+ s;   // n recebe a quantidade de linhas da tabela a ser criada.

/*Escrevendo a quantidade de amostras que serão apresentadas. O número 216 que é somado refere-se à quantidade de cores presentes na segunda tabela*/
document.write("<p>São " +  (((e+1-2*s)/2) + 216) +  " amostras.</p>");

/*Iniciando a criaçao da primeira tabela*/
document.write(
  "<br><br><br><table class=\"tabcores\" width=\"100%\">");

/*Criação de linhas na tabela*/
for (k=0,w=0;k<n;k++,w=w+8) {

/*Criação de uma linha e de uma célula expandida com o título da seção e outra célula com o link voltar*/
  if (cores[w]=="__secao") {
    document.write("<tr><td class=\"titulosecao\" colspan=\"3\">" + cores[w+1]);
    document.write("<td class=\"titulosecao\"><a href=\"#topo\">voltar<\/a><\/td>" );
    w=w+2;
  }
  /*Criação de linhas para as cores*/
  document.write("<tr>");

  for (i=w;i<w+8;i=i+2) {

    if (cores[i]!=null) { 

      /* Criação e atribuição de valores às variáveis que recebem cada par de caracteres
			 de cores[i] a partir do segundo caractere, porque o primeiro (número 0) é o símbolo
			 #. Cada par é um número hexadecimal. */ 
		
        var
          rHex=cores[i].substring(1,3),
          gHex=cores[i].substring(3,5),
          bHex=cores[i].substring(5,7);

			/*Criação e atribuição de valor às variáveis que recebem os números decimais
			 correspondentes aos hexadecimais acima.*/		
        var
          rDec=parseInt(rHex,16),
          gDec=parseInt(gHex,16),
          bDec=parseInt(bHex,16);
					
			/*Criação e atribuição de valor à variavel booleana que indica se o texto da célula
			 pode ser ou não preto. Isto conforme for a cor de fundo mais clara ou mais 
			 escura)*/
		
      var podeTextoPreto= (
         (rDec>=128) && (bDec>=128) ||
         (rDec>=128) && (gDec>=128) ||
         (bDec>=128) && (gDec>=128) ||
         (bDec<=128) && (gDec>=128) &&
         (bDec<=128) 
         ); 

			/*Criação de variáveis que irão receber os números hexadecimais que formam uma cor
			 semelhante e enquadrada no conjunto das cores CSW. Tais números têm que pertencer
			 ao conjunto: 00,33,66,99,66,CC,FF. Entretanto, como essa cor semelhante será
			 informada apenas com o código hexadecimal abreviado (#xxx), adotaremos:
			 0,3,6,9,6,C,F.*/		
        var
          rHexCSW="",
          gHexCSW="",
          bHexCSW=""
					corCSW="#"+rHexCSW+gHexCSW+bHexCSW;				

			/*Atribuição de valor às variáveis acima */		
          if (rDec>=0 && rDec<=51) 
	          rHexCSW=(rDec-0)<Math.abs(rDec-51) ? "0" : "3"; 
					else
            if (rDec>=51 && rDec<=102) 
	            rHexCSW=(rDec-51)<Math.abs(rDec-102) ? "3" : "6"; 
					  else  
              if (rDec>=102 && rDec<=153) 
	              rHexCSW=(rDec-102)<Math.abs(rDec-153) ? "6" : "9"; 
					    else  
                if (rDec>=153 && rDec<=204) 
	                rHexCSW=(rDec-153)<Math.abs(rDec-204) ? "9": "C"; 
					      else  				
                  if (rDec>=204 && rDec<=255) 
	                  rHexCSW=(rDec-204)<Math.abs(rDec-255) ? "C" : "F"; 
	
          if (gDec>=0 && gDec<=51) 
	          gHexCSW=(gDec-0)<Math.abs(gDec-51) ? "0" : "3"; 
					else
            if (gDec>=51 && gDec<=102) 
	            gHexCSW=(gDec-51)<Math.abs(gDec-102) ? "3" : "6"; 
					  else  
              if (gDec>=102 && gDec<=153) 
	              gHexCSW=(gDec-102)<Math.abs(gDec-153) ? "6" : "9"; 
					    else  
                if (gDec>=153 && gDec<=204) 
	                gHexCSW=(gDec-153)<Math.abs(gDec-204) ? "9": "C"; 
					      else  				
                  if (gDec>=204 && gDec<=255) 
	                  gHexCSW=(gDec-204)<Math.abs(gDec-255) ? "C" : "F"; 										
										
          if (bDec>=0 && bDec<=51) 
	          bHexCSW=(bDec-0)<Math.abs(bDec-51) ? "0" : "3"; 
					else
            if (bDec>=51 && bDec<=102) 
	            bHexCSW=(bDec-51)<Math.abs(bDec-102) ? "3" : "6"; 
					  else  
              if (bDec>=102 && bDec<=153) 
	              bHexCSW=(bDec-102)<Math.abs(bDec-153) ? "6" : "9"; 
					    else  
                if (bDec>=153 && bDec<=204) 
	                bHexCSW=(bDec-153)<Math.abs(bDec-204) ? "9" : "C"; 
					      else  				
                  if (bDec>=204 && bDec<=255) 
	                  bHexCSW=(bDec-204)<Math.abs(bDec-255) ? "C" : "F"; 										

 			 corCSW="#"+rHexCSW+gHexCSW+bHexCSW;				       
					
      /*Criação da célula e atribuiçao da cor de fundo conforme o conteúdo
       de cores[i].*/
      if (podeTextoPreto)
        document.write( 
          "<td width=\"25%\" height=\"70\" style=background-color:" + cores[i] +  ";" + 
          "color:#000" + ">"
        );
				else
        document.write (
          "<td width=\"25%\" height=\"70\" style=background-color:" + cores[i] + ";" + 
          "color:#FFF" + ">"
        );

      /*Escrevendo o nome da cor dentro da célula, se diferente de "".*/  
      if (cores[i+1]!="")
        document.write (cores[i+1] + "<br>");
  
      /*Escrevendo o código RGB hexadecimal da cor dentro da célula (#xxxxxx, 6
       dígitos).*/  
      document.write (cores[i]+"<br>");
  
      /*Escrevendo o código RGB hexadecimal abreviado da cor dentro da célula (#xxx, 3
       dígitos).*/ 
			if (
			 rHex.charAt(0)==rHex.charAt(1)&&
			 gHex.charAt(0)==gHex.charAt(1)&&
			 bHex.charAt(0)==bHex.charAt(1)
			)
      document.write ("#" + rHex.charAt(0) + gHex.charAt(0)+ bHex.charAt(0)+ "<br>");
				
      /*Escrevendo o código RGB decimal(xxx,xxx,xxx) dentro da célula*/
			document.write (rDec + ",");
      document.write (gDec + ",");
      document.write (bDec);
       
     /*Escrevendo CSW sim ou não (CSW=cores seguras da web) dentro da célula*/
      if (
         (rDec=="0" || rDec=="51" || rDec=="102" || rDec=="153" || 
				  rDec=="204" || rDec=="255") && 

				 (gDec=="0" || gDec=="51" || gDec=="102" || gDec=="153" ||
				  gDec=="204" || gDec=="255") && 

         (bDec=="0" || bDec=="51" || bDec=="102" || bDec=="153" ||
				  bDec=="204" || bDec=="255")
      )
				document.write ("<br>CSW: sim");
				
  			else {
          document.write ("<br>CSW: não ");
	
				 /*Uma tabela dentro da célula*/
  			 document.write (
				 "<table>")
				 if (podeTextoPreto){
				   document.write("<td style=\"color:#000\">Alternativa CSW:</td>");
				   document.write (
				   "<td style=\"background-color:" + corCSW + ";" + "color:#000" + "\">");
				 }	 
				 else {
				   document.write("<td style=\"color:#FFF\">Alternativa CSW:</td>");		
           document.write (
				   "<td style=\"background-color:" + corCSW + ";" + "color:#FFF" + "\">");	
				 } 				 
				 document.write (corCSW + "</td></tr></table>");
        }
			document.write ("<\/td>"); 
    }
  }

	
  if (cores[w]!="__secao")
    document.write("<\/tr>"); 
}

document.write ("<\/table>");

/*Criação de uma nova tabela que ficará acoplada à primeira e que contém As 216 cores 
Seguras da Web */
document.write(
  "<table class=\"tabcores\" width=\"100%\">");

/*Criação de uma linha e de uma célula expandida com o título da seção e link voltar*/
document.write("<tr><td class=\"titulosecao\" colspan=5><a name=\"10\">");
document.write("Seção 10 - As 216 Cores Seguras da Web<\/a><\/td>");
document.write("<td class=\"titulosecao\"><a href=\"#topo\">voltar<\/a><\/td><\/tr>");

var
  r = new Array("00","33","66","99","CC","FF"),
  g = new Array("00","33","66","99","CC","FF"),
  b = new Array("00","33","66","99","CC","FF");

for (i=0;i<r.length;i++) 

  for (j=0;j<g.length;j++) {
    document.write("<tr>");

    for (k=0;k<b.length;k++) {
      var novacor = "#" + r[i] + g[j] + b[k];

        /*Criação da célula com a cor a ser exibida como fundo. Antes são estabelecidas 
				as condições para a alternância da cor do texto (branco ou preto), conforme for a
				cor de fundo, mais clara ou mais escura)*/
        if (
           (i>=2) && (k>=2) ||
           (i>=2) && (j>=2) ||
           (k>=2) && (j>=2) ||
           (k<=2) && (j>=2) &&
           (k<=2)
           ) { 
        document.write("<td width=\"17%\" height=\"60\" style=background-color:" +
				novacor + ";" + "color:#000>");}
      else{
        document.write("<td width=\"17%\" height=\"60\" style=background-color:" +
				novacor + ";" + "color:#fff>");}

      /*Escrevendo o código RGB hexadecimal (#xxxxxx) dentro da célula*/
      document.write(novacor);

     /*Escrevendo o código RGB hexadecimal abrevidado (#xxx) dentro da célula*/      
      document.write("<br>" + "#" + r[i].charAt(0)+ g[j].charAt(0)+ g[k].charAt(0) +
			"<br>");
     
		 /*Escrevendo o código RGB decimal (#xxx,xxx,xxx) dentro da célula*/
      document.write(parseInt(r[i],16)+","+parseInt(g[j],16)+","+parseInt(b[k],16));

      document.write("<\/td>");
  }
  document.write("<\/tr>");
}

document.write("<tr><td class=\"titulosecao\" colspan=5>");
document.write("<\/a><\/td>");
document.write("<td class=\"titulosecao\"><a href=\"#topo\">voltar<\/td><\/tr>");

document.write("<\/table>");

