/* fixme:
	turn text highlighting of for tree.
*/
/*****************************************************************
* Utility Functions.
*****************************************************************/

// returns an attribute for an xml element
function getAttribute(xmlNode, attr) {
	if(window.ActiveXObject) {
		var attrNode = xmlNode.selectSingleNode('@' + attr);
		if(attrNode) return attrNode.text;
	} else {
		if(xmlNode.attributes[attr]) return xmlNode.attributes[attr].value;
	}
}

// sets an attribute for an xml element
function setAttribute(xmlNode, attr, value) {
	if(window.ActiveXObject) {
		var attrNode = xmlNode.selectSingleNode('@' + attr);
		if(attrNode) attrNode.text = value;
	} else {
		if(xmlNode.attributes[attr]) xmlNode.attributes[attr].value = value;
	}
}

/*****************************************************************
* DropDownList class.
*****************************************************************/
// the default update handler fo the drop down list.
function defaultUpdate() {
	this.parent.node.domNode.firstChild.nodeValue = this.value;
	this.parent.node.cssBuilder.updateHidden();
}

// initializes the dropdown list class.
// parent: the parent panel that the list is to be rendered to.
// labels: an array list of labels for the drop down list.
// values: an array lit of values for the drop down list, must have the same count as the labels list.
// changeFuction: is the function to be called when the drop down changes value. (may be undefined).
// defaultValue: the default selected value for the drop down list. (may be undefined).
function DropDownList(parent, labels, values, changeFunction, defaultValue, width) {
	this.parent = parent;
	this.labels = labels;
	this.values = values;
	
	this.select = document.createElement("select");
	this.select.parent = this.parent;
	
	if(changeFunction) {
	    this.select.onchange = changeFunction;
	} else {
		this.select.onchange = defaultUpdate;
	}
	
	var value;
	if(defaultValue) {
		value = defaultValue;
	} else {
		value = this.parent.node.domNode.firstChild.nodeValue;
	}
	
	if(width) {
	    this.select.style.width = width;
	    this.select.width = width;
	}
	    
	for(i=0;i<labels.length;i++) {
		var opt = new Option(labels[i], values[i]);
		this.select.add(opt,undefined);
		if(values[i] == value) opt.selected = true;
	}
}

/*****************************************************************
* DefaultPanel class.
*****************************************************************/
// member function for rendering a label to a panel.
function renderPanelLabel(target) {
	var labelText = getAttribute(this.node.domNode, 'label');
	var labelNode = document.createElement("div");
	labelNode.className = "propertiesPanelLabel";
	labelNode.innerHTML = (labelText && labelText != "") ? labelText : this.node.domNode.nodeName
	target.appendChild(labelNode);
}

// panel used when one is not availble to the factory for the element.
function DefaultPanel(node) {
	this.node = node;
}

DefaultPanel.prototype.renderPanelLabel = renderPanelLabel;

// renders the label to the panel.
DefaultPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
}

/*****************************************************************
* FontWeightPanel class.
*****************************************************************/
function FontWeightPanel(node) {
	this.node = node;
}

FontWeightPanel.prototype.renderPanelLabel = renderPanelLabel;

FontWeightPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);

	var labels = new Array('normal', 'bold');
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* FontSizePanel class.
*****************************************************************/
function FontSizePanel(node) {
	this.node = node;
}

FontSizePanel.prototype.renderPanelLabel = renderPanelLabel;

FontSizePanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array( 
		"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", 
		"8px","9px","10px","11px","12px","14px","16px","18px","20px","24px","30px","36px","42px","60px","72px",
		"80%", "85%", "90%", "95%", "100%", "105%", "110%", "115%", "120%");
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}
	
/*****************************************************************
* FontSizePanel class.
*****************************************************************/
function FontStylePanel(node) {
	this.node = node;
}

FontStylePanel.prototype.renderPanelLabel = renderPanelLabel;

FontStylePanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array( "normal", "italic" );
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* TextDecorationPanel class.
*****************************************************************/
function TextDecorationPanel(node) {
	this.node = node;
}

TextDecorationPanel.prototype.renderPanelLabel = renderPanelLabel;

TextDecorationPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array( "none", "underline", "overline", "line-through" );
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* AlignmentPanel class.
*****************************************************************/
function AlignmentPanel(node) {
	this.node = node;
}

