var selected_theme = 0;
var custom_theme_1 = "";
var custom_theme_2 = "";
var custom_theme_3 = "";
var example_width = "100%";

function display_layout(layout)
{
	if(layout == 1)
	{
		document.getElementById("id_div_layout").innerHTML = "<table id=\"id_table_example\" width=\""+example_width+"\" cellpadding=\"0\" cellspacing=\"3\" class=\"table\"><tr><td id=\"td_1\" class=\"td\" height=\"20\">&nbsp;</td></tr><tr><td id=\"td_2\" class=\"td\" height=\"45\">&nbsp;</td></tr><tr><td id=\"td_3\" class=\"td\" height=\"20\">&nbsp;</td></tr></table><b>Example</b>";
		if(selected_theme != 0){ display_color_theme(selected_theme); }
	}
	if(layout == 2)
	{
		document.getElementById("id_div_layout").innerHTML = "<table id=\"id_table_example\" width=\""+example_width+"\" cellpadding=\"0\" cellspacing=\"3\" class=\"table\"><tr><td colspan=\"2\" id=\"td_1\" class=\"td\" height=\"20\">&nbsp;</td></tr><tr><td id=\"td_4\" class=\"td\" width=\"20\" height=\"45\">&nbsp;</td><td id=\"td_2\" class=\"td\" width=\"106\" height=\"45\">&nbsp;</td></tr><tr><td colspan=\"2\" id=\"td_3\" class=\"td\" height=\"20\">&nbsp;</td></tr></table><b>Example</b>";
		if(selected_theme != 0){ display_color_theme(selected_theme); }
	}
	if(layout == 3)
	{
		document.getElementById("id_div_layout").innerHTML = "<table id=\"id_table_example\" width=\""+example_width+"\" cellpadding=\"0\" cellspacing=\"3\" class=\"table\"><tr><td colspan=\"2\" id=\"td_1\" class=\"td\" height=\"20\">&nbsp;</td></tr><tr><td id=\"td_2\" class=\"td\" width=\"106\" height=\"45\">&nbsp;</td><td id=\"td_4\" class=\"td\" width=\"20\" height=\"45\">&nbsp;</td></tr><tr><td colspan=\"2\" id=\"td_3\" class=\"td\" height=\"20\">&nbsp;</td></tr></table><b>Example</b>";
		if(selected_theme != 0){ display_color_theme(selected_theme); }
	}
	if(layout == 4)
	{
		document.getElementById("id_div_layout").innerHTML = "<table id=\"id_table_example\" width=\""+example_width+"\" cellpadding=\"0\" cellspacing=\"3\" class=\"table\"><tr><td colspan=\"3\" id=\"td_1\" class=\"td\" height=\"20\">&nbsp;</td></tr><tr><td id=\"td_4\" class=\"td\" width=\"42\" height=\"45\">&nbsp;</td><td id=\"td_2\" class=\"td\" width=\"42\" height=\"45\">&nbsp;</td><td id=\"td_5\" class=\"td\" width=\"42\" height=\"45\">&nbsp;</td></tr><tr><td colspan=\"3\" id=\"td_3\" class=\"td\" height=\"20\">&nbsp;</td></tr></table><b>Example</b>";
		if(selected_theme != 0){ display_color_theme(selected_theme); }
	}
	if(layout == 5)
	{
		document.getElementById("id_div_layout").innerHTML = "<table id=\"id_table_example\" width=\""+example_width+"\" cellpadding=\"0\" cellspacing=\"3\" class=\"table\"><tr><td colspan=\"3\" id=\"td_1\" class=\"td\" height=\"20\">&nbsp;</td></tr><tr><td id=\"td_4\" class=\"td\" width=\"20\" height=\"45\">&nbsp;</td><td id=\"td_2\" class=\"td\" width=\"66\" height=\"45\">&nbsp;</td><td id=\"td_5\" class=\"td\" width=\"20\" height=\"45\">&nbsp;</td></tr><tr><td colspan=\"3\" id=\"td_3\" class=\"td\" height=\"20\">&nbsp;</td></tr></table><b>Example</b>";
		if(selected_theme != 0){ display_color_theme(selected_theme); }
	}
}

