function clickTab(num)
{
	var btn = null, i = 1;
	while (btn = document.getElementById("btn" + i))
	{
		btn.className = num == i?"selected":"";
		var tab = document.getElementById("tab" + i);
		if (tab) tab.style.display = num == i?"":"none";
		i++;
	}
}

function showPanel(num)
{
	var pbtn = null, i = 1;
	while (pbtn = document.getElementById("pbtn" + i))
	{
		pbtn.className = num == i?"selected":"";
		var panel = document.getElementById("panel" + i);
		if (panel) panel.style.display = num == i?"":"none";
		i++;
	}
}
function addData()
{
	var area = document.getElementById("dataareas");
	var tabs = document.getElementById("tabs");
	var areaTotal = document.getElementById("totalDataValues");
	if (area && tabs)
	{
		var i = 1;
		while (document.getElementById("btn" + i)) i++;
		var newid = i;
		areaTotal.innerHTML = "" + i;
		
		var tab = document.createElement("li");
		tab.id = "btn" + newid;
		tab.name = tab.id;
		var data = "<a onFocus=\"blur()\" href=\"#\" onClick=\"clickTab(%ind%);return false;\">Data %ind%</a>";
		while (data.indexOf("%ind%") != -1) data = data.replace("%ind%", newid);
		tab.innerHTML = data;
		
		tabs.appendChild(tab);
		
		data = '<table class="data"><tr><td width="90%"><table class="dataOptions" width="100%"><tr><td>Type: <select id="charttype%ind%" name="charttype%ind%"><option>Line</option>' +
			  '<option>Area</option><option>Column</option><option>Pie</option></select></td>' +
			  '<td >Line width: <input type="text" id="linewidth%ind%" name="linewidth%ind%" size="10" /></td>' +
			  '<td >Line color: <input type="text" name="linecolor%ind%" id="linecolor%ind%" size="10" /></td>' +
			  '<td >Column width: <input type="text" name="columnwidth%ind%" id="columnwidth%ind%" size="10" /></td></tr></table></td>	' +
			  '<td width="80" align="right"><img src="i/icons/hide.gif" /><input name="hide%ind%" id="hide%ind%" class="check" type="checkbox" />&nbsp;Hide' +
			  '</td></tr><tr><td colspan="2"><div class="hr"></div><table class="dataValues" width="100%"><tr><td id="dataValues%ind%" valign="top">' +
			  '<div class="value">Value: <input id="d%ind%val1" name="d%ind%val1" type="text" size="5">Color: # <input type="text" id="d%ind%col1" name="d%ind%col1" size="5">' +
			  '</div></td></tr></table></td></tr></table><div style="padding-left:10px;">' +
			  '<a onFocus=\"blur()\" href="" onClick="addDataValue(%ind%);return false;"><img  align="absmiddle" src="i/icons/add.gif" /></a>&nbsp;<a onFocus=\"blur()\" class="m" href=""  onclick="addDataValue(%ind%);return false;">Add value</a> (<span id="totalValues%ind%">1</span>)</div>';
			  
		tab = document.createElement("div");
		tab.id = "tab" + newid;
		tab.name = tab.id;
		tab.className = "tabcontent";
		tab.style.display = "";
		while (data.indexOf("%ind%") != -1) data = data.replace("%ind%", newid);
		tab.innerHTML = data;
		
		area.appendChild(tab);
		
		clickTab(newid);
	}
}

function addDataValue(data)
{
	var area = document.getElementById("dataValues" + data);
	var areaTotal = document.getElementById("totalValues" + data);
	if (area && areaTotal)
	{
		var i = 1;
		while (document.getElementById("d" + data + "val" + i)) i++;
		areaTotal.innerHTML = "" + i;
		
		var el = document.createElement("div");
		el.className = "value";
		el.style.float = "left";
		var el2 = document.createTextNode("Value: ");
		el.appendChild(el2);
		el2 = document.createElement("input");
		el2.type = "text";
		el2.name = "d" + data + "val" + i;
		el2.id = "d" + data + "val" + i;
		el2.size = 5;
		el.appendChild(el2);
		el2 = document.createTextNode("Color: # ");
		el.appendChild(el2);
		el2 = document.createElement("input");
		el2.type = "text";
		el2.name = "d" + data + "col" + i;
		el2.id = "d" + data + "col" + i;
		el2.size = 5;
		el.appendChild(el2);
		area.appendChild(el);
	}
}

function changeLayout()
{
	var area = document.getElementById("layoutimage");
	var f = document.forms["builder"];
	if (area && f.layout) area.src = "i/icons/layouts/l" + f.layout.value + ".gif";
}

function changePalette()
{
	var area = document.getElementById("colorpalette");
	var f = document.forms["builder"];
	if (area && f.palette) area.src = "i/icons/palette/p" + f.palette.value + ".gif";
}

function addValue()
{
	var area = document.getElementById("allValues");
	var areaTotal = document.getElementById("totalValues");
	if (area && areaTotal)
	{
		var i = 1;
		while (document.getElementById("val" + i)) i++;
		areaTotal.innerHTML = "" + i;
		var el = document.createElement("div");
		el.className = "value";
		el.style.float = "left";
		var el2 = document.createTextNode("Value: ");
		el.appendChild(el2);
		el2 = document.createElement("input");
		el2.type = "text";
		el2.name = "val" + i;
		el2.id = "val" + i;
		el2.size = 5;
		el.appendChild(el2);
		area.appendChild(el);
	}
}