AlignmentPanel.prototype.renderPanelLabel = renderPanelLabel;

AlignmentPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array("Left", "Center", "Right");
	var values = new Array("left", "center", "right");
	var ddl = new DropDownList(this, labels, values);
	target.appendChild(ddl.select);
}

/*****************************************************************
* AlignmentPanelTwoOption class.
*****************************************************************/
function AlignmentTwoOptionPanel(node) {
    this.node = node;
}

AlignmentTwoOptionPanel.prototype.renderPanelLabel = renderPanelLabel;

AlignmentTwoOptionPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array("Left", "Right");
	var values = new Array("left", "right");
	var ddl = new DropDownList(this, labels, values);
	target.appendChild(ddl.select);
}

/*****************************************************************
* BorderStylePanel class.
*****************************************************************/
function BorderStylePanel(node) {
	this.node = node;
}

BorderStylePanel.prototype.renderPanelLabel = renderPanelLabel;

BorderStylePanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array( "none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset");
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* PositionPanel class.
*****************************************************************/
function PositionPanel(node) {
	this.node = node;
}

PositionPanel.prototype.renderPanelLabel = renderPanelLabel;

PositionPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array( "top left","top center","top right","center left","center center",
							"center right",	"bottom left","bottom center","bottom right");
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* BackgroundRepeatPanel class.
*****************************************************************/
function BackgroundRepeatPanel(node) {
	this.node = node;
}

BackgroundRepeatPanel.prototype.renderPanelLabel = renderPanelLabel;

BackgroundRepeatPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array("repeat","repeat-x","repeat-y","no-repeat");
	var ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* BackgroundPositionPanelItem class.
*****************************************************************/
function BackgroundPositionPanelItem(node, wordedItemValues, wordedItemLabels, min, max) {
	this.node = node;
	this.wordedItemValues = wordedItemValues;
	this.wordedItemLabels = wordedItemLabels;
	this.min = min;
	this.max = max;
}

BackgroundPositionPanelItem.prototype.renderPanelLabel = renderPanelLabel;

// renders a width dropdown
BackgroundPositionPanelItem.prototype.render = function(target) {
	var values = this.wordedItemValues;
	var labels = this.wordedItemLabels;
	for(i=this.min;i<=this.max;i++) {
		labels.push(i + 'px');
		values.push(i + 'px');
	}
	
	var ddl = new DropDownList(this, labels, values, null, null, '75px');
	target.appendChild(ddl.select);
	
}

/*****************************************************************
* BackgroundPositionPanel class.
*****************************************************************/
function BackgroundPositionPanel(node) {
	this.node = node;
	this.items = new Array();
}

BackgroundPositionPanel.prototype.renderPanelLabel = renderPanelLabel;

// renders multiple font family dropdowns
BackgroundPositionPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var hValues = new Array("center", "left", "right");
	var hLabels = new Array("Center", "Left", "Right");
	var vValues = new Array("center", "top", "bottom");
	var vLabels = new Array("Center", "Top", "Bottom");
	
	for(var i=0;i<this.node.domNode.childNodes.length;i++) {
		var node = new NodeWrapper(this.node.domNode.childNodes[i], this.node.cssBuilder)
		var item = new BackgroundPositionPanelItem(node, (i == 0 ? hValues : vValues), (i == 0 ? hLabels : vLabels), 0, 200);
		this.items.push(item);

		var labelNode = document.createElement("div");
		labelNode.className = "propertiesPanelLabel";
		labelNode.innerHTML = (i == 0 ? "Horizontal" : "Vertical") + "&nbsp;";
		target.appendChild(labelNode);

		item.render(target);
		target.appendChild(document.createElement("br"));
		target.appendChild(document.createElement("br"));
	}
	
}

/*****************************************************************
* WidthPanel class.
*****************************************************************/
function WidthPanel(node, min, max, rawValues) {
	this.node = node;
	this.min = min;
	this.max = max;
	this.useRawValues = rawValues
}

WidthPanel.prototype.renderPanelLabel = renderPanelLabel;

