// Tree format definition
var TREE5_FORMAT = [
	//  0. left position
	0,
	//  1. top position
	0,
	//  2. show buttons ("+" and "-" images)
	false,
	//  3. button images: collapsed state, expanded state, blank image
	["", "", "images/blank.gif"],
	//  4. size of buttons: width, height, indent amount for childless nodes
	[0, 0, 0],
	//  5. show icons ("folder" and "document")
	false,
	//  6. icon images: closed folder, opened folder, document
	["images/closed_folder.gif", "images/opened_folder.gif", "images/document.gif"],
	//  7. size of icons: width, height
	[16, 16],
	//  8. indent amount for each level of the tree
	[0, 16, 32, 48, 64, 80, 96, 112, 128],
	//  9. background color for the tree
	"",
	// 10. default CSS class for nodes
	"treeNode",
	// 11. individual CSS classes for levels of the tree
	[],
	// 12. "single branch" mode
	true,
	// 13. padding and spacing values for all nodes
	[0, 0],
	// 14. "explorer-like" mode
	false,
	// 15. images for "explorer-like" mode
	["images/e_folder_closed.gif", "images/e_folder_opened.gif", "images/e_document.gif", "images/e_middle_button_expanded.gif", "images/e_bottom_button_expanded.gif", "images/e_middle_button_collapsed.gif", "images/e_bottom_button_collapsed.gif", "images/e_vertical_line.gif", "images/e_middle_join.gif", "images/e_bottom_join.gif"],
	// 16. size of images for "explorer-like" mode: width, height
	[19, 16],
	// 17. store tree state into cookies
	false,
	// 18. relative positioning mode
	true,
	// 19. initial space for the relatively positioned tree: width, height
	[200, 50],
	// 20. resize container of the relatively positioned tree
	true,
	// 21. change background-color and style for selected node
	false,
	// 22. background color for unselected node, background color for selected node, class for selected node
	["", "", ""],
	// 23. text wrapping margin
	300,
	// 24. vertical alignment for buttons and icons
	"middle"
];

// _ctrl() {{{

function _ctrl(label, name, ctrl)
{
	return '</a><div class="ctrl"><label for"' + name + '">' + label + '</label>' + ctrl + '</div><a>';
}

// }}}
// ctrlText() {{{

function ctrlText(label, name)
{
	return _ctrl(label, name, '<input class="text" type="text" id="' + name + '" name="' + name + '" />');
}

// }}}
// ctrlPassword() {{{

function ctrlPassword(label, name)
{
	return _ctrl(label, name, '<input class="password" type="password" id="' + name + '" name="' + name + '" />');
}

// }}}
// ctrlCombo() {{{

function ctrlCombo(label, name, items)
{
	return _ctrl(label, name, '<select id="' + name + '" name="' + name + '" /><option>' + items.join('</option><option>') + '</option></select>');
}

// }}}

// Tree structure definition
var TREE5_NODES = [
	['<h1 class="title">Name</h1>', null, null, {format:{expanded:true}},
		[ctrlText('First:', 'fname'), null, null],
		[ctrlText('Middle:', 'mname'), null, null],
		[ctrlText('Last:', 'lname'), null, null]
	],
	['<h1 class="title">Login Information</h1>', null, null,
		[ctrlText('Username:', 'username'), null, null],
		[ctrlPassword('Password:', 'password1'), null, null],
		[ctrlPassword('Confirm password:', 'password2'), null, null]
	],
	['<h1 class="title">Address</h1>', null, null,
		[ctrlCombo('Country:', 'country', ['El Dorado', 'Oz', 'Atlantis']), null, null],
		[ctrlText('City:', 'city'), null, null],
		[ctrlText('Address 1:', 'address1'), null, null],
		[ctrlText('Address 2:', 'address2'), null, null],
		[ctrlText('ZIP code:', 'zip'), null, null]
	],
	['<h1 class="title">Credit Card Info</h1>', null, null,
		[ctrlCombo('Type:', 'cc_type', ['Visa', 'MaterCard', 'American Express']), null, null],
		[ctrlText('Number:', 'cc_number'), null, null],
		[ctrlCombo('Exp. year:', 'cc_exp_year', [2005, 2006, 2007]), null, null],
		[ctrlCombo('Exp. month:', 'cc_exp_month', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']), null, null]
	]
];

with (new COOLjsTreePRO("tree5", TREE5_NODES, TREE5_FORMAT, true))
{
	init();
}