?php
chdir('..');
require_once('_util.php');
echo_header(
	'JavaScript Tree java script tree menu dhtml tree navigation javascript tree view control node expand collapse javaswcript tree example free tree menu',
	':: JavaScript tree CodeThatTree is advanced, cross-browser, state-of-art JavaScript tree control ::',
	'CodeThatTree, script, tree, javascript, javascript tree, free, free javascript tree, cross-browser, html, xml, css',
	'CodeThatTree is an advanced, cross-browser, state-of-art JavaScript tree control that can be easily integrated into any web page. It requires no JavaScript knowledge from the prospective user and comes loaded with the features everybody expects from a modern navigation tree',
	'../',
	'<script language="javascript1.2" src="codethatsdk.js"></script>' .
	'<script language="javascript1.2" src="menu/codethattreepro.js"></script>');
$hdr_class = 'ct13';
require_once('tree/_inner_menu.php');
?>
<script language="javascript1.2">
<!--
var index = 0;
var items = new Array();
var temp = new Array();
var children = new Array();
var child = false;
var edit = false;
var level_up;
var c_flag = false;
var str;
var code_flag = false;
var style = false;
var styleover = false;
var menustyle = false;
var itemover = false;
var itemstyle;
var g_itemover = false;
var explorer_style = false;
var menu_explorer_style = false;
var mstyle;
var style_c_flag = false;
var ff = false;

function show_span(span) {
	sid = CodeThat.findElement(span);
	CT_show(sid);
	sid.style.display = 'block';
	if (ua.opera5 || ua.opera6) {
		sid.style.top = CodeThat.getScrollY();
	}
	else {
		sid.style.position = 'relative';
	}
}

function hide_span(span) {
	sid = CodeThat.findElement(span);
	sid.style.display = 'none';
	sid.style.visibility = 'hidden';
}

function child_info(n_child) {
	this.n_child = n_child;
}

function menuitem(gap, parent, num_children, deleted, def) {
	this.gap = gap;
	this.parent = parent;
	this.num_children = num_children;
	this.deleted = deleted;
	this.def = def;
}

function stats(parent, num_children) {
	this.parent = parent;
	this.num_children = num_children;
}

function show_items_dlg(id, child_f, edit_f) {
	obj1 = CodeThat.findElement('items', this);
	if (child_f) {
		s = selected_index(obj1);
		if (s == - 1) return;
		child = true;
	}
	if (edit_f) {
		s = selected_index(obj1);
		if (s == - 1) return;
		edit = true;
		edit_dialog(obj1);
	}
	show_span(id);
}

function hide_items_dlg(id) {
	obj1 = CodeThat.findElement('items', this);
	hide_span(id);
	return obj1;
}

function create_def(frm) {
	html_f = "false";
	if (frm.html_text.checked) html_f = "true";
	d = {
		text : frm.item_text.value, html : frm.item_html_code.value, html_text : html_f,
		action : {
			url : frm.item_url.value, target : frm.item_target.value, js_code : frm.item_js_code.value, title : frm.item_title.value
		}
	};
	if ((typeof style) == "object") d.style = style;
	if ((typeof styleover) == "object") d.styleover = styleover;
	if ((typeof menustyle) == "object") {
		d.menustyle = menustyle;
		if ((typeof menu_explorer_style) == "object") d.menustyle.menu_explorer_style = menu_explorer_style;
	}
	if ((typeof itemover) == "object") d.itemover = itemover;
	return d;
}

function edit_dialog(obj) {
	ed = selected_index(obj);
	if (ed == - 1) return;
	ed_id = to.options[ed].label;
	style = items[ed_id].def.style;
	menustyle = items[ed_id].def.menustyle;
	styleover = items[ed_id].def.styleover;
	itemover = items[ed_id].def.itemover;
	frm = CodeThat.findElement('items_form', this);
	frm.item_text.value = items[ed_id].def.text;
	frm.item_html_code.value = items[ed_id].def.html;
	if ( items[ed_id].def.html_text == "true") frm.html_text.checked = true;
	frm.item_js_code.value = items[ed_id].def.action.js_code;
	frm.item_url.value = items[ed_id].def.action.url;
	frm.item_target.value = items[ed_id].def.action.target;
	frm.item_title.value = items[ed_id].def.action.title;
}

function add_item(id_dlg, id, frm_id) {
	to = hide_items_dlg(id_dlg);
	hide_span('itemstyle_img_div');
	hide_span('style_explorer_2');
	item_text = CodeThat.findElement(id, this);
	if (edit) {
		frm = CodeThat.findElement('items_form', this);
		e = to[ed].label;
		ed = selected_index(to);
		if (ed == - 1) {
			edit = false;
			return;
		}
		if (item_text.value != "") {
			to[ed].text = item_text.value;
		}
		else {
			if (frm.html_text.checked && frm.item_html_code.value != "") {
				to[ed].text = "item " + e;
			}
			else {
				alert("You have to specify item text");
				edit = false;
				return;
			}
		}
		def = create_def(frm);
		p = items[e].parent;
		if (p != - 1) {
			pid = label_to_id(to, p);
			parent_gap = items[p].gap;
			t = parent_gap + '----';
			for (c = 0; c< t.length; c++) {
				t = t.replace(/ - /," ");
			}
			if (ua.ie) {
				to[ed].text = t + to[ed].text;
			}
			else {
				to[ed].text = parent_gap + to[ed].text;
			}
		}
		items[e].def = def;
		edit = false;
		style = false;
		styleover = false;
		menustyle = false;
		itemover = false;
		menu_explorer_style = false;
		frm.reset();
	}
	else {
		var item = new Option();
		frm = CodeThat.findElement('items_form', this);
		if (item_text.value != "") {
			item.text = item_text.value;
		}
		else {
			if (frm.html_text.checked && frm.item_html_code.value != "") {
				item.text = "item " + index;
			}
			else {
				alert("You have to specify item text");
				if (child) child = false;
				return;
			}
		}
		item.label = index;
		def = create_def(frm);
		if (!child) {
			items[index] = new menuitem("",-1, 0,false, def);
			children[index] = new child_info(0);
		}
		else {
			parent_id = selected_index(to);
			if (parent_id == - 1) {
				child = false;
				return;
			}
			parent_label = to.options[parent_id].label;
			parent_gap = items[parent_label].gap;
			items[parent_label].num_children++;
			add_child(parent_label);
			var num_child_items = children[parent_label].n_child;
			items[index] = new menuitem(parent_gap + '----', parent_label, 0,false, def);
			children[index] = new child_info(0);
			t = parent_gap + '----';
			for (c = 0; c< t.length; c++) {
				t = t.replace(/ - /," ");
			}
			if (ua.ie) {
				item.text = t + item.text;
			}
			else {
				item.text = parent_gap + '----' + item.text;
				child = true;
			}
		}
		index++;
		if (!child) {
			un = selected_index(to, true);
			if (un> - 1) i_un = to.options[un].label;
			if (un == - 1) to.options[to.options.length] = item;
			else if ((i_un) && items[i_un].gap != '') {
				to.options[to.options.length] = item;
			}
			else {
				n_child_items = children[i_un].n_child;
				blank = new Option();
				blank.text = "";
				to.options[to.options.length] = blank;
				for (j = 1; j<to.options.length - un - 1-n_child_items; j++) {
					to.options[to.options.length - j].text = to.options[to.options.length - (j + 1)].text;
					to.options[to.options.length - j].label = to.options[to.options.length - (j + 1)].label;
					to.options[to.options.length - (j + 1)].text = "";
				}
				to.options[un + 1+n_child_items] = item;
			}
		}
		else {
			blank = new Option();
			blank.text = "";
			to.options[to.options.length] = blank;
			for (j = 1; j<to.options.length - parent_id - num_child_items; j++) {
				to.options[to.options.length - j].text = to.options[to.options.length - (j + 1)].text;
				to.options[to.options.length - j].label = to.options[to.options.length - (j + 1)].label;
				to.options[to.options.length - (j + 1)].text = "";
			}
			to.options[parent_id + num_child_items] = item;
			child = false;
		}
		frm.reset();
		style = false;
		styleover = false;
		menustyle = false;
		itemover = false;
		menu_explorer_style = false;
	}
	frm.reset();
	reset_items_form(frm);
	to.style.minWidth = "100%";
}

function reset_items_form(frm) {
	frm.item_text.value = "";
	frm.item_url.value = "";
	frm.item_title.value = "";
	frm.item_js_code.value = "";
	frm.item_target.value = "";
}

function add_child(par) {
	children[par].n_child++;
	if (items[par].parent != - 1) {
		new_par = items[par].parent;
		add_child(new_par);
	}
}