// renders a width dropdown
WidthPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	var labels = new Array();
	var values = new Array();
	
	for(i=this.min;i<=this.max;i++) {
		labels.push(i + 'px');
		values.push(i);
	}
	
	var ddl;
	if (this.useRawValues)
		ddl = new DropDownList(this, labels, values);
	else
		ddl = new DropDownList(this, labels, labels);
	target.appendChild(ddl.select);
}

/*****************************************************************
* FontFamilyPanelItem class.
*****************************************************************/
function FontFamilyPanelItem(node) {
	this.node = node;
}

// renders the font family dropdown
FontFamilyPanelItem.prototype.render = function(target) {
	var values = new Array('arial', 'arial black', 'courier', 'courier new', 'georgia', 'helvetica', 'lucida console', 'tahoma', 'trebuchet ms', 'times new roman', 'verdana', 'serif', 'sans-serif')
	var labels = new Array('Arial', 'Arial Black', 'Courier', 'Courier New', 'Georgia', 'Helvetica', 'Lucida Console', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Verdana', 'Serif', 'Sans-Serif');
	var ddl = new DropDownList(this, labels, values);
	for(var i=0; i<ddl.select.options.length; i++) {
		ddl.select.options[i].style.cssText = "font-family: " + values[i] + ";";
	}

	target.appendChild(ddl.select);
}

/*****************************************************************
* YesNoPanel class.
*****************************************************************/
function HiddenPanel(node) {
	this.node = node;
}

HiddenPanel.prototype.renderPanelLabel = renderPanelLabel;

// renders the font family dropdown
HiddenPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	
	var text = document.createElement("div");
	text.innerHTML = "<p>The item will be hidden.</><p>Un-hide by deselecting the component."
	target.appendChild(text);
}

/*****************************************************************
* ExpandImagePanel class.
*****************************************************************/
function ExpandImagePanel(node, msg) {
	this.node = node;
	this.msg = msg;
}

ExpandImagePanel.prototype.renderPanelLabel = renderPanelLabel;

ExpandImagePanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	
	var text = document.createElement("div");
	text.innerHTML = this.msg;
	target.appendChild(text);
}

/*****************************************************************
* FontFamilyPanel class.
*****************************************************************/
function FontFamilyPanel(node) {
	this.node = node;
	this.items = new Array();
}

FontFamilyPanel.prototype.renderPanelLabel = renderPanelLabel;

// renders multiple font family dropdowns
FontFamilyPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	for(var i=0;i<this.node.domNode.childNodes.length;i++) {
		var node = new NodeWrapper(this.node.domNode.childNodes[i], this.node.cssBuilder)
		var item = new FontFamilyPanelItem(node);
		this.items.push(item);

		var labelNode = document.createElement("span");
		labelNode.className = "propertiesPanelLabel";
		labelNode.innerHTML = "Choice " + this.items.length + "&nbsp;";
		target.appendChild(labelNode);
		
		item.render(target);
		target.appendChild(document.createElement("br"));
	}
}

/*****************************************************************
* ColourPickerPanel class.
*****************************************************************/
function ColourPickerPanel(node) {
	this.node = node;
}

ColourPickerPanel.prototype.renderPanelLabel = renderPanelLabel;

ColourPickerPanel.prototype.getId = function() {
	var id = getAttribute(this.node.domNode, 'id');
	return this.node.cssBuilder.id + "_" + id;
}

function assignObjectsToWindow(element) {
	if(element.childNodes) {
		for(var i=0; i<element.childNodes.length; i++) {
			if(element.childNodes[i].id) {
				window[element.childNodes[i].id] = element.childNodes[i];
			}
			assignObjectsToWindow(element.childNodes[i]);
		}
	}
}

ColourPickerPanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	this.colourPicker = new ColourPicker(this.getId(), this.node);
	var div = document.createElement("div");
	div.innerHTML = this.colourPicker.getHTML();
	target.appendChild(div);
	assignObjectsToWindow(div);
	this.colourPicker.setValue(this.node.domNode.firstChild.nodeValue);
}

/*****************************************************************
* ResourceImagePanel class.
*****************************************************************/
function ResourceImagePanel(node) {
	this.node = node;
}

ResourceImagePanel.prototype.renderPanelLabel = renderPanelLabel;

ResourceImagePanel.prototype.getId = function() {
	var id = getAttribute(this.node.domNode, 'id');
	return this.node.cssBuilder.id + "_" + id;
}

