function createTartanElement(containerNode, label, bandId, defaultColor, afterElement)
{
	var id = 'band_' + bandId;
	
	createSliderElement(containerNode, label, id + '_size', {}, 1, 10, 5, afterElement);
	
	$(id + '_size_label').appendChild(
		$C(['div', {classname: 'band_commands'},
			['a', {href: 'javascript:wizard.addBand(' + bandId + ')'},
				['img', {src: 'images/wizard/add.jpg'}]
			],
			['a', {href: 'javascript:wizard.removeBand(' + bandId + ')'}, 
				['img', {src: 'images/wizard/remove.jpg'}]
			]
		])
	);
	
	$(id + '_size_container').appendChild(
		$C(getPickerWidget(id + '_color', defaultColor))
	);
	
	attachPickerEvents(id + '_color');
}

function createSliderElement(containerNode, label, id, attributes, minValue, maxValue, defaultValue, afterElement)
{
	var sliderDOM = $C(	
		['li', attributes,
			['div', {id: id + '_label', classname: 'command'}, 
				['span', {id: id + '_text'}, label]
			],
			['div', {classname: 'icon'},
				['img', {src: 'images/wizard/icon_' + id + '.gif'}]
			],
			['div', {classname: 'widget', id: id + '_container'}]
		]
	);
	sliderDOM.id = id;
	
	if(afterElement)
	{
		insertAfter(containerNode, sliderDOM, afterElement);
	}
	else
	{
		containerNode.appendChild(sliderDOM);
	}
	Slider.createSlider(id + '_container', id, minValue, maxValue, defaultValue);
}

function createPickerElement(containerNode, label, id, defaultColor)
{
	var elementDOM = $C(
		['li', {},
			['div', {classname: 'command'}, label],
			['div', {classname: 'icon'},
				['img', {src: 'images/wizard/icon_' + id + '.gif'}]
			],
			getPickerWidget(id, defaultColor)
		]
	);
	containerNode.appendChild(elementDOM);
	
	attachPickerEvents(id);
}
function attachPickerEvents(id)
{
	$(id).onmousedown = showColorPicker;
	$(id + '_input').onblur = function(){parseColorFromInput(id);};
	$(id + '_input').onfocus = function(){pickerInputFocus(id + '_input');};
}

function getPickerWidget(id, defaultColor)
{
	var a=
	['div', {classname: 'widget', id: id + '_widget'},
		['img', {classname: 'color_picker_thumb', id: id + '', src: 'images/wizard/color_bg.gif', style: "background:#" + defaultColor}],
		['input', {value: defaultColor, classname: 'color_picker_input', maxLength: 6, type: 'text', id: id + '_input'}]
	];
	return a;
}

function createOptions(containerNode, label, id, options, selectedIndex, handler, handlerobject)
{
	var optionsDOM = ['div', {}];
	
	for(var i=0; i<options.length; i++)
	{
		optionsDOM.push(
			['img', {id: id + '_' + options[i], src: 'images/wizard/icon_' + id + '_' + options[i] + '.gif', checkboxValue: options[i]}]
		);
	}
	
	var elementDOM = $C(
		['li', {},
			['div', {classname: 'widget'},
				['div', {classname: 'command'}, label],
				optionsDOM,
				['input', {type: 'hidden', id: id, name: id, value: selectedIndex}]
			]
		]
	);
	containerNode.appendChild(elementDOM);
	
	if(handler)
	{
		for(var i=0; i<options.length; i++)
		{
			$(id + '_' + options[i]).onmousedown = function(){handler.call(handlerobject, this.getAttribute("checkboxValue"));};
		}
	}
}