function del_child(par) {
	if (children[par]) children[par].n_child--;
	if (temp[par].parent != - 1) {
		new_par = temp[par].parent;
		del_child(new_par);
	}
}

function label_to_id(obj, lab) {
	ret = - 1;
	for (i = 0; i<obj.options.length; i++) {
		if (obj.options[i].label == lab) {
			ret = i;
		}
	}
	return ret;
}

function delete_item_rec1(ind) {
	var k;
	flag = false;
	if (temp[ind].parent> - 1)
	del_child(temp[ind].parent);
	do {
		if (items[ind].num_children>0) {
			items[ind].deleted = true;
			k = get_child(ind);
			if (k == - 1) return;
			items[k].parent = - 2;
			if (items[k].num_children>0) {
				delete_item_rec1(k);
			}
			else if (items[k].num_children == 0) {
				items[k].deleted = true;
				del_child(ind);
			}
			items[ind].num_children--;
		}
		if (items[ind].num_children == 0) {
			items[ind].deleted = true;
		}
	}
	while (items[ind].num_children>0);
}

function delete_item() {
	to = CodeThat.findElement('items', this);
	for (i = 0; i<items.length; i++) {
		temp[i] = new stats(items[i].parent, items[i].num_children);
	}
	i = selected_index(to);
	if (i == - 1) return;
	delete_item_rec1(to.options[i].label);
	for (i = 0; i<items.length; i++) {
		items[i].parent = temp[i].parent;
		items[i].num_children = temp[i].num_children;
	}
	k = 0;
	for (t = 0; t<items.length; t++) {
		if (items[t].deleted) {
			k = label_to_id(to, t);
			if (k != - 1) to.options[k] = null;
		}
	}
}

function recount_children() {
	for (i = 0; i<items.length; i++) {
		items[i].num_children = 0;
	}
	for (i = 0; i<items.length; i++) {
		for (j = 0; j<items.length; j++) {
			if (items[j].parent == i && !items[j].deleted) {
				items[i].num_children++;
			}
		}
	}
}

function get_child_item(t, obj) {
	flag = false;
	for (kk = 0; kk<items.length; kk++) {
		if (items[kk].parent == obj.options[t].label && !items[kk].deleted) {
			ret = kk;
			flag = true;
		}
	}
	if (!flag) return - 1;
	return ret;
}

function get_child(a) {
	fl = false;
	for (kk = items.length - 1; kk> - 1; kk--) {
		if (items[kk].parent == a && !items[kk].deleted) {
			r = kk;
			fl = true;
		}
	}
	if (!fl) return - 1;
	return r;
}

function get_child(a) {
	fl = false;
	for (kk = items.length - 1; kk> - 1; kk--) {
		if (items[kk].parent == a && !items[kk].deleted) {
			r = kk;
			fl = true;
		}
	}
	if (!fl) return - 1;
	return r;
}

function selected_index(obj, f) {
	var flag = false;
	if (obj.options.length == 0) return - 1;
	for (i = 0; i<obj.options.length; i++) {
		if (obj.options[i].selected) {
			ret = i;
			flag = true;
		}
	}
	if (!flag) {
		ret = - 1;
		if (!f) alert("You have to select an item");
	}
	return ret;
}

function mkPath(ipath, frm) {
	if (ipath == "") return "";
	var p = frm.img_path.value;
	if (p && p.charAt(p.length - 1) != '/') p += '/';
	ipath = ipath.replace(/\\/g, '/');
	return p + ipath.substr(ipath.lastIndexOf('/') + 1);
}

function reset_form() {
	frm1 = CodeThat.findElement('main_form', this);
	to = CodeThat.findElement('items', this);
	while (to.options.length>0) {
		to.remove(0);
	}
	res = CodeThat.findElement('result', this);
	frm1.reset();
	res.value = "";
	items = new Array();
	children = new Array();
	index = 0;
	str = '';
	child = false;
	edit = false;
	level_up;
	c_flag = false;
	code_flag = false;
	style = false;
	styleover = false;
	menustyle = false;
	itemover = false;
	itemstyle = '';
	g_itemover = false;
	mstyle = '';
	style_c_flag = false;
	explorer_style = false;
	ff = false;
}

function preview() {
	if (!code_flag) {
		alert("no code built");
		return;
	}
	else {
		this.document.close();
		var w = window.open('', 'codethattree');
		var d = w.document;
		d.open();
		r = CodeThat.findElement('result', this);
		d.write(r.value);
		if (ua.ie) w.location.reload();
		w.focus();
	}
}

function action_gen(ind) {
	str += ',"action":{\n';
	var js_flag = false;
	if (items[ind].def.action.js_code != "") {
		if (js_flag) str += ',';
		js_flag = true;
		str += '"js":"' + items[ind].def.action.js_code + '"\n';
	}
	if (items[ind].def.action.url != "") {
		if (js_flag) str += ',';
		js_flag = true;
		str += '"url":"' + items[ind].def.action.url + '"\n';
	}
	if (items[ind].def.action.target != "") {
		if (js_flag) str += ',';
		js_flag = true;
		str += '"target":"' + items[ind].def.action.target + '"\n';
	}
	if (items[ind].def.action.title != "") {
		if (js_flag) str += ',';
		js_flag = true;
		str += '"title":"' + items[ind].def.action.title + '"\n';
	}
	str += '}';
}

function items_view(ind) {
	var k;
	flag = false;
	var c_flag1 = false;
	do {
		if (items[ind].num_children>0 && !items[ind].deleted) {
			if (!flag) {
				if (c_flag) str += ',';
				c_flag = true;
				str += '{"text":"';
				if (items[ind].def.html_text != "true")
				{
					str += items[ind].def.text + '"\n';
				}
				else {
					if (items[ind].def.html != "") str += items[ind].def.html + '"\n';
					if (items[ind].def.html == "") str += items[ind].def.text + '"\n';
				}
				style_gen(ind, false);
				str += ',"menu":{\n';
				style_gen(ind, true);
				str += '"items":[\n';
				flag = true;
			}
			k = get_child(ind);
			if (k == - 1) return;
			items[k].parent = - 2;
			if (items[k].num_children>0) {
				c_flag = false;
				items_view(k);
			}
			else if (items[k].num_children == 0) {
				str += '{';
				str += '"text":"';
				if (items[k].def.html_text != "true")
				{
					str += items[k].def.text + '"\n';
				}
				else {
					if (items[k].def.html != "") str += items[ind].def.html + '"\n';
					if (items[k].def.html == "") str += items[ind].def.text + '"\n';
				}
				style_gen(k);
				action_gen(k, false);
				str += '}';
				p = temp[k].parent;
				if (items[p].num_children - 1>0) str += ',';
			}
			items[ind].num_children--;
		}
		if (items[ind].num_children == 0 && !flag ) {
			if (c_flag) str += ',';
			c_flag = true;
			str += '{';
			str += '"text":"';
			if (items[ind].def.html_text != "true")
			{
				str += items[ind].def.text + '"\n';
			}
			else {
				if (items[ind].def.html != "") str += items[ind].def.html + '"\n';
				if (items[ind].def.html == "") str += items[ind].def.text + '"\n';
			}
			style_gen(ind);
			action_gen(ind, false);
			str += '}';
		}
		else if (items[ind].num_children == 0) {
			str += ']}\n}\n';
			if (temp[ind].parent != - 1 && temp[ind].parent != - 2 ) {
				p = temp[ind].parent;
				if (items[p].num_children - 1>0) str += ',';
			}
		}
	}
	while (items[ind].num_children>0);
}

function style_gen(ind, menu) {
	if (menu) {
		style_gen_1(items[ind].def.menustyle, '"style"', true, true);
		if ((typeof items[ind].def.menustyle) == "object") str += ',';
		style_gen_1(items[ind].def.itemover, '"styleover"', false);
		if ((typeof items[ind].def.itemover) == "object") str += ',';
	}
	else {
		style_gen_1(items[ind].def.style, ',"style"', true, true);
		style_gen_1(items[ind].def.styleover, ',"styleover"', false, true);
	}
}