function display_color_theme(theme)
{
	if(document.getElementById("id_div_layout").innerHTML == ""){alert("PLEASE FIRST SELECT A LAYOUT");}
	else
	{
		if(theme == 1)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#FF0000"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#CC3333"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#FF0000"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#990000"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#990000"; } catch(err){}
			custom_theme_1 = "#FF0000"; custom_theme_2 = "#CC3333"; custom_theme_3 = "#990000";
		}
		if(theme == 2)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#FF6600"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#993300"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#FF6600"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#CC6633"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#CC6633"; } catch(err){}
			custom_theme_1 = "#FF6600"; custom_theme_2 = "#993300"; custom_theme_3 = "#CC6633";
		}
		if(theme == 3)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#FF9900"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#CC9966"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#FF9900"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#CC6600"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#CC6600"; } catch(err){}
			custom_theme_1 = "#FF9900"; custom_theme_2 = "#CC9966"; custom_theme_3 = "#CC6600";
		}
		if(theme == 4)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#FFCC00"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#FFFF99"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#FFCC00"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#CC9900"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#CC9900"; } catch(err){}
			custom_theme_1 = "#FFCC00"; custom_theme_2 = "#FFFF99"; custom_theme_3 = "#CC9900";
		}
		if(theme == 5)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#FFFF00"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#FFFFCC"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#FFFF00"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#FFFF99"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#FFFF99"; } catch(err){}
			custom_theme_1 = "#FFFF00"; custom_theme_2 = "#FFFFCC"; custom_theme_3 = "#FFFF99";
		}
		if(theme == 6)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#99FF00"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#CCFF99"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#99FF00"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#66CC00"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#66CC00"; } catch(err){}
			custom_theme_1 = "#99FF00"; custom_theme_2 = "#CCFF99"; custom_theme_3 = "#66CC00";
		}
		if(theme == 7)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#33FF00"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#99FF99"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#33FF00"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#33CC00"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#33CC00"; } catch(err){}
			custom_theme_1 = "#33FF00"; custom_theme_2 = "#99FF99"; custom_theme_3 = "#33CC00";
		}
		if(theme == 8)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#00CC00"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#99FF99"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#00CC00"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#009900"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#009900"; } catch(err){}
			custom_theme_1 = "#00CC00"; custom_theme_2 = "#99FF99"; custom_theme_3 = "#009900";
		}
		if(theme == 9)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#00CC66"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#99FFCC"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#00CC66"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#006633"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#006633"; } catch(err){}
			custom_theme_1 = "#00CC66"; custom_theme_2 = "#99FFCC"; custom_theme_3 = "#006633";
		}
		if(theme == 10)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#009999"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#99FFFF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#009999"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#006666"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#006666"; } catch(err){}
			custom_theme_1 = "#009999"; custom_theme_2 = "#99FFFF"; custom_theme_3 = "#006666";
		}
		if(theme == 11)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#0066CC"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#99CCFF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#0066CC"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#003366"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#003366"; } catch(err){}
			custom_theme_1 = "#0066CC"; custom_theme_2 = "#99CCFF"; custom_theme_3 = "#003366";
		}
		if(theme == 12)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#0033CC"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#3366FF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#0033CC"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#003366"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#003366"; } catch(err){}
			custom_theme_1 = "#0033CC"; custom_theme_2 = "#3366FF"; custom_theme_3 = "#003366";
		}
		if(theme == 13)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#330099"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#9999FF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#330099"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#330066"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#330066"; } catch(err){}
			custom_theme_1 = "#330099"; custom_theme_2 = "#9999FF"; custom_theme_3 = "#330066";
		}
		if(theme == 14)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#660099"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#CC99FF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#660099"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#330066"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#330066"; } catch(err){}
			custom_theme_1 = "#660099"; custom_theme_2 = "#CC99FF"; custom_theme_3 = "#330066";
		}
		if(theme == 15)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#990099"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#FF99FF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#990099"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#660066"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#660066"; } catch(err){}
			custom_theme_1 = "#990099"; custom_theme_2 = "#FF99FF"; custom_theme_3 = "#660066";
		}
		if(theme == 16)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#CC0099"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#FF99CC"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#CC0099"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#990066"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#990066"; } catch(err){}
			custom_theme_1 = "#CC0099"; custom_theme_2 = "#FF99CC"; custom_theme_3 = "#990066";
		}
		if(theme == 17)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#FF0066"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#FF99CC"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#FF0066"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#990033"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#990033"; } catch(err){}
			custom_theme_1 = "#FF0066"; custom_theme_2 = "#FF99CC"; custom_theme_3 = "#990033";
		}
		if(theme == 18)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#E4E4E4"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#FFFFFF"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#E4E4E4"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#CCCCCC"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#CCCCCC"; } catch(err){}
			custom_theme_1 = "#E4E4E4"; custom_theme_2 = "#FFFFFF"; custom_theme_3 = "#CCCCCC";
		}
		if(theme == 19)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = "#000000"; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = "#999999"; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = "#000000"; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = "#333333"; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = "#333333"; } catch(err){}
			custom_theme_1 = "#000000"; custom_theme_2 = "#999999"; custom_theme_3 = "#333333";
		}
		if(theme == 20)
		{
			selected_theme = theme;
			try{ document.getElementById("td_1").style.backgroundColor = custom_theme_1; } catch(err){}
			try{ document.getElementById("td_2").style.backgroundColor = custom_theme_2; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = custom_theme_1; } catch(err){}
			try{ document.getElementById("td_4").style.backgroundColor = custom_theme_3; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = custom_theme_3; } catch(err){}
		}
	}
}