function assignObjectsToWindow(element) {
	if(element.childNodes) {
		for(var i=0; i<element.childNodes.length; i++) {
			if(element.childNodes[i].id) {
				window[element.childNodes[i].id] = element.childNodes[i];
			}
			assignObjectsToWindow(element.childNodes[i]);
		}
	}
}

ResourceImagePanel.prototype.render = function(target) {
	this.renderPanelLabel(target);
	this.resourceImage = new ResourceImage(this.getId(), this.node);
	var div = document.createElement("div");
	div.innerHTML = this.resourceImage.getHTML();
	target.appendChild(div);
	assignObjectsToWindow(div);
}

/*****************************************************************
* NodeWrapper class.
*****************************************************************/
function NodeWrapper(domNode, cssBuilder) {
	this.domNode = domNode;
	this.cssBuilder = cssBuilder;
}

NodeWrapper.prototype.setCheckBox = function() {
	this.checkbox.checked = this.checked;
}

NodeWrapper.prototype.getPropertiesPanel = function() {

	if(!this._propertiesPanel) {
		this._propertiesPanel = document.createElement("div");
		this._propertiesPanel.className = "panelProperties";
		
		var panel;		
		switch(this.domNode.nodeName) {
			case 'font-family':
				panel = new FontFamilyPanel(this);
				break;
			case 'font-size':
				panel = new FontSizePanel(this);
				break;
			case 'font-style':
				panel = new FontStylePanel(this);
				break;
			case 'font-weight':
				panel = new FontWeightPanel(this);
				break;
			case 'color':
			case 'border-color':
			case 'background-color':
				panel = new ColourPickerPanel(this);
				break;
			case 'background-image':
			    panel = new ResourceImagePanel(this);
			    break;
			case 'border-style':
				panel = new BorderStylePanel(this);
				break;
			case 'position':
				panel = new PositionPanel(this, 0, 200);
				break;
		    case 'background-position':
		        panel = new BackgroundPositionPanel(this);
		        break;
			case 'background-repeat':
				panel = new BackgroundRepeatPanel(this);
				break;
			case 'border-width':
				panel = new WidthPanel(this, 0, 20, false);
				break;
			case 'text-decoration':
				panel = new TextDecorationPanel(this);
				break;
			case 'padding':
				panel = new WidthPanel(this,0,200, false);
				break;
			case 'margin':
				panel = new WidthPanel(this,0,200, false);
				break;
			case 'content-width-raw':
				panel = new WidthPanel(this,200,1000, true);
				break;
			case 'margin-raw':
				panel = new WidthPanel(this,0,300, true);
				break;
			case 'alignment':
				panel = new AlignmentPanel(this);
				break;
			case 'alignment-two-option':
			    panel = new AlignmentTwoOptionPanel(this);
			    break;
			case 'hidden':
				panel = new HiddenPanel(this);
				break;
			case 'expand-border':
			    panel = new ExpandImagePanel(this, '<div class="cssBuilderPropertyMessage">The border will extend below the navigation container items. ' +
														'Deselect to limit the border to the navigation container.</div');
				break;
			case 'expand-image':			    
				panel = new ExpandImagePanel(this, '<div class="cssBuilderPropertyMessage">The background image will extend below the navigation container items. ' +
														'Deselect to limit the image to the navigation container.</div');
				break;
			case 'generic-width300':
				panel = new WidthPanel(this,0,300, false);
				break;
			default:
				panel = new DefaultPanel(this);
		}
		panel.render(this._propertiesPanel);
	}
	
	return this._propertiesPanel;
}

/*****************************************************************
* CSSBuilder2 class.
*****************************************************************/

function CSSBuilder2(id, hiddenFieldId, imagePath, debug) {
	this.id = id;
	this.hiddenFieldId = hiddenFieldId;
	this.hiddenField = document.getElementById(hiddenFieldId);
	this.nodes = new Array();
	this.imagePath = imagePath;
	this.debug = (debug) ? true : false;
}		