function style_gen_1(obj, name, form, no, c) {
	if ((typeof obj) == "object") {
		ff = true;
		str += name + ':{\n';
		str += '"css":"' + obj.css + '",\n';
		str += '"color":"' + obj.color + '"\n';
		if (obj.bgimg != "") str += ',"bgimg":"' + obj.bgimg + '"\n'; else
		str += ',"bgcolor":"' + obj.bgcolor + '"\n';
		if (form) {
			if ((typeof obj.menu_explorer_style) != "undefined") {
				explorer_style_gen(obj.menu_explorer_style);
			}
			else {
				if (obj.imgitem != "") str += ',"imgitem":"' + obj.imgitem + '"\n';
				if (obj.imgdir != "") str += ',"imgdir":"' + obj.imgdir + '"\n';
				if (obj.imgdiropen != "") str += ',"imgdiropen":"' + obj.imgdiropen + '"\n';
			}
		}
		if (obj.z != "") str += ',"z":"' + obj.z + '"\n';
		if (form && obj.form != "false") str += ',"form":' + obj.form + '\n';
		if ((typeof obj.shadow) != "undefined") {
			str += ',"shadow":{';
			str += '"color":"' + obj.shadow.color + '","width":' + obj.shadow.width;
			str += '}';
		}
		if ((typeof obj.border) != "undefined") {
			str += ',"border":{';
			str += '"color":"' + obj.border.color + '","width":' + obj.border.width;
			str += '}\n';
		}
		str += '}\n';
	}
}

function cttree_build() {
	it = CodeThat.findElement('items', this);
	if (it.options.length == 0) {
		alert("no tree items defined");
		return;
	}
	res = CodeThat.findElement('result', this);
	frm = CodeThat.findElement('main_form', this);
	if (isNaN(frm.itemoffset_x.value) || frm.itemoffset_x.value<0) frm.itemoffset_x.value = 0;
	if (isNaN(frm.itemoffset_y.value) || frm.itemoffset_y.value<0) frm.itemoffset_y.value = 0;
	if (isNaN(frm.width.value) || frm.width.value<0) frm.width.value = 300;
	if (isNaN(frm.height.value) || frm.height.value<0) frm.height.value = 200;
	if (isNaN(frm.size_width.value) || frm.size_width.value<0) frm.size_width.value = 90;
	if (isNaN(frm.size_height.value) || frm.size_height.value<0) frm.size_height.value = 20;
	if (isNaN(frm.shadow_width.value) || frm.shadow_width.value<0 || frm.shadow_width.value == "") frm.shadow_width.value = 1;
	if (isNaN(frm.border_width.value) || frm.border_width.value<0 || frm.border_width.value == "") frm.border_width.value = 1;
	if (isNaN(frm.z.value)) frm.z.value = 0;
	cause = false;
	if (isNaN(frm.pos_x.value) || frm.pos_x.value < 0) {
		alert("insert the correct value");
		cause = frm.pos_x;
	}
	if (isNaN(frm.pos_y.value) || frm.pos_y.value < 0) {
		alert("insert the correct value");
		cause = frm.pos_y;
	}
	if (cause.focus) {
		cause.focus();
		return;
	}
	str = "";
	str += '<html><head><title>CodeThatTree</title>\n';
	str += '\n';
	str += '<script language="javascript1.2" src="' + frm.sdk_path.value + '"></script>\n';
	str += '<script language="javascript1.2" src="' + frm.script_path.value + '"></script>\n';
	str += '<script language="javascript1.2">\n';
	str += 'var treedef={\n';
	if (frm.pos_x.value != "" || frm.pos_y.value != "") {
		str += '"position":{\n';
		str += '"pos":[' + frm.pos_x.value + ',' + frm.pos_y.value + ']\n';
		str += ',"absolute":' + frm.menu_absolute.value + '\n';
		str += '},\n';
	}
	if (frm.target.value != "") str += '"target":"' + frm.target.value + '",\n';
	str += '"style":{\n';
	str += '"css":"' + frm.css.value + '",\n';
	str += '"itemoffset":{x:' + frm.itemoffset_x.value + ',y:' + frm.itemoffset_y.value + '},\n';
	if (frm.custom_text_color.value == "#" || frm.custom_text_color.value == "") str += '"color":"' + frm.text_color.value + '",\n'; else str += '"color":"' + frm.custom_text_color.value + '",\n';
	if (frm.bgimg.value != "") {
		str += '"bgimg":"' + mkPath(frm.bgimg.value, frm) + '"\n';
	}
	else {
		if (frm.custom_bgcolor.value == "#" || frm.custom_bgcolor.value == "") str += '"bgcolor":"' + frm.bgcolor.value + '"\n'; else str += '"bgcolor":"' + frm.custom_bgcolor.value + '"\n';
	}
	if (frm.width.value != "" && frm.height.value != "") {
		str += ',"fixwidth":' + frm.width.value + '\n';
		str += ',"fixheight":' + frm.height.value + '\n';
	}
	if (frm.fixed_size.checked) {
		if (frm.size_width.value != "" && frm.size_height.value != "") {
			str += ',"size":[' + frm.size_width.value + ',' + frm.size_height.value + ']\n';
		}
	}
	if (frm.shadow.checked) {
		str += ',"shadow":{';
		if (frm.custom_shadow_color.value == "#" || frm.custom_shadow_color.value == "") str += '"color":"' + frm.shadow_color.value + '",'; else str += '"color":"' + frm.custom_shadow_color.value + '",';
		str += '"width":' + frm.shadow_width.value + '}\n';
	}
	if (frm.border.checked) {
		str += ',"border":{';
		if (frm.custom_border_color.value == "#" || frm.custom_border_color.value == "") str += '"color":"' + frm.border_color.value + '",'; else str += '"color":"' + frm.custom_border_color.value + '",';
		str += '"width":' + frm.border_width.value;
		str += '}\n';
	}
	if ((typeof explorer_style) != "object") {
		explorer_style = {
			imgline : mkPath(frm.imgline.value, frm), imgitem : mkPath(frm.e_imgitem.value, frm), imgitem_l : mkPath(frm.imgitem_l.value, frm),
			imgdir : mkPath(frm.e_imgdir.value, frm), imgdir_l : mkPath(frm.imgdir_l.value, frm), imgdiropen : mkPath(frm.e_imgdiropen.value, frm), imgdiropen_l : mkPath(frm.imgdiropen_l.value, frm), lined : frm.lined.value
		};
	}
	if (frm.explorer_like.checked) {
		explorer_style_gen(explorer_style);
	}
	else {
		if (frm.imgitem.value != "") {
			str += ',"imgitem":"' + mkPath(frm.imgitem.value, frm) + '" ';
		}
		if (frm.imgdir.value != "") {
			str += ',"imgdir":"' + mkPath(frm.imgdir.value, frm) + '" ';
		}
		if (frm.imgdiropen.value != "") {
			str += ',"imgdiropen":"' + mkPath(frm.imgdiropen.value, frm) + '"';
		}
	}
	if (frm.z.value != "") {
		str += ',"z":"' + frm.z.value + '"\n';
	}
	str += '}';
	if (frm.itemover.checked)
	style_gen_1(g_itemover, ',"styleover"', false, true);
	str += ',"items":[\n';
	recount_children();
	for (i = 0; i<items.length; i++) {
		temp[i] = new stats(items[i].parent, items[i].num_children);
	}
	to = CodeThat.findElement('items', this);
	for ( i = 0; i<to.options.length; i++) {
		p = to.options[i].label;
		if (!items[p].deleted && items[p].parent == - 1) {
			items_view(p);
		}
	}
	for (i = 0; i<items.length; i++) {
		items[i].parent = temp[i].parent;
		items[i].num_children = temp[i].num_children;
	}
	str += ']\n};';
	str += '</script></head>\n';
	str += '<body>\n';
	str += '<script>\n';
	str += 'if ((typeof CTree)!="undefined"){ var tree1=new CTree(treedef,\'tree1\');\n';
	str += 'tree1.create();\n';
	str += 'tree1.draw();\n';
	str += ' } this.opener=null;\n  ';
	str += 'if ((typeof ua)!="undefined") {if (ua.moz) this.document.close();}';
	str += '<\/script>\n';
	str += '</body></html>';
	res.value = str;
	c_flag = false;
	code_flag = true;
	return str;
}

function explorer_style_gen(obj) {
	if (obj.imgline != "") str += ',"imgline":"' + obj.imgline + '"\n';
	if (obj.imgitem != "") str += ',"imgitem":"' + obj.imgitem + '"\n';
	if (obj.imgitem_l != "") str += ',"imgitem_l":"' + obj.imgitem_l + '"\n';
	if (obj.imgitem_f != "") str += ',"imgitem_f":"' + obj.imgitem_f + '"\n';
	if (obj.imgdir != "") str += ',"imgdir":"' + obj.imgdir + '"\n';
	if (obj.imgdir_l != "") str += ',"imgdir_l":"' + obj.imgdir_l + '"\n';
	if (obj.imgdir_f != "") str += ',"imgdir_f":"' + obj.imgdir_f + '"\n';
	if (obj.imgdiropen != "") str += ',"imgdiropen":"' + obj.imgdiropen + '"\n';
	if (obj.imgdiropen_l != "") str += ',"imgdiropen_l":"' + obj.imgdiropen_l + '"\n';
	if (obj.imgdiropen_f != "") str += ',"imgdiropen_f":"' + obj.imgdiropen_f + '"\n';
	str += ',"lined":' + obj.lined;
}

