[content-editor name="[cgi ui_name]" type="component"]
[components]

<script language=JavaScript>
function changed (code, field) {
	var name = "changed_" + code;
	cbox = document.getElementById(name);
	cbox.checked = true;
}

function submitted (code) {
	var name = "changed_" + code;
	cbox = document.getElementById(name);
	cbox.checked = false;
	return true;
}

function change_alert (code) {
	if(code.length == 0) {
		code = 'a new component';
	}
	var status;
	status = confirm('You have changed ' + code + ". Choosing OK will lose these changes. Are you sure?");
	return status;
}

function check_change () {
	var el;
	el = document.getElementById('changed_ui_body');
	if(el != undefined && el.checked == true) {
		return change_alert('the component body');
	}
	[comp-list]
	el = document.getElementById('changed_[comp-code]');
	if(el != undefined && el.checked == true) {
		return change_alert('[comp-code]');
	}
	[/comp-list]
	return true;
}

var visdone = new Array;
function visible (index, base) {
	var ai;
	var xi;
	var dosel;
	var selstd = 'dynform';
	var clickstd = 'clicker';

	if(base == undefined || base.length == 0) {
		selbase = selstd;
		clickbase = clickstd;
	}
	else {
		selbase   = base + '_' + selstd;
		clickbase = base + '_' + clickstd;
		var found = 0;
		for(ai = 0; ai < visdone.length; ai++) {
			if (visdone[ai].value == base) {
				found = 1;
				break;
			}
		}
		if(found != 1) 
			visdone[ai] = base;
	}

	selnam =  selbase + index;
	clicknam = clickbase + index;

	for(ai = 0; ai < visdone.length; ai++) {
		sb = visdone[ai] + '_' + selstd;
		cb = visdone[ai] + '_' + clickstd;
		for( xi = 0; ; xi++) {
			nam = sb + xi;
			cnam = cb + xi;
			var el = document.getElementById(nam);

			if(el == undefined) {
				break;
			}

			el.style.zIndex = 0;
			el.style.visibility = 'Hidden';

			var cel = document.getElementById(cnam);

			if(cel != undefined) {
				cel.style.background = '#FFFFFF';
			}
		}
	}

	for( xi = 0; ; xi++) {
		nam = selstd + xi;
		cnam = clickstd + xi;
		var el = document.getElementById(nam);

		if(el == undefined) {
			break;
		}

		el.style.zIndex = 0;
		el.style.visibility = 'Hidden';

		var cel = document.getElementById(cnam);

		if(cel != undefined) {
			cel.style.background = '#FFFFFF';
		}
	}

	if (index < 0) return;

	var element = document.getElementById(selnam);
	var celement = document.getElementById(clicknam);
	element.style.visibility = 'Visible';
	element.style.zIndex = 2;
	if(celement != undefined) {
		celement.style.background = '#EEEEEE';
	}

	return;
}

</script>

[if type=explicit compare="[error all=1 show_var=1 keep=1]"]
<B>[L]The following errors occurred:[/L]<br>
<blockquote>
<FONT color="__CONTRAST__">
	[error all=1 keep=1 show_error=1 show_label=1 joiner="<br>"]
</font>
</blockquote>
[/if]

<form name=overall action="[area @@MV_PAGE@@]" method=POST>
<input type=hidden name="mv_content_op" value="modify_param">
<table>
<tr>
<td valign=top>

[on-match]
<h3>[L]Component Attributes[/L]</h3>
<div align=right>
	[L]Description[/L]:
		<input type=text name=ui_label size=30 value="[comp-param ui_label]"><BR>
	[L]Classes[/L]:
		<input type=text name=ui_class size=30 value="[comp-param ui_class]"><BR>
	[L]Groups[/L]:
		<input type=text name=ui_group size=30 value="[comp-param ui_group]"><br>
	<input type=submit name=mv_click value="[L]Save[/L]" onClick="return check_change()">
</div>
<hr>
[/on-match]

<div id=clicker0 style="border: 1; border-style: thin">
	<h3>[L]Component Body[/L]</h3>
	[L]Action[/L]:
		<A NAME=clicker0
			HREF="javascript:void(0)"
			onClick="visible(0)"
		>[L]edit body[/L]</A>
		<br>
	<INPUT TYPE=checkbox VALUE=1 NAME=changed_ui_body id=changed_ui_body> [L]changed[/L]