CSSBuilder2.prototype.render = function(xmlString) {
	this.hiddenField.value = xmlString;
	this.dom = this.parseXmlToDom(xmlString);
	//draw the wrapping node
	document.write('<table class="cssBuilder" id="' + this.id + '" cellpadding="0" cellspacing="0" border="0"><tr valign="top"><td><div class="componentTree" id="' + this.id + 
		'_tree"></div></td><td><div class="componentProperties" id="' + this.id + '_properties"></div></td></tr></table>');
	
	
	this.mainTable = document.getElementById(this.id);
	this.treeDiv = document.getElementById(this.id + '_tree');
	this.propertiesDiv = document.getElementById(this.id + '_properties');
	
	this.renderDOMToHtml(this.dom.documentElement);
	
	if (this.debug) {
		this.setupDebugButtons();
	}
}

function viewDebugXmlClick() {
	alert(this.cssBuilder.hiddenField.value);
}


CSSBuilder2.prototype.setupDebugButtons = function() {
	var testButton = document.createElement("input");
	testButton.type = "button";
	testButton.onclick = viewDebugXmlClick;
	testButton.value = "View Debug XML";
	testButton.cssBuilder = this;
	this.mainTable.parentNode.appendChild(testButton);
}

CSSBuilder2.prototype.updateHidden = function() {
	if(window.ActiveXObject) {
		this.hiddenField.value = this.dom.documentElement.xml;
	} else {
		var serializer = new XMLSerializer();
		this.hiddenField.value = serializer.serializeToString(this.dom);
	}
}

CSSBuilder2.prototype.parseXmlToDom = function(xmlString) {
	if(window.ActiveXObject) {
		this.browser ='ie';
		objDOMParser = new ActiveXObject("Microsoft.XMLDOM");
		objDOMParser.loadXML(xmlString);
		return  objDOMParser; 
	// Netscape/Mozilla
	}else if(window.DOMParser) {
		this.browser = "ns";
	    var objDOMParser = new DOMParser();
		return objDOMParser.parseFromString(xmlString, "text/xml");
	}
}

CSSBuilder2.prototype.displaySelectedPanel = function() {
	while(this.propertiesDiv.childNodes.length >0) 
		this.propertiesDiv.removeChild(this.propertiesDiv.childNodes[0]);
	
	if(this.selectedAttributeNode && this.selectedAttributeNode.checked) {
		this.selectedPanel = this.selectedAttributeNode.getPropertiesPanel();
	} else {
		this.selectedPanel = document.createElement("div");
		this.selectedPanel.className = "panelUncheckedPanel";
		this.selectedPanel.innerHTML = '<div class="cssBuilderPropertyMessage">The override check box for the selected item needs to be checked before its properties can be modified.</div>';
	}
	this.propertiesDiv.appendChild(this.selectedPanel);
}

CSSBuilder2.prototype.processRootNode = function(domNode) {
	
	for(var i=0; i<domNode.childNodes.length; i++) {
		this.renderDOMToHtml(domNode.childNodes[i], this.treeDiv);
	}
}

function componentNodeClick() {
	if(this.parent.childrenDiv.style.display == 'block') {
		this.parent.childrenDiv.style.display = 'none';
		this.parent.headerImage.src = this.parent.node.cssBuilder.imagePath + "tree_closed.gif";
	} else {
		this.parent.childrenDiv.style.display = 'block';
		this.parent.headerImage.src = this.parent.node.cssBuilder.imagePath + "tree_open.gif";

		/* scroll the node into view - scrollIntoView scrolls the whole page so we have to do our own scrolling */
		var nodeBottom = this.parent.childrenDiv.offsetHeight + this.parent.childrenDiv.offsetTop;
		var currentBottom = nodeBottom - this.parent.node.cssBuilder.treeDiv.scrollTop;
		var currentTop = this.offsetTop - this.parent.node.cssBuilder.treeDiv.scrollTop;

		if(currentBottom > this.parent.node.cssBuilder.treeDiv.clientHeight) {
			if(currentBottom - currentTop < this.parent.node.cssBuilder.treeDiv.clientHeight - 5) {
				this.parent.node.cssBuilder.treeDiv.scrollTop = (nodeBottom - this.parent.node.cssBuilder.treeDiv.clientHeight) + 5;
			} else {
				this.parent.node.cssBuilder.treeDiv.scrollTop = this.offsetTop - 5;
			}
		}
	}
}