function sw_img_on(img) {
	CodeThat.findElement(img, this).src = 'tree/img/ad.gif';
}

function sw_img_off(img) {
	CodeThat.findElement(img, this).src = 'tree/img/ar.gif';
}

function style_dlg_show(div, styles, img_span) {
	obj = CodeThat.findElement('items', this);
	itemstyle = styles;
	if (CodeThat.findElement(div).style.visibility == 'visible') {
		sw_img_off('img_itemstyle');
		sw_img_off('img_menustyle');
		sw_img_off('img_itemover');
		sw_img_off('img_styleover');
		style_dlg_hide('style_div', 'itemstyle_img_div', true);
	}
	else {
		show_span(div);
		if (img_span) {
			show_span(img_span);
		}
		else {
			hide_span('itemstyle_img_div');
		}
		stfrm = CodeThat.findElement('items_form', this);
		hide_span('menustyle_explorer');
		if (edit) {
			ed = selected_index(obj);
			if (ed == - 1) return;
			ed_id = obj.options[ed].label;
			switch (styles) {
				case "menustyle" :
					src = items[ed_id].def.menustyle;
					break;
				case "itemover" :
					src = items[ed_id].def.itemover;
					break;
				case "style" :
					src = items[ed_id].def.style;
					break;
				case "styleover" :
					src = items[ed_id].def.styleover;
					break;
			}
		}
		if (!edit) {
			switch (styles) {
				case "style" :
					src = style;
					break;
				case "styleover" :
					src = styleover;
					break;
				case "menustyle" :
					src = menustyle;
					break;
				case "itemover" :
					src = itemover;
					break;
			}
		}
		switch (styles) {
			case "style" :
				sw_img_on('img_itemstyle');
				sw_img_off('img_menustyle');
				sw_img_off('img_itemover');
				sw_img_off('img_styleover');
				show_span('header_1');
				hide_span('header_2');
				hide_span('header_3');
				hide_span('header_4');
				break;
			case "styleover" :
				sw_img_on('img_styleover');
				sw_img_off('img_itemover');
				sw_img_off('img_menustyle');
				sw_img_off('img_itemstyle');
				show_span('header_2');
				hide_span('header_1');
				hide_span('header_3');
				hide_span('header_4');
				break;
			case "menustyle" :
				sw_img_on('img_menustyle');
				sw_img_off('img_itemstyle');
				sw_img_off('img_itemover');
				sw_img_off('img_styleover');
				show_span('menustyle_explorer');
				show_span('header_3');
				hide_span('header_2');
				hide_span('header_1');
				hide_span('header_4');
				break;
			case "itemover" :
				sw_img_on('img_itemover');
				sw_img_off('img_itemstyle');
				sw_img_off('img_menustyle');
				sw_img_off('img_styleover');
				show_span('header_4');
				hide_span('header_2');
				hide_span('header_3');
				hide_span('header_1');
				break;
		}
		if ((typeof src) == "object") {
			stfrm.itemstyle_css.value = src.css;
			s = src.color.match("#");
			if (s == "#") stfrm.custom_itemstyle_color.value = src.color;
			else {
				stfrm.itemstyle_color.value = src.color;
				stfrm.custom_itemstyle_color.value = "#";
			}
			s = src.bgcolor.match("#");
			if (s == "#") stfrm.custom_itemstyle_bgcolor.value = src.bgcolor;
			else {
				stfrm.itemstyle_bgcolor.value = src.bgcolor;
				stfrm.custom_itemstyle_bgcolor.value = "#";
			}
			stfrm.itemstyle_z.value = src.z;
			stfrm.itemstyle_frm.value = src.form;
			if ((typeof src.shadow) != "undefined") {
				stfrm.itemstyle_shadow.checked = true;
				s = src.shadow.color.match("#");
				if (s == "#") stfrm.itemstyle_custom_shadow_color.value = src.shadow.color;
				else {
					stfrm.itemstyle_shadow_color.value = src.shadow.color;
					stfrm.itemstyle_custom_shadow_color.value = "#";
				}
				stfrm.itemstyle_shadow_width.value = src.shadow.width;
			}
			if ((typeof src.border) != "undefined") {
				stfrm.itemstyle_border.checked = true;
				s = src.border.color.match("#");
				if (s == "#") stfrm.itemstyle_custom_border_color.value = src.border.color;
				else {
					stfrm.itemstyle_border_color.value = src.border.color;
					stfrm.itemstyle_custom_border_color.value = "#";
				}
				stfrm.itemstyle_border_width.value = src.border.width;
			}
		}
	}
}

function style_dlg_hide(div, img_span, cancel) {
	hide_span('menustyle_explorer');
	hide_span(div);
	hide_span(img_span);
	stfrm = CodeThat.findElement('items_form', this);
	frm = CodeThat.findElement('main_form', this);
	if (!cancel) {
		if (isNaN(stfrm.itemstyle_shadow_width.value) || stfrm.itemstyle_shadow_width.value<0 || stfrm.itemstyle_shadow_width.value == "") stfrm.itemstyle_shadow_width.value = 1;
		if (isNaN(stfrm.itemstyle_border_width.value) || stfrm.itemstyle_border_width.value<0 || stfrm.itemstyle_border_width.value == "") stfrm.itemstyle_border_width.value = 1;
		if (isNaN(stfrm.itemstyle_z.value) ) stfrm.itemstyle_z.value = 0;
		if (stfrm.custom_itemstyle_color.value == "#" || stfrm.custom_itemstyle_color.value == "") itemstyle_color = stfrm.itemstyle_color.value; else itemstyle_color = stfrm.custom_itemstyle_color.value;
		if (stfrm.custom_itemstyle_bgcolor.value == "#" || stfrm.custom_itemstyle_bgcolor.value == "") itemstyle_bgcolor = stfrm.itemstyle_bgcolor.value; else itemstyle_bgcolor = stfrm.custom_itemstyle_bgcolor.value;
		if (stfrm.itemstyle_custom_shadow_color.value == "#" || stfrm.itemstyle_custom_shadow_color.value == "") itemstyle_shadow_color = stfrm.itemstyle_shadow_color.value; else itemstyle_shadow_color = stfrm.itemstyle_custom_shadow_color.value;
		if (stfrm.itemstyle_custom_border_color.value == "#" || stfrm.itemstyle_custom_border_color.value == "") itemstyle_border_color = stfrm.itemstyle_border_color.value; else itemstyle_border_color = stfrm.itemstyle_custom_border_color.value;
		res = {
			css : stfrm.itemstyle_css.value, color : itemstyle_color, bgcolor : itemstyle_bgcolor, bgimg : mkPath(stfrm.itemstyle_bgimg.value, frm), imgitem : mkPath(stfrm.itemstyle_imgitem.value, frm),
			imgdir : mkPath(stfrm.itemstyle_imgdir.value, frm), imgdiropen : mkPath(stfrm.itemstyle_imgdiropen.value, frm), z : stfrm.itemstyle_z.value, form : stfrm.itemstyle_frm.value
		};
		if (stfrm.itemstyle_shadow.checked) res.shadow = {
			color : itemstyle_shadow_color, width : stfrm.itemstyle_shadow_width.value
		};
		if (stfrm.itemstyle_border.checked) {
			res.border = {
				color : itemstyle_border_color, width : stfrm.itemstyle_border_width.value
			};
		}
	}
	else {
		res = false;
	}
	switch (itemstyle) {
		case "style" :
			style = res;
			hide_span('header_1');
			sw_img_off('img_itemstyle');
			break;
		case "styleover" :
			styleover = res;
			hide_span('header_2');
			sw_img_off('img_styleover');
			break;
		case "menustyle" :
			menustyle = res;
			hide_span('header_3');
			sw_img_off('img_menustyle');
			break;
		case "itemover" :
			itemover = res;
			hide_span('header_4');
			sw_img_off('img_itemover');
			break;
	}
	itemstyle_reset();
}

function itemstyle_reset() {
	stfrm = CodeThat.findElement('items_form', this);
	stfrm.itemstyle_css.value = "test2tree";
	stfrm.itemstyle_color.value = "Black";
	stfrm.custom_itemstyle_color.value = "";
	stfrm.custom_itemstyle_bgcolor.value = "";
	stfrm.itemstyle_bgcolor.value = "White";
	stfrm.itemstyle_z.value = "";
	stfrm.itemstyle_frm.value = "false";
	stfrm.itemstyle_bgimg.value = "";
	stfrm.itemstyle_imgitem.value = "";
	stfrm.itemstyle_imgdir.value = "";
	stfrm.itemstyle_imgdiropen.value = "";
	stfrm.itemstyle_shadow.checked = false;
	stfrm.itemstyle_custom_shadow_color.value = "";
	stfrm.itemstyle_shadow_color.value = "Gray";
	stfrm.itemstyle_shadow_width.value = "";
	stfrm.itemstyle_border.checked = false;
	stfrm.itemstyle_custom_border_color.value = "";
	stfrm.itemstyle_border_color.value = "Gray";
	stfrm.itemstyle_border_width.value = "";
}