</div>
<hr>
<h3>[L]Component Controls[/L]</h3>
[comp-list]
<div id=clicker[comp-increment] style="border: 1; border-style: thin">
[if-comp-param code]
[L]Name[/L]: <A HREF="javascript:void(0)" NAME=clicker[comp-increment] onClick="visible([comp-increment])">[comp-param code]</A><BR>
[L]Label[/L]: [comp-param label]<br>
[L]Widget[/L]: [comp-param type]<br>
[L]Action[/L]: 
<A HREF="[area
		href="@@MV_PAGE@@"
		form=auto
		code="[comp-param code]"
		ui_content_op=delete
		ui_name="[comp-parent name]"
		ui_type=component
]" onClick="return check_change()">[L]delete[/L]</A>&nbsp;&nbsp;
<A HREF="[area
		href="@@MV_PAGE@@"
		form=auto
		ce_motion=up
		code="[comp-param code]"
		ui_content_op=motion
		ui_name="[comp-parent name]"
		ui_type=component
]" onClick="return check_change()">[L]up[/L]</A>&nbsp;&nbsp;
<A HREF="[area
		href="@@MV_PAGE@@"
		form=auto
		ce_motion=down
		code="[comp-param code]"
		ui_content_op=motion
		ui_name="[comp-parent name]"
		ui_type=component
]" onClick="return check_change()">[L]down[/L]</A><BR>
<INPUT TYPE=checkbox VALUE=1 NAME="changed_[comp-param code]" id="changed_[comp-param code]"> [L]changed[/L]
[else]
<A HREF="javascript:void(0)" NAME=clicker[comp-increment] onClick="visible([comp-increment])">[L]Add a new control[/L]</A><BR>
[/else]
[/if-comp-param]
</div>
<p>
[/comp-list]
[on-match]
[set [L]Save[/L]]
ui_content_op=modify_top
mv_click=ce_modify
[/set]
[set [L]Publish[/L]]
ui_content_op=publish
mv_nextpage=__UI_BASE__/content_publish
[/set]
[set [L]Cancel[/L]]
ui_content_op=cancel
mv_nextpage=__UI_BASE__/content
[/set]
<input type=hidden name=ui_name value="[comp-param ui_name]">
<input type=hidden name=ui_type value="component">
<input type=hidden name=ui_source value="[comp-param ui_source]">
<input type=hidden name=mv_action value="return">
<input style="font-weight: bold" type=submit onClick="return check_change()" name=mv_click value="[L]Publish[/L]"> &nbsp;
<input type=submit onClick="return check_change()" name=mv_click value="[L]Cancel[/L]"><br>
[L]New name[/L]: <input type=text name=ui_destination size=22 value="">
</form>
</td>
<td>
<div
    style="
            Position:Relative;
            Left:0; Top:0; Height:100%; Width:100%;
            Visibility:Visible;
            z-index:1;
	">
	<div
		id=dynform0
		style="
				Position:Absolute; 
				Left:2; Top:2; Height:100%; Width:100%;
				Visibility:Visible;
				z-index:2;
			">
[set c_content][comp-param ui_body][/set]

[table-editor
		action=return
		hidden.ui_content_op=modify_body
		hidden.ui_name=[comp-param ui_name]
		hidden.ui_type=component
		item_id=ui_body
		href=silent/ce_modify
		show_reset=1
		nocancel=1
		form-extra=|
			onSubmit="submitted('ui_body')"
			onReset="submitted('ui_body')"
		|
		js_changed=changed
		override.ui_body_text=`$Scratch->{c_content}`
		table=mv_metadata
		ui_data_fields="code ui_body_text"
		notable=1
		top-buttons-rows=1
		no-table-meta=1
		widget.ui_body_text="textarea"
		width.ui_body_text="90"
		height.ui_body_text="42"
		ui_hide_key=1
		view=ui_component
		]
[/on-match]
</div>
[comp-list]
	<div
		id=dynform[comp-increment]
		style="
				Position:Absolute;
				Left:2; Top:2; Width:98%; Height: 98%;
				Visibility: [comp-change 1][condition]1[/condition]Visible[else]Hidden[/else][/comp-change 1]
				z-index:0;
		">
	[comp-param _editor_table]
	</div>
[/comp-list]
</div>
<script>
	visible(0);
</script>
</td>
</tr>
</table>
[/components]
[/content-editor]