CSSBuilder2.prototype.processComponentNode = function(htmlElement, domNode) {
	var componentDiv = document.createElement('div');
	componentDiv.className = 'componentTreeNode';
	nodeWrapper = new NodeWrapper(domNode, this);
	componentDiv.node = nodeWrapper;
	
	htmlElement.appendChild(componentDiv);

	var headerImage = document.createElement('img');
	headerImage.src = this.imagePath + "tree_closed.gif";
	headerImage.onclick = componentNodeClick;
	headerImage.parent = componentDiv;
	componentDiv.headerImage = headerImage;
	componentDiv.appendChild(headerImage);

	var headerDiv = document.createElement('div');
	var label = getAttribute(domNode, 'label');
	if(!label) label = getAttribute(domNode, 'name');
	headerDiv.innerHTML = label;
	headerDiv.className = 'componentTreeNodeHeader';
	headerDiv.onclick = componentNodeClick;
	headerDiv.parent = componentDiv;
	componentDiv.appendChild(headerDiv);

	var childrenDiv = document.createElement('div');
	childrenDiv.className = "componentChildren";
	childrenDiv.parent = componentDiv;
	componentDiv.appendChild(childrenDiv);
	
	componentDiv.headerDiv = headerDiv;
	componentDiv.childrenDiv = childrenDiv;

	for(var i=0; i<domNode.childNodes.length; i++) {
		this.renderDOMToHtml(domNode.childNodes[i], childrenDiv);
	}
}

function setAttributeDisplay() {
	var display = (this.checked) ? 'yes' : 'no';
	setAttribute(this.node.domNode, 'display', display);
	this.node.cssBuilder.updateHidden();
	
	this.node.checked = this.checked;
	
	if(this.checked) {
		this.node.cssBuilder.setSelectedAttribute(this.node);
	} else {
		this.node.cssBuilder.displaySelectedPanel();
	}
}

function attributeLabelClick() {
	this.node.cssBuilder.setSelectedAttribute(this.node);
}

CSSBuilder2.prototype.setSelectedAttribute = function(node) {
	if(this.selectedAttributeNode != node) {
		if(this.selectedAttributeNode) {
			this.selectedAttributeNode.htmlElement.className = 'componentTreeAttribute';
		}
		this.selectedAttributeNode = node;
		node.htmlElement.className = 'componentTreeAttributeSelected';
		
	}
	this.displaySelectedPanel();
}

CSSBuilder2.prototype.processAttributeNode = function(htmlElement, domNode) {
	nodeWrapper = new NodeWrapper(domNode, this);
	this.nodes.push(nodeWrapper);
	nodeWrapper.checked = (getAttribute(domNode, "display")=="yes");
	var attributeDiv = document.createElement('div');
	attributeDiv.className = 'componentTreeAttribute';
	attributeDiv.node = nodeWrapper;
	nodeWrapper.htmlElement = attributeDiv;

	var checkbox = document.createElement('input');
	checkbox.type = 'checkbox';
	checkbox.onchange = setAttributeDisplay;
	checkbox.onclick = setAttributeDisplay;
	nodeWrapper.checkbox = checkbox;
	checkbox.node = nodeWrapper;
	checkbox.checked = nodeWrapper.checked;
	attributeDiv.appendChild(checkbox);
	
	var label = document.createElement('span');
	var labelText = getAttribute(domNode, "label");
	label.innerHTML = (labelText && labelText != "") ? labelText :domNode.nodeName ;
	label.onclick = attributeLabelClick;
	nodeWrapper.label = label;
	label.node = nodeWrapper;
	attributeDiv.appendChild(label);

	htmlElement.appendChild(attributeDiv);
}

CSSBuilder2.prototype.renderDOMToHtml = function(domNode, htmlElement) {
    if (domNode != null)
	{
	    switch(domNode.nodeName) {
		    case 'cssxml':
			    this.processRootNode(domNode);
			    break;
		    case 'component':
			    this.processComponentNode(htmlElement, domNode);
			    break;
		    default:
			    this.processAttributeNode(htmlElement, domNode);
			    return;
			    break;
	    }
	}
}

CSSBuilder2.prototype.checkboxHackForIEBug = function() {
	for(var i=0;i<this.nodes.length;i++) {
		this.nodes[i].setCheckBox();
	}
}