function menustyle_dlg_show(style, span, form, edd) {
	s = CodeThat.findElement(span, this);
	if (s.style.visibility == "visible") hide_span(span);
	show_span(span);
	mstyle = style;
	obj = CodeThat.findElement('items', this);
	stfrm = CodeThat.findElement(form, this);
	if (!edit) {
		switch (style) {
			case "g_itemover" :
				src = g_itemover;
				break;
		}
	}
	if ((typeof src) == "object") {
		stfrm.menustyle_css.value = src.css;
		s = src.color.match("#");
		if (s == "#") stfrm.custom_menustyle_color.value = src.color;
		else {
			stfrm.menustyle_color.value = src.color;
			stfrm.custom_menustyle_color.value = "#";
		}
		s = src.bgcolor.match("#");
		if (s == "#") stfrm.custom_menustyle_bgcolor.value = src.bgcolor;
		else {
			stfrm.menustyle_bgcolor.value = src.bgcolor;
			stfrm.custom_menustyle_bgcolor.value = "#";
		}
		stfrm.menustyle_z.value = src.z;
	}
}

function menustyle_reset(stfrm, f) {
	stfrm.menustyle_css.value = "test2tree";
	stfrm.menustyle_color.value = "Black";
	stfrm.custom_menustyle_bgcolor.value = "#CCCCCC";
	stfrm.menustyle_bgcolor.value = "Gray";
	stfrm.menustyle_z.value = "";
	stfrm.menustyle_bgimg.value = "";
}

function menustyle_dlg_hide(form, span) {
	stfrm = CodeThat.findElement(form, this);
	frm = CodeThat.findElement('main_form', this);
	if (isNaN(stfrm.menustyle_z.value) ) stfrm.menustyle_z.value = 0;
	if (stfrm.custom_menustyle_color.value == "#" || stfrm.custom_menustyle_color.value == "") menustyle_color = stfrm.menustyle_color.value; else menustyle_color = stfrm.custom_menustyle_color.value;
	if (stfrm.custom_menustyle_bgcolor.value == "#" || stfrm.custom_menustyle_bgcolor.value == "") menustyle_bgcolor = stfrm.menustyle_bgcolor.value; else menustyle_bgcolor = stfrm.custom_menustyle_bgcolor.value;
	res = {
		css : stfrm.menustyle_css.value, color : menustyle_color, bgcolor : menustyle_bgcolor, bgimg : mkPath(stfrm.menustyle_bgimg.value, frm),
		z : stfrm.menustyle_z.value
	};
	switch (mstyle) {
		case "g_itemover" :
			g_itemover = res;
			break;
	}
	menustyle_reset(stfrm, true);
	hide_span(span);
}

function cancel_items_dlg(id, id_dlg) {
	hide_items_dlg(id);
	frm = CodeThat.findElement(id_dlg, this);
	frm.reset();
	style_dlg_hide('style_div', 'itemstyle_img_div', true);
	hide_span('menustyle_explorer');
}

function bar_sel(idc) {
	frm = CodeThat.findElement('main_form', this);
	if (frm.type.value == "toolbar") frm.bar.checked = true; else frm.bar.checked = false;
}

function show_e_style(form, span) {
	show_span(span);
	efrm = CodeThat.findElement(form);
	obj = CodeThat.findElement('items', this);
	switch(span) {
		case "style_explorer_1" :
			src = explorer_style;
		case "style_explorer_2" :
			if (!edit) {
				src = menu_explorer_style;
			}
			else if (edit) {
				ed = selected_index(obj);
				if (ed == - 1) return;
				ed_id = obj.options[ed].label;
				if ((typeof items[ed_id].def.menustyle) == "object") src = items[ed_id].def.menustyle.menu_explorer_style;
			}
	}
	if ((typeof src) == "object") {
		efrm.lined.value = src.lined;
	}
}

function hide_e_style(form, span) {
	hide_span(span);
	efrm = CodeThat.findElement(form);
	frm = CodeThat.findElement('main_form', this);
	res = {
		imgline : mkPath(efrm.imgline.value, frm), imgitem : mkPath(efrm.e_imgitem.value, frm), imgitem_l : mkPath(efrm.imgitem_l.value, frm), imgitem_f : mkPath(efrm.imgitem_f.value, frm),
		imgdir : mkPath(efrm.e_imgdir.value, frm), imgdir_l : mkPath(efrm.imgdir_l.value, frm), imgdir_f : mkPath(efrm.imgdir_f.value, frm), imgdiropen : mkPath(efrm.e_imgdiropen.value, frm), imgdiropen_l : mkPath(efrm.imgdiropen_l.value, frm),
		imgdiropen_f : mkPath(efrm.imgdiropen_f.value, frm), lined : efrm.lined.value
	};
	switch(span) {
		case "style_explorer_1" :
			explorer_style = res;
		case "style_explorer_2" :
			menu_explorer_style = res;
	}
	efrm.imgline.value = "line.gif";
	efrm.e_imgitem.value = "t-item.gif";
	efrm.imgitem_l.value = "l-item.gif";
	efrm.e_imgdir.value = "t-folder.gif";
	efrm.imgdir_l.value = "l-folder.gif";
	efrm.e_imgdiropen.value = "t-folder-open.gif"
	efrm.imgdiropen_l.value = "l-folder-open.gif";
	efrm.lined.value = "true";
}

function html_dlg_show(id) {
	if (CodeThat.findElement(id).style.visibility == 'visible') hide_span(id);
	else show_span(id);
}
//-->
</script>
<tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATTREE PRO BUILDER</h1></td></tr>
</table></td>
</tr><tr>
<td>

<p class=cp10>There is an online CodeThatTree Builder for PRO version.</p>
<p class=cp10>Fill an appropriate fields, then click 'Build script' button and paste code from the Result window to your web page.</p>
<p class=cp10>To see the result at our web site click 'Preview' button.</p>
<p class=cp10>In case you've only <a class=ca5 href="download_form.php?script=2">download Standard version</a> you're getting CodeThatTree Builder for STD version</a>.</p>
<h3 class=cp10>Please keep in mind - <font class=cf1>fields marked (*) are required</font>.</h3>
<p class=cp10><img src="img/pro.gif" width=24 height=11>&nbsp;Read <a class=ca5 href="standard_vs_pro.html?h=tree#tree">Standard vs PRO</a> to know the differences between CodeThatTree Standard and PRO.</p>
<p class=cp10>Read <a class=ca5 href="tree/tree_manual.html">CodeThatTree User Manual</a> to learn more about CodeThatTree.</p>

<h1 class=cp10><font class=cf5>Common Settings: Paths</font></h1>
<p class=cp10>You can't change standard paths at online version because at the other case script can't fine correct path and builder can't create correct html-code.</p>
<p class=cp10>But at the offline version you should type at the fields bellow correct paths to SDK and CodeThatTree script.</p>
<p class=cp10>Also you should specify path to Styles file (CSS) and Images directory.</p>

</td>
</tr>

<form id=main_form>
<input class=ci3 type=hidden name=script_path value="codethattreepro.js">
<input class=ci3 type=hidden name=css_path value="common_codethat.css">
<input class=ci3 type=hidden name=img_path value="img/">
<input class=ci3 type=hidden name=sdk_path value="../codethatsdk.js">

<tr>
<td align=left><table class=cv1>
	<tr>
	<th>CodeThatSDK (relative):</th>
	<td><input class=ci3 class=ci3 name=sdkpath value="../codethatsdk.js" size=30 readonly></td>
	</tr><tr>
	<th>CodeThatTree (relative):</th>
	<td><input class=ci3 class=ci3 name=treepath value="codethattreepro.js" size=30 readonly></td>
	</tr><tr>
	<th>Styles file (CSS):</th>
	<td><input class=ci3 class=ci3 name=csspath value="../common_codethat.css" size=30 readonly></td>
	</tr>