function display_color_picker()
{
	if(document.getElementById("id_div_layout").innerHTML == ""){alert("PLEASE FIRST SELECT A LAYOUT");}
	else
	{
		if(document.getElementById("id_div_color_picker").style.display == "none"){ document.getElementById("id_div_color_picker").style.display = "block"; }
		else{ document.getElementById("id_div_color_picker").style.display = "none"; }
	}
}

function hide_color_picker()
{
	document.getElementById("id_div_color_picker").style.display = "none";
}

function pick_custom_color(color_code)
{
	if(document.getElementById("id_div_layout").innerHTML == ""){alert("PLEASE FIRST SELECT A LAYOUT");}
	else
	{
		selected_theme = 20;
		if(document.getElementById("id_select_color_picker").selectedIndex == 0)
		{
			custom_theme_1 = color_code;
			try{ document.getElementById("td_1").style.backgroundColor = color_code; } catch(err){}
			try{ document.getElementById("td_3").style.backgroundColor = color_code; } catch(err){}
		}
		if(document.getElementById("id_select_color_picker").selectedIndex == 1)
		{
			custom_theme_2 = color_code;
			try{ document.getElementById("td_2").style.backgroundColor = color_code; } catch(err){}
		}
		if(document.getElementById("id_select_color_picker").selectedIndex == 2)
		{
			custom_theme_3 = color_code;
			try{ document.getElementById("td_4").style.backgroundColor = color_code; } catch(err){}
			try{ document.getElementById("td_5").style.backgroundColor = color_code; } catch(err){}
		}
	}
}

function change_example_width(width, id_radio)
{
	if(document.getElementById("id_div_layout").innerHTML == "")
	{
		alert("PLEASE FIRST SELECT A LAYOUT");
		document.getElementById(id_radio).checked = false;
	}
	else
	{
		document.getElementById("id_table_example").style.width = width;
		example_width = width;
	}
}