Adaptando el selector de color de caricatos

[X3mdesign]

Hola amigos!!! estoy intentando adaptar el selector de color que está en http://www.pepemolina.com/generador/generador.html si pinchamos en "configuración" aparece un popUp... pues bien quiero algo parecido a lo que ocurre si pinchas sobre un color... que se abre un popUp con el "gran selector"

Ahora os cuento cómo lo tengo yop y qué quiero que haga :)... tengo el site en PHP...

primeramente detecto si el campo que se muestra es un campo "color" y entonces escribo el código para que me muestre un <input> con el texto del campo y una tabla con el color para que al pincharlo me abra un popUp... esta es la función para mostrarlo:

Código PHP:

  function mostrarColor($name_campo,$color){
    echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" onclick=\"EditaColor(0, '$color')\"><tr><td>";
    echo "<input class=\"tb_input\" name=\"$name_campo\" type=\"text\" value=\"$color\" size=\"7\" maxlength=\"7\">";
    echo "</td><td width=\"10\"></td><td>";
    echo "<table width=\"22\" border=\"0\" cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"#000000\"><tr><td bgcolor=\"$color\">&nbsp;</td></tr></table>";
    echo "</td></tr></table>";
} 
   

al pinchar sobre la tabla se ejectua el .js "editor_color.js" que es este:

Código:

<!-------------------      funciones          -------------------->
function alerta()	{
{alert("Esta página solo funciona como pop-up"); window.close();}
}

var boton = document.getElementsByName("color");
var colores;
var botones = document.getElementsByName("boton");
function ini()	{
if (!opener) alerta();
colores = opener.colores;

for (var i = 0; i < botones.length; i ++) {
	botones[i].style.cursor = (document.all) ? "hand" : "pointer";
	botones[i].style.backgroundColor = colores[2];
	botones[i].style.color = colores[3];
	}
for (var i = 0; i < boton.length; i ++) {
	boton[i].style.cursor = (document.all) ? "hand" : "pointer";
	boton[i].style.backgroundColor = colores[i];
	boton[i].style.border = "2px dotted white"; //***
	}
for (var i = 0; i < colores.length; i ++)	{
	editando = i;
	recoger(colores[i]);
	}
}

function fin()	{
	if (ventana) ventana.close();
	if (opener)
		opener.no_popup(5);
}

var editando;
var ventana = false;

function EditaColor(x, color)	{
if (!opener) alerta();
else	{
	for (i=0; i<8; i++) //***
		boton[i].style.border="2px solid white"; //***
	boton[x].style.border="2px dotted red"; //***
	editando = x;
	if (!ventana)
		ventana = window.open("color.html" + "?" + color, "flotante", "width=600,height=350");
	else
		ventana.document.getElementById("visor").style.backgroundColor = color;
	}
}

var resultado = "";
function recoger(x)	{
	resultado = x;
	boton[editando].style.backgroundColor = resultado;
	colores[editando] = resultado;
	switch (editando)	{
	case 0:
	document.getElementById("ej0").style.backgroundColor = resultado;
	break;
	case 1:
	document.getElementById("ej0").style.color = resultado;
	break;
	case 2:
	document.getElementById("ej1").style.backgroundColor = resultado;
	break;
	case 3:
	document.getElementById("ej1").style.color = resultado;
	break;
	case 4:
	document.getElementById("ej2").style.backgroundColor = resultado;
	break;
	case 5:
	document.getElementById("ej2").style.color = resultado;
	break;
	case 6:
	document.getElementById("ej3").style.backgroundColor = resultado;
	break;
	case 7:
	document.getElementById("ej3").style.color = resultado;
	break;
	}
}

function no_popup(x)	{
	ventana = false;
	return true;
}

var temas = [
	"#ffff00", "#000000", "#c0c0c0", "#000000", "#add8e6", "#000000", "#90ee90", "#000000",

	"#6600cc", "#ffffff", "#99afcc", "#ff0000", "#3399ff", "#66ff99", "#669999", "#99ffff",
	"#ffffff", "#660000", "#ffffff", "#660000", "#ffffff", "#660000", "#ffffff", "#660000",
	"#ffcc99", "#ff0066", "#3399ff", "#ffffff", "#669999", "#000033", "#ffffcc", "#990066",
	"#333399", "#ffffff", "#ccccff", "#330000", "#cc9999", "#660000", "#cc3333", "#ffffff",
	"#339999", "#ccffff", "#ffff99", "#cc0033", "#66cc66", "#660000", "#0099cc", "#ccffff",

	"#c0c0c0", "#ff0000", "#ffff00", "#000000", "#90ee90", "#000000", "#add8e6", "#000000",
	"#90ee90", "#ff0000", "#ff0000", "#000000", "#c0c0c0", "#000000", "#ffff00", "#000000",
	"#3333ff", "#ffff00", "#00ffff", "#660066", "#00ff00", "#660099", "#ff0000", "#ccff00",
	"#333366", "#ff0066", "#000000", "#00cc00", "#2f4f4f", "#ccff00", "#8b008b", "#00ccff"
	];

function tema(n)	{
var ini = 8 * n;
for (var i = 0; i < 8; i ++)	{
	colores[i] = temas[ini + i];
	boton[i].style.backgroundColor = colores[i];
	switch (i)	{
	case 0:
	document.getElementById("ej0").style.backgroundColor = colores[i];
	break;
	case 1:
	document.getElementById("ej0").style.color = colores[i];
	break;
	case 2:
	document.getElementById("ej1").style.backgroundColor = colores[i];
	break;
	case 3:
	document.getElementById("ej1").style.color = colores[i];
	break;
	case 4:
	document.getElementById("ej2").style.backgroundColor = colores[i];
	break;
	case 5:
	document.getElementById("ej2").style.color = colores[i];
	break;
	case 6:
	document.getElementById("ej3").style.backgroundColor = colores[i];
	break;
	case 7:
	document.getElementById("ej3").style.color = colores[i];
	break;
	}
}
}
function formulario()	{
	var c = confirm("enviar colores al autor para incluirlos");
	if (c)	{
		document.forms[0].tema.value = window.prompt("Introduzca el nombre del tema:", "Tema");
		document.forms[0].colores.value = colores;
		document.forms[0].submit();
	}
}

function actualizar()	{
	opener.colores = colores; 
	opener.ponColores();
	opener.expandir();
}

y me sale el mensaje de error: Esta página solo funciona como pop-up tengo desactivado el anti-popUp para ese dominio... pero sigue sin funcionar...

me podéis echar un cable?? muchas gracias!!!