</table></td>
</tr>
<tr>
<td><h1 class=cp10><font class=cf5>Main Settings</font></h1></td>
</tr>
<tr>
<td align=left><table class=cv1>
	<tr>
	<th>Position</th>
	<td>X</td>
	<td><input class=ci3 name=pos_x size=2 value=30></td>
	<td>px</td>
	<td><img src="img/s.gif" width=15 height=1></td>
	<td>Y</td>
	<td><input class=ci3 name=pos_y size=2 value=20></td>
	<td>px</td>
	</tr><tr>
	<th>Absolute positioning</th>
	<td colspan=7><select class=ci3 name=menu_absolute>
		<option value=true>true</option>
		<option value=false selected>false</option>
	</select></td>
	</tr><tr>
	<th>Target</th>
	<td colspan=7><input class=ci3 name=target size=20></td>
	</tr>
</table></td>
</tr>
<tr>
<td><h1 class=cp10><font class=cf5>Style Settings</font></h1></td>
</tr>
<tr>
<td align=left><table class=cv1>
	<tr>
	<th>CSS class</th>
	<td colspan=7><input class=ci3 name=css size=20 value=test2tree></td>
	</tr><tr>
	<th>Item offset</th>
	<td>X</td>
	<td><input class=ci3 name=itemoffset_x size=2 value=30></td>
	<td>px</td>
	<td rowspan=2><img src="img/s.gif" width=15 height=1></td>
	<td>Y</td>
	<td><input class=ci3 name=itemoffset_y size=2 value=20></td>
	<td>px</td>
	</tr><tr>
	<th>Size</th>
	<td>Width</td>
	<td colspan=2><input class=ci3 name=width value=300 size=3></td>
	<td>Height</td>
	<td colspan=2><input class=ci3 name=height value=200 size=3></td>
	</tr><tr>
	<th><label for=fixed_size>Define fixed item size</label></th>
	<td colspan=7><input type=checkbox name=fixed_size id=fixed_size checked></td>
	</tr><tr>
	<th>&nbsp;</th>
	<td colspan=7>(if you don't get the desired look of the tree try to deselect this checkbox)</td>
	</tr><tr>
	<th>&nbsp;</th>
	<td>Width</td>
	<td colspan=2><input class=ci3 name=size_width value=90 size=2></td>
	<td><img src="img/s.gif" width=15 height=1></td>
	<td>Height</td>
	<td colspan=2><input class=ci3 name=size_height value=20 size=3></td>
	</tr><tr>
	<th>Text color</th>
	<td colspan=7><select class=ci3 name=text_color>
		<option value=Black selected>Black</option>
		<option value=Blue>Blue</option>
		<option value=Brown>Brown</option>
		<option value=Green>Green</option>
		<option value=Gray>Gray</option>
		<option value=Magenta>Magenta</option>
		<option value=Orange>Orange</option>
		<option value=Pink>Pink</option>
		<option value=Red>Red</option>
		<option value=Violet>Violet</option>
		<option value=White>White</option>
		<option value=Yellow>Yellow</option>
	</select></td>
	</tr><tr>
	<th>Custom text color (HEX)</td>
	<td colspan=7><input class=ci3 name=custom_text_color value=# size=20></td>
	</tr><tr>
	<th>Background image</th>
	<td colspan=7><input class=ci3 name=bgimg size=20></td>
	</tr><tr>
	<th>Background color</th>
	<td colspan=7><select class=ci3 name=bgcolor>
		<option value=Black>Black</option>
		<option value=Blue>Blue</option>
		<option value=Brown>Brown</option>
		<option value=Green>Green</option>
		<option value=Gray>Gray</option>
		<option value=Magenta>Magenta</option>
		<option value=Orange>Orange</option>
		<option value=Pink>Pink</option>
		<option value=Red>Red</option>
		<option value=Violet>Violet</option>
		<option value=White>White</option>
		<option value=Yellow>Yellow</option>
	</select></td>
	</tr><tr>
	<th>Custom background color (HEX)</th>
	<td colspan=7><input class=ci3 name=custom_bgcolor value=#FFFFFF size=20></td>
	</tr><tr>
	<th>url of the image for a tree leaf</th>
	<td colspan=7><input class=ci3 name=imgitem size=20></td>
	</tr><tr>
	<th>url of the image for a closed tree node</th>
	<td colspan=7><input class=ci3 name=imgdir size=20></td>
	</tr><tr>
	<th>url of the image for a open tree node</th>
	<td colspan=7><input class=ci3 name=imgdiropen size=20></td>
	</tr><tr>
	<th>Z-index</th>
	<td colspan=7><input class=ci3 name=z size=2></td>
	</tr>
</table></td>
</tr>
<tr>
<td><h1 class=cp10><font class=cf5>Explorer-like Tree Settings</font></h1></td>
</tr>
<tr>
<td align=left><table class=cv1>
	<tr>
	<th><label for=explorer_like>Define explorer-like style</label></th>
	<td><input type=checkbox id=explorer_like name=explorer_like></td>
	</tr><tr>
	<td colspan=2><input class=ci4 type=button value=define onclick="show_e_style('main_form','style_explorer_1')"></td>
	</tr>
</table></td>
</tr>
<tr>
<td><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=style_explorer_1>
	<table class=cv2 align=left>
	<tr>
	<th>Line image URL</th>
	<td><input class=ci3 name=imgline size=20 value="line.gif"></td>
	</tr><tr>
	<th>Tree leaf image URL</th>
	<td><input class=ci3 name=e_imgitem size=20 value="t-item.gif"></td>
	</tr><tr>
	<th>First tree leaf image URL </th>
	<td><input class=ci3 name=imgitem_f size=20 value="f-item.gif"></td>
	</tr><tr>
	<th>Last tree leaf image URL (L-like image)</th>
	<td><input class=ci3 name=imgitem_l size=20 value="l-item.gif"></td>
	</tr><tr>
	<th>Tree node image URL</th>
	<td><input class=ci3 name=e_imgdir size=20 value="t-folder.gif"></td>
	</tr><tr>
	<th>Opened tree node image URL</th>
	<td><input class=ci3 name=e_imgdiropen size=20 value="t-folder-open.gif"></td>
	</tr><tr>
	<th>First tree node Image URL</th>
	<td><input class=ci3 name=imgdir_f size=20 value="f-folder.gif"></td>
	</tr><tr>
	<th>Last tree node image URL (L-like image)</th>
	<td><input class=ci3 name=imgdir_l size=20 value="l-folder.gif"></td>
	</tr><tr>
	<th>First opened tree node image URL</th>
	<td><input class=ci3 name=imgdiropen_f size=20 value="f-folder-open.gif"></td>
	</tr><tr>
	<th>Last opened tree node image URL (L-like image)</th>
	<td><input class=ci3 name=imgdiropen_l size=20 value="l-folder-open.gif"></td>
	</tr><tr>
	<th>Lined</th>
	<td><select name=lined>
		<option value=true>true</option>
		<option value=false>false</option>
	</select></td>
	</tr><tr>
	<td colspan=2><p class=cp22><input class=ci4 type=button value=Apply onclick="hide_e_style('main_form','style_explorer_1');">&nbsp;&nbsp;<input class=ci4 type=button value=Cancel onclick="hide_span('style_explorer_1');"></p></td>
	</tr>
	</table>
</div></td>
</tr>
<tr>
<td><h1 class=cp10><font class=cf5>Shadow Parameters</font></h1></td>
</tr>
<tr>
<td align=left><table class=cv1>
	<tr>
	<th><label for=shadow>Create shadow</label></th>
	<td><input type=checkbox name=shadow id=shadow checked></td>
	</tr><tr>
	<th>Shadow color</th>
	<td><select class=ci3 name=shadow_color>
		<option value=Black>Black</option>
		<option value=Blue>Blue</option>
		<option value=Brown>Brown</option>
		<option value=Green>Green</option>
		<option value=Gray selected>Gray</option>
		<option value=Magenta>Magenta</option>
		<option value=Orange>Orange</option>
		<option value=Pink>Pink</option>
		<option value=Red>Red</option>
		<option value=Violet>Violet</option>
		<option value=White>White</option>
		<option value=Yellow>Yellow</option>
	</select></td>
	</tr><tr>
	<th>Custom shadow color (HEX)</th>
	<td><input class=ci3 name=custom_shadow_color value=# size=20></td>
	</tr><tr>
	<th>Width</th>
	<td><input class=ci3 name=shadow_width size=2 value=3></td>
	</tr>
</table></td>
</tr>
<tr>
<td><h1 class=cp10><font class=cf5>Border Parameters</font></h1></td>
</tr>
<tr>
<td align=left><table class=cv1>
	<tr>
	<th><label for=border>Create border</label></th>
	<td><input type=checkbox name=border id=border checked></td>
	</tr><tr>
	<th>Border color</th>
	<td><select class=ci3 name=border_color>
		<option value=Black>Black</option>
		<option value=Blue>Blue</option>
		<option value=Brown>Brown</option>
		<option value=Green>Green</option>
		<option value=Gray selected>Gray</option>
		<option value=Magenta>Magenta</option>
		<option value=Orange>Orange</option>
		<option value=Pink>Pink</option>
		<option value=Red>Red</option>
		<option value=Violet>Violet</option>
		<option value=White>White</option>
		<option value=Yellow>Yellow</option>
	</select></td>
	</tr><tr>
	<th>Custom border color (HEX)</th>
	<td><input class=ci3 name=custom_border_color value=#003882 size=20></td>
	</tr><tr>
	<th>Width</th>
	<td><input class=ci3 name=border_width size=2 value=1></td>
	</tr>
</table></td>
</tr>
<tr>
<td><h1 class=cp10><font class=cf5>"mouseover" Style Settings</font></h1></td>
</tr>
<tr>
<td align=left><table class=cv1>
	<tr>
	<th><label for=itemover>Define style when in "mouseover" state</label></th>
	<td><input type=checkbox id=itemover name=itemover></td>
	</tr><tr>
	<td colspan=2><input class=ci4 id=pos1 type=button value=define onclick="menustyle_dlg_show('g_itemover','style_1','main_form',true);"></td>
	</tr>
</table></td>
</tr>
<tr>
<td><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=style_1>
	<table class=cv2 align=left>
	<tr>
	<th>CSS class</th>
	<td><input class=ci3 name=menustyle_css size=20 value=test2tree></td>
	</tr><tr>
	<th>Text color</th>
	<td><select class=ci3 name=menustyle_color>
		<option value=Black selected>Black</option>
		<option value=Blue>Blue</option>
		<option value=Brown>Brown</option>
		<option value=Green>Green</option>
		<option value=Gray>Gray</option>
		<option value=Magenta>Magenta</option>
		<option value=Orange>Orange</option>
		<option value=Pink>Pink</option>
		<option value=Red>Red</option>
		<option value=Violet>Violet</option>
		<option value=White>White</option>
		<option value=Yellow>Yellow</option>
	</select></td>
	</tr><tr>
	<th>Custom text color (HEX)</th>
	<td><input class=ci3 name=custom_menustyle_color value=# size=20></td>
	</tr><tr>
	<th>Background image</th>
	<td><input class=ci3 name=menustyle_bgimg size=20></td>
	</tr><tr>
	<th>Background color</th>
	<td><select class=ci3 name=menustyle_bgcolor>
		<option value=Black>Black</option>
		<option value=Blue>Blue</option>
		<option value=Brown>Brown</option>
		<option value=Green>Green</option>
		<option value=Gray >Gray</option>
		<option value=Magenta>Magenta</option>
		<option value=Orange>Orange</option>
		<option value=Pink>Pink</option>
		<option value=Red>Red</option>
		<option value=Violet>Violet</option>
		<option value=White selected>White</option>
		<option value=Yellow>Yellow</option>
	</select></td>
	</tr><tr>
	<th>Custom background color (HEX)</th>
	<td><input class=ci3 name=custom_menustyle_bgcolor value=#CCCCCC size=20></td>
	</tr><tr>
	<th>Z-index</th>
	<td><input class=ci3 name=menustyle_z size=2></td>
	</tr><tr>
	<td colspan=2><p class=cp22><input class=ci4 type=button value=Apply onclick="menustyle_dlg_hide('main_form','style_1');">&nbsp;&nbsp;<input class=ci4 type=button value=Cancel onclick="hide_span('style_1');"></td>
	</tr>
</table></td>
</tr>
</form>
<tr>
<td><h1 class=cp10><font class=cf5>Items Settings</font></h1></td>
</tr>
<tr>
<td><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=items_div>
	<table class=cv2 align=left>
	<form id=items_form >
	<tr>
	<th>Text</th>
	<td><input class=ci3 name=item_text id=item_text size=30></td>
	</tr><tr>
	<th><label for=html_text>Specify html text</label></th>
	<td><input type=checkbox name=html_text id=html_text></td>
	</tr><tr>
	<td colspan=2><input class=ci4 type=button onclick="html_dlg_show('html_text_div');" value=specify></td>
	</tr><tr>
	<td colspan=2 align=left><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=html_text_div>
		<table class=cv4 align=left>
		<tr>
		<th>Html code</th>
		</tr><tr>
		<th><textarea class=ci3 name=item_html_code cols=90 rows=4></textarea></th>
		</tr><tr>
		<th><input class=ci4 type=button onclick="hide_span('html_text_div');" value=Apply></th>
		</tr>
		</table>
	</div></td>
	</tr><tr>
	<td colspan=2><h1 class=cp10><font class=cf5>Action Parameters</font></h1></td>
	</tr><tr>
	<th>URL</th>
	<td><input class=ci3 name=item_url size=30></td>
	</tr><tr>
	<th>Target</th>
	<td><input class=ci3 name=item_target size=30></td>
	</tr><tr>
	<th>Title(item hint)</th>
	<td><input class=ci3 name=item_title size=30></td>
	</tr><tr>
	<th>JS code</th>
	<td><textarea name=item_js_code cols="30" rows="2"></textarea></td>
	</tr><tr>
	<td colspan=2><h1 class=cp10><font class=cf5>Style Settings</font></h1></td>
	</tr><tr>
	<th>Specify style settings for this item</th>
	<td><img src="tree/img/ar.gif" id=img_itemstyle onclick="style_dlg_show('style_div','style','itemstyle_img_div');">&nbsp;&nbsp;<input class=ci4 type=button value=specify onclick="style_dlg_show('style_div','style','itemstyle_img_div');"></td>
	</tr><tr>
	<th>Specify style settings for this item when in "mouseover" state</th>
	<td><img src="tree/img/ar.gif" id=img_styleover onclick="style_dlg_show('style_div','styleover');">&nbsp;&nbsp;<input class=ci4 type=button value=specify onclick="style_dlg_show('style_div','styleover');"></td>
	</tr><tr>
	<th>Specify style settings for submenu</th>
	<td><img src="tree/img/ar.gif" id=img_menustyle onclick="style_dlg_show('style_div','menustyle','itemstyle_img_div');">&nbsp;&nbsp;<input class=ci4 type=button value=specify onclick="style_dlg_show('style_div','menustyle','itemstyle_img_div');"></td>
	</tr><tr>
	<th>Specify style settings for for submenu when in "mouseover" state</th>
	<td><img src="tree/img/ar.gif" id=img_itemover onclick="style_dlg_show('style_div','itemover');">&nbsp;&nbsp;<input class=ci4 type=button value=specify onclick="style_dlg_show('style_div','itemover');"></td>
	</tr><tr>
	<td class=cv3 colspan=2><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=style_div>
		<table class=cv4 align=left>
		<tr>
		<td colspan=2>
		<div style="visibility:hidden;top:0;position:absolute;z-index:2" id=header_1><table align=left>
			<tr><td><h1 class=cp10><font class=cf5>Style Settings for the Item</font></h1></td></tr>
		</table></div>
		<div style="visibility:hidden;top:0;position:absolute;z-index:2" id=header_2><table align=left>
			<tr><td><h1 class=cp10><font class=cf5>Style Settings for the Item When in "mouseover" State</font></h1></td></tr>
		</table></div>
		<div style="visibility:hidden;top:0;position:absolute;z-index:2" id=header_3><table align=left>
			<tr><td><h1 class=cp10><font class=cf5>Style Settings for the Submenu</font></h1></td></tr>
		</table></div>
		<div style="visibility:hidden;top:0;position:absolute;z-index:2" id=header_4><table align=left>
			<tr><td><h1 class=cp10><font class=cf5>Style Settings for the Submenu When in "mouseover" State</font></h1></td></tr>
		</table></div>
		</td>
		</tr><tr>
		<th>CSS class</th>
		<td><input class=ci3 name=itemstyle_css size=20 value=test2tree></td>
		</tr><tr>
		<th>Text color</th>
		<td><select class=ci3 name=itemstyle_color>
			<option value=Black selected>Black</option>
			<option value=Blue>Blue</option>
			<option value=Brown>Brown</option>
			<option value=Green>Green</option>
			<option value=Gray>Gray</option>
			<option value=Magenta>Magenta</option>
			<option value=Orange>Orange</option>
			<option value=Pink>Pink</option>
			<option value=Red>Red</option>
			<option value=Violet>Violet</option>
			<option value=White>White</option>
			<option value=Yellow>Yellow</option>
		</select></td>
		</tr><tr>
		<th>Custom text color (HEX)</th>
		<td><input class=ci3 name=custom_itemstyle_color value=# size=20></td>
		</tr><tr>
		<th>Background image</th>
		<td><input class=ci3 name=itemstyle_bgimg size=20></td>
		</tr><tr>
		<th>Background color</th>
		<td><select class=ci3 name=itemstyle_bgcolor >
			<option value=Black>Black</option>
			<option value=Blue>Blue</option>
			<option value=Brown>Brown</option>
			<option value=Green>Green</option>
			<option value=Gray>Gray</option>
			<option value=Magenta>Magenta</option>
			<option value=Orange>Orange</option>
			<option value=Pink>Pink</option>
			<option value=Red>Red</option>
			<option value=Violet>Violet</option>
			<option value=White selected>White</option>
			<option value=Yellow>Yellow</option>
		</select></td>
		</tr><tr>
		<th>Custom background color (HEX)</th>
		<td><input class=ci3 name=custom_itemstyle_bgcolor value=# size=20></td>
		</tr><tr>
		<th>Z-index</th>
		<td><input class=ci3 name=itemstyle_z size=2></td>
		</tr><tr>
		<td class=cv3 colspan=2><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=itemstyle_img_div>
			<table class=cv4 align=left>
			<tr>
			<th>url of the image for a tree leaf</th>
			<td><input class=ci3 name=itemstyle_imgitem size=20></td>
			</tr><tr>
			<th>url of the image for a closed tree node</th>
			<td><input class=ci3 name=itemstyle_imgdir size=20></td>
			</tr><tr>
			<th>url of the image for a open tree node</th>
			<td><input class=ci3 name=itemstyle_imgdiropen size=20></td>
			</tr><tr>
			<th>Ability to specify the form in this item</th>
			<td><select class=ci3 name=itemstyle_frm>
				<option value=false selected>false</option>
				<option value=true>true</option>
			</select></td>
			</tr><tr>
			<td class=cv3 colspan=2><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=menustyle_explorer>
				<table class=cv4 align=left>
				<tr>
				<td colspan=2><h1 class=cp10><font class=cf5>Explorer-like Tree Settings</font></h1></td>
				</tr><tr>
				<th>Define explorer-like style</th>
				<td><input class=ci4 type=button value=define onclick="show_e_style('items_form','style_explorer_2');"></td>
				</tr><tr>
				<td class=cv3 colspan=2><div style="visibility:hidden;top:0;position:absolute;z-index:2" id=style_explorer_2>
					<table class=cv2 align=left>
					<tr>
					<th>url of the image for a line</th>
					<td><input class=ci3 name=imgline size=20 value="line.gif"></td>
					</tr><tr>
					<th>url of the image for a tree leaf</th>
					<td><input class=ci3 name=e_imgitem size=20 value="t-item.gif"></td>
					</tr><tr>
					<th>url of the image for the first tree leaf on its level</th>
					<td><input class=ci3 name=imgitem_f size=20 value="l-item.gif"></td>
					</tr><tr>
					<th>url of the image for the last tree leaf on its level (L-like image)</th>
					<td><input class=ci3 name=imgitem_l size=20 value="l-item.gif"></td>
					</tr><tr>
					<th>url of the image for a tree node</th>
					<td><input class=ci3 name=e_imgdir size=20 value="t-folder.gif"></td>
					</tr><tr>
					<th>url of the image for an open tree node</th>
					<td><input class=ci3 name=e_imgdiropen size=20 value="t-folder-open.gif"></td>
					</tr><tr>
					<th>url of the image for the first tree node on its level</th>
					<td><input class=ci3 name=imgdir_f size=20 value="l-folder.gif"></td>
					</tr><tr>
					<th>url of the image for the last tree node on its level (L-like image)</th>
					<td><input class=ci3 name=imgdir_l size=20 value="l-folder.gif"></td>
					</tr><tr>
					<th>url of the image for the open first tree node on its level</th>
					<td><input class=ci3 name=imgdiropen_f size=20 value="l-folder-open.gif"></td>
					</tr><tr>
					<th>url of the image for the open last tree node on its level (L-like image)</th>
					<td><input class=ci3 name=imgdiropen_l size=20 value="l-folder-open.gif"></td>
					</tr><tr>
					<th>Lined</th>
					<td><select name=lined>
						<option value=true>true</option>
						<option value=false>false</option>
					</select></td>
					</tr><tr>
					<td colspan=2><p class=cp22><input class=ci4 type=button value=Apply onclick="hide_e_style('items_form','style_explorer_2');">&nbsp;&nbsp;<input class=ci4 type=button value=Cancel onclick="hide_span('style_explorer_2')"></p></td>
					</tr>
					</table>
				</div></td>
				</tr>
				</table>
			</div></td>
			</tr><tr>
			<td colspan=2><h1 class=cp10><font class=cf5>Shadow Parameters</font></h1></td>
			</tr><tr>
			<th>Create shadow</th>
			<td><input type=checkbox name=itemstyle_shadow></td>
			</tr><tr>
			<th>Shadow color</th>
			<td><select class=ci3 name=itemstyle_shadow_color>
				<option value=Black>Black</option>
				<option value=Blue>Blue</option>
				<option value=Brown>Brown</option>
				<option value=Green>Green</option>
				<option value=Gray selected>Gray</option>
				<option value=Magenta>Magenta</option>
				<option value=Orange>Orange</option>
				<option value=Pink>Pink</option>
				<option value=Red>Red</option>
				<option value=Violet>Violet</option>
				<option value=White>White</option>
				<option value=Yellow>Yellow</option>
			</select></td>
			</tr><tr>
			<th>Custom shadow color (HEX)</th>
			<td><input class=ci3 name=itemstyle_custom_shadow_color value=# size=20></td>
			</tr><tr>
			<th>Width</th>
			<td><input class=ci3 name=itemstyle_shadow_width size=2></td>
			</tr><tr>
			<td colspan=2><h1 class=cp10><font class=cf5>Border Parameters</font></h1></td>
			</tr><tr>
			<th>Create border</th>
			<td><input type=checkbox name=itemstyle_border></td>
			</tr><tr>
			<th>Border color</th>
			<td><select class=ci3 name=itemstyle_border_color>
				<option value=Black>Black</option>
				<option value=Blue>Blue</option>
				<option value=Brown>Brown</option>
				<option value=Green>Green</option>
				<option value=Gray selected>Gray</option>
				<option value=Magenta>Magenta</option>
				<option value=Orange>Orange</option>
				<option value=Pink>Pink</option>
				<option value=Red>Red</option>
				<option value=Violet>Violet</option>
				<option value=White>White</option>
				<option value=Yellow>Yellow</option>
			</select></td>
			</tr><tr>
			<th>Custom border color (HEX)</th>
			<td><input class=ci3 name=itemstyle_custom_border_color value=# size=20></td>
			</tr><tr>
			<th>Width</th>
			<td><input class=ci3 name=itemstyle_border_width size=2></td>
			</tr>
			</table>
		</div></td>
		</tr><tr>
		<td colspan=2><p class=cp22><input class=ci4 type=button onclick="style_dlg_hide('style_div','itemstyle_img_div');" value=Apply>&nbsp;&nbsp;<input class=ci4 type=button value=Cancel onclick="style_dlg_hide('style_div','itemstyle_img_div',true);"></p></td>
		</tr>
		</table>
	</div></td>
	</tr><tr>
	<td colspan=2><p class=cp22><input class=ci4 type=button onclick="add_item('items_div','item_text','items_form');" value=OK>&nbsp;&nbsp;<input class=ci4 type=button onclick="cancel_items_dlg('items_div','items_form');" value=Cancel></td>
	</tr>
	</table>
	</form>
</div></td>
</tr>
<tr>
<td>
<p class=cp10><input class=ci4 type=button onclick="show_items_dlg('items_div',false,false);" value="Add item">&nbsp;&nbsp;<input class=ci4 type=button onclick="show_items_dlg('items_div',true,false);" value="Add child item">&nbsp;&nbsp;<input class=ci4 type=button value="Delete item" onclick="delete_item();">&nbsp;&nbsp;<input class=ci4 type=button value="Edit item" onclick="show_items_dlg('items_div',false,true);"></p>
<p class=cp10>(Select item and click on 'Add item' to add an item below selected item)</p>
<p class=cp10><select class=ci3 id=items name=items size=12 style="min-width:600px;width:600px;max-width:600px;overflow:visible"></select></p>
<h1 class=cp10><font class=cf5>Build the Script</font></h1>
<p class=cp10><input class=ci4 type=button onclick="cttree_build();" value="Build script">&nbsp;&nbsp;&nbsp;<input class=ci4 type=button onclick="reset_form();" value=Reset></p>
<p class=cp10><textarea name=result id=result cols=90 rows=20></textarea></p>
<p class=cp10><input class=ci4 type=button onclick="preview();" value=Preview></p>
</td>
</tr><br />
<b>Fatal error</b>:  Call to undefined function echo_footer() in <b>/var/www/codethat/tree/cttreepro_builder.php</b> on line <b>1760</b><br />