// Tyler Spaulding, 2007
// http://www.arguingwithmyself.com
// The contents of this file are public domain.  Do with them what you want.  I
// would prefer if you left this comment block intact, but I'm not going to
// stop you.

// This file contains demonstration usage of dcss.js, the dynamic stylesheet
// library.


var css;
var selected = -1;
var VIEW_RAW = 1;
var VIEW_TABLE = 2;
var viewmode = VIEW_TABLE;

function SelectRule(i)
{
	if (!css) return;
	var selector = document.getElementById("selector");
	var rule = document.getElementById("rule");
	var ruleid = document.getElementById("ruleid");
	if (i < 0)
	{
		selector.value = "";
		rule.value = "";
		ruleid.value = -1;
		return;
	}
	var selectorText = css.GetSelector(i);
	var ruleText = css.GetRule(i);
	//if (!selectorText) return;
	//if (!ruleText) return;
	selector.value = selectorText;
	rule.value = ruleText.replace(/;\s*/g, ";\n");
	ruleid.value = i;
}

function RemoveRule()
{
	if (!css) return;
	var ruleId = document.getElementById("ruleid").value;
	if (ruleId < 0) return;
	css.DeleteRule(ruleId);
	BuildList();
	SelectRule(-1);
}

function NewRule()
{
	if (!css) return;
	var selector = document.getElementById("newselector").value;
	var rule = document.getElementById("newruletext").value;
	css.AddRule(selector, rule);
	BuildList();
	SelectRule(-1);
}


function Update()
{
	var selectorText = document.getElementById("selector").value;
	var ruleText = document.getElementById("rule").value;
	var ruleId = document.getElementById("ruleid").value;
	if (ruleId < 0) return;
	css.UpdateRule(ruleId, selectorText, ruleText);
	BuildList();
	SelectRule(-1);
}

function BuildTable()
{
	// clear table
	var csslist = document.getElementById("csscontents");
	if (!csslist) return;
	while (csslist.rows.length > 1)
	{
		csslist.deleteRow(1);
	}

	if (!css) return;

	// build table
	var numRules = css.GetRuleCount();
	for (var i = 0; i < numRules; i++)
	{
		var selector = css.GetSelector(i);
		var rule = css.GetRule(i);
		var newRow = csslist.insertRow(i + 1);
		var selectorCell = newRow.insertCell(0);
		var ruleCell = newRow.insertCell(1);
		selectorCell.className = "selectortext";
		selectorCell.innerHTML = "<a href=\"javascript: SelectRule(" + i + ");\">" + selector + "</a>";
		ruleCell.className = "ruletext";
		ruleCell.innerHTML = rule.replace(/;/g, ";<br />");
	}
}

function BuildRaw()
{
	// clear table
	var csslist = document.getElementById("cssrawcontents");
	if (!csslist) return;
	while (csslist.firstChild)
	{
		csslist.removeChild(csslist.firstChild);
	}

	if (!css) return;

	// build raw
	var numRules = css.GetRuleCount();
	for (var i = 0; i < numRules; i++)
	{
		var selector = css.GetSelector(i);
		var rule = css.GetRule(i);
		var newRule = document.createElement("div");
		newRule.className = "selectortext";
		newRule.innerHTML = "<a href=\"javascript: SelectRule(" + i + ");\">" + selector + "</a><br />";
		newRule.innerHTML += "{<br />" + rule.replace(/;/g, ";<br />") + "}<br />";
		csslist.appendChild(newRule);
	}
}

function BuildList()
{
	if (viewmode == VIEW_RAW) BuildRaw();
	else BuildTable();
}


function SelectStylesheet(i)
{
	css = dCSS.GetStylesheet(i);
	selected = i;
	BuildStylesheetList();
	BuildList();
	SelectRule(-1);
}

function BuildStylesheetList()
{
	var count = dCSS.GetStylesheetCount();
	var stylesheetlist = document.getElementById("stylesheetlist");
	stylesheetlist.innerHTML = "Stylesheets: ";
	for (var i = 0; i < count; i++)
	{
		if (i > 0)
		{
			stylesheetlist.innerHTML += " - ";
		}
		if (i == selected) stylesheetlist.innerHTML += "<b>" + i + "</b>";
		else stylesheetlist.innerHTML += "<a class=\"stylesheetlink\" id=\"stylesheet" + i + "\" href=\"javascript: SelectStylesheet(" + i + ");\">" + i + "</a>";
	}
}

function NewStylesheet()
{
	dCSS.AddStylesheet();
	BuildStylesheetList();
}

function RemoveStylesheet()
{
	//dCSS.DeleteStylesheet(css);
	//dCSS.ClearStylesheet(css);
	css.Clear();
	BuildStylesheetList();
	//SelectStylesheet(0);
}

function ShowRaw()
{
	document.getElementById("cssraw").style.display = "inline";
	document.getElementById("csstable").style.display = "none";
	viewmode = VIEW_RAW;
	BuildList();
}

function ShowTable()
{
	document.getElementById("cssraw").style.display = "none";
	document.getElementById("csstable").style.display = "inline";
	viewmode = VIEW_TABLE;
	BuildList();
}

function Init()
{
	BuildStylesheetList();
	SelectStylesheet(0);
}

window.onload = Init;