function ajaxToggleSystemThemes()
{
	var theme_list = document.getElementById('theme_list_edit');
	var mode = ( theme_list.sys_shown ) ? 'hide' : 'show';
	for ( var i = 0; i < theme_list.childNodes.length; i++ )
	{
		var child = theme_list.childNodes[i];
		if ( child.tagName == 'DIV' )
		{
			if ( $dynano(child).hasClass('themebutton_theme_system') )
			{
				if ( $dynano(child).hasClass('themebutton_theme_disabled') )
				{
					$dynano(child).rmClass('themebutton_theme_disabled')
				}
				if ( mode == 'show' )
				{
					domObjChangeOpac(0, child);
					child.style.display = 'block';
					domOpacity(child, 0, 100, 1000);
				}
				else
				{
					domOpacity(child, 100, 0, 1000);
					setTimeout("document.getElementById('" + child.id + "').style.display = 'none';", 1050);
				}
			}
		}
	}
	theme_list.sys_shown = ( mode == 'show' );
	document.getElementById('systheme_toggler').innerHTML = ( mode == 'hide' ) ? $lang.get('acptm_btn_system_themes_show') : $lang.get('acptm_btn_system_themes_hide');
}

function ajaxInstallTheme(theme_id)
{
	var thediv = document.getElementById('themebtn_install_' + theme_id);
	if ( !thediv )
		return false;
	thediv.removeChild(thediv.getElementsByTagName('a')[0]);
	var status = document.createElement('div');
	status.className = 'status';
	thediv.appendChild(status);
	
	var req = toJSONString({
			mode: 'install',
			theme_id: theme_id
		});
	// we've finished nukeing the existing interface, request editor data
	ajaxPost(makeUrlNS('Admin', 'ThemeManager/action.json'), 'r=' + ajaxEscape(req), function(ajax)
		{
			if ( ajax.readyState == 4 && ajax.status == 200 )
			{
				var response = String(ajax.responseText + '');
				if ( response.substr(0, 1) == '{' )
				{
					response = parseJSON(response);
					if ( response.mode == 'error' )
					{
						alert(response.error);
						return false;
					}
				}
				
				var theme_list = document.getElementById('theme_list_edit');
	
				var btn = document.createElement('div');
				btn.className = 'themebutton';
				btn.style.backgroundImage = thediv.style.backgroundImage;
				btn.id = 'themebtn_edit_' + theme_id;
				
				var a = document.createElement('a');
				a.className = 'tb-inner';
				a.appendChild(document.createTextNode($lang.get('acptm_btn_theme_edit')));
				a.appendChild(document.createTextNode("\n"));
				a.theme_id = theme_id;
				a.onclick = function()
				{
					ajaxEditTheme(this.theme_id);
					return false;
				}
				a.href = '#';
				var span = document.createElement('span');
				span.className = 'themename';
				span.appendChild(document.createTextNode(thediv.getAttribute('enano:themename')));
				a.appendChild(span);
				btn.appendChild(a);
				btn.setAttribute('enano:themename', thediv.getAttribute('enano:themename'));
				theme_list.appendChild(btn);
				
				thediv.parentNode.removeChild(thediv);
			}
		});
}

function ajaxEditTheme(theme_id)
{
	// Fade out and subsequently destroy the entire list, then make an
	// ajax request to the theme manager for the theme info via JSON
	var theme_list = document.getElementById('theme_list_edit').parentNode;
	var backgroundImage = document.getElementById('themebtn_edit_' + theme_id).style.backgroundImage;
	/*
	for ( var i = 0; i < theme_list.childNodes.length; i++ )
	{
		var el = theme_list.childNodes[i];
		if ( el.tagName )
			domOpacity(el, 100, 0, 1000);
	}
	*/
	var thediv = document.getElementById('themebtn_edit_' + theme_id);
	if ( !thediv )
		return false;
	thediv.removeChild(thediv.getElementsByTagName('a')[0]);
	var status = document.createElement('div');
	status.className = 'status';
	thediv.appendChild(status);
	
	setTimeout(function()
		{
			var req = toJSONString({
					mode: 'fetch_theme',
					theme_id: theme_id
				});
			// we've finished nukeing the existing interface, request editor data
			ajaxPost(makeUrlNS('Admin', 'ThemeManager/action.json'), 'r=' + ajaxEscape(req), function(ajax)
				{
					if ( ajax.readyState == 4 && ajax.status == 200 )
					{
						theme_list.innerHTML = '';
						var response = String(ajax.responseText + '');
						if ( !check_json_response(response) )
						{
							alert(response);
							return false;
						}
						response = parseJSON(response);
						if ( response.mode == 'error' )
						{
							alert(response.error);
							return false;
						}
						response.background_image = backgroundImage;
						ajaxBuildThemeEditor(response, theme_list);
					}
				});
		}, 200);
}

function ajaxBuildThemeEditor(data, target)
{
	// Build the theme editor interface
	// Init opacity
	domObjChangeOpac(0, target);
	
	// Theme preview
	var preview = document.createElement('div');
	preview.style.border = '1px solid #F0F0F0';
	preview.style.padding = '5px';
	preview.style.width = '216px';
	preview.style.height = '150px';
	preview.style.backgroundImage = data.background_image;
	preview.style.backgroundRepeat = 'no-repeat';
	preview.style.backgroundPosition = 'center center';
	preview.style.cssFloat = 'right';
	preview.style.styleFloat = 'right';
	
	target.appendChild(preview);
	
	// Heading
	var h3 = document.createElement('h3');
	h3.appendChild(document.createTextNode($lang.get('acptm_heading_theme_edit', { theme_name: data.theme_name })));
	target.appendChild(h3);
	
	// Field: Theme name
	var l_name = document.createElement('label');
	l_name.appendChild(document.createTextNode($lang.get('acptm_field_theme_name') + ' '));
	var f_name = document.createElement('input');
	f_name.type = 'text';
	f_name.id = 'themeed_field_name';
	f_name.value = data.theme_name;
	f_name.size = '40';
	l_name.appendChild(f_name);
	target.appendChild(l_name);
	
	target.appendChild(document.createElement('br'));
	target.appendChild(document.createElement('br'));
	
	// Field: default style
	var l_style = document.createElement('label');
	l_style.appendChild(document.createTextNode($lang.get('acptm_field_default_style') + ' '));
	var f_style = document.createElement('select');
	f_style.id = 'themeed_field_style';
	var opts = [];
	for ( var i = 0; i < data.css.length; i++ )
	{
		if ( data.css[i] == '_printable' )
			continue;
		
		opts[i] = document.createElement('option');
		opts[i].value = data.css[i];
		opts[i].appendChild(document.createTextNode(data.css[i]));
		if ( data.default_style == data.css[i] )
		{
			opts[i].selected = true;
		}
		f_style.appendChild(opts[i]);
	}
	l_style.appendChild(f_style);
	target.appendChild(l_style);
	
	target.appendChild(document.createElement('br'));
	target.appendChild(document.createElement('br'));
	
	// Default theme
	target.appendChild(document.createTextNode($lang.get('acptm_field_default_theme') + ' '));
	if ( data.is_default )
	{
		var l_default = document.createElement('b');
		l_default.appendChild(document.createTextNode($lang.get('acptm_field_default_msg_current')));
	}
	else
	{
		var l_default = document.createElement('label');
		var f_default = document.createElement('input');
		f_default.type = 'checkbox';
		f_default.id = 'themeed_field_default';
		l_default.appendChild(f_default);
		l_default.appendChild(document.createTextNode($lang.get('acptm_field_default_btn_make_default')));
	}
	target.appendChild(l_default);
	
	target.appendChild(document.createElement('br'));
	target.appendChild(document.createElement('br'));
	
	// Disable theme
	var disable_span = document.createElement('span');
	disable_span.appendChild(document.createTextNode($lang.get('acptm_field_disable_title') + ' '));
	target.appendChild(disable_span);
	var l_disable = document.createElement('label');
	var f_disable = document.createElement('input');
	f_disable.type = 'checkbox';
	f_disable.id = 'themeed_field_disable';
	if ( !data.enabled )
		f_disable.setAttribute('checked', 'checked');
	l_disable.style.fontWeight = 'bold';
	l_disable.appendChild(f_disable);
	l_disable.appendChild(document.createTextNode($lang.get('acptm_field_disable')));
	target.appendChild(l_disable);
	
	// Availability policy
	var h3 = document.createElement('h3');
	h3.appendChild(document.createTextNode($lang.get('acptm_heading_theme_groups')));
	target.appendChild(h3);
	
	// Label for the whole field
	var p_d_policy = document.createElement('p');
	p_d_policy.style.fontWeight = 'bold';
	p_d_policy.appendChild(document.createTextNode($lang.get('acptm_field_policy')));
	target.appendChild(p_d_policy);
	
	// Wrapper for options
	var p_f_policy = document.createElement('p');
	
	// Option: allow all
	var l_policy_allow_all = document.createElement('label');
	var f_policy_allow_all = document.createElement('input');
	f_policy_allow_all.type = 'radio';
	f_policy_allow_all.id = 'themeed_field_policy_allow_all';
	f_policy_allow_all.name = 'themeed_field_policy';
	f_policy_allow_all.value = 'allow_all';
	l_policy_allow_all.appendChild(f_policy_allow_all);
	l_policy_allow_all.appendChild(document.createTextNode(' ' + $lang.get('acptm_field_policy_allow_all')));
	if ( data.group_policy == 'allow_all' )
	{
		f_policy_allow_all.setAttribute('checked', 'checked');
	}
	
	// Option: whitelist
	var l_policy_whitelist = document.createElement('label');
	var f_policy_whitelist = document.createElement('input');
	f_policy_whitelist.type = 'radio';
	f_policy_whitelist.id = 'themeed_field_policy_whitelist';
	f_policy_whitelist.name = 'themeed_field_policy';
	f_policy_whitelist.value = 'whitelist';
	l_policy_whitelist.appendChild(f_policy_whitelist);
	l_policy_whitelist.appendChild(document.createTextNode(' ' + $lang.get('acptm_field_policy_whitelist')));
	if ( data.group_policy == 'whitelist' )
	{
		f_policy_whitelist.setAttribute('checked', 'checked');
	}
	
	// Option: blacklist
	var l_policy_blacklist = document.createElement('label');
	var f_policy_blacklist = document.createElement('input');
	f_policy_blacklist.type = 'radio';
	f_policy_blacklist.id = 'themeed_field_policy_blacklist';
	f_policy_blacklist.name = 'themeed_field_policy';
	f_policy_blacklist.value = 'blacklist';
	l_policy_blacklist.appendChild(f_policy_blacklist);
	l_policy_blacklist.appendChild(document.createTextNode(' ' + $lang.get('acptm_field_policy_blacklist')));
	if ( data.group_policy == 'blacklist' )
	{
		f_policy_blacklist.setAttribute('checked', 'checked');
	}
	f_policy_allow_all.onclick = ajaxThemeManagerHandlePolicyClick;
	f_policy_whitelist.onclick = ajaxThemeManagerHandlePolicyClick;
	f_policy_blacklist.onclick = ajaxThemeManagerHandlePolicyClick;
	
	p_f_policy.appendChild(l_policy_allow_all);
	p_f_policy.appendChild(document.createElement('br'));
	p_f_policy.appendChild(l_policy_whitelist);
	p_f_policy.appendChild(document.createElement('br'));
	p_f_policy.appendChild(l_policy_blacklist);
	
	target.appendChild(p_d_policy);
	target.appendChild(p_f_policy);
	
	var div_acl = document.createElement('div');
	div_acl.id = 'themeed_acl_box';
	div_acl.style.margin = '0 0 10px 30px';
	
	var h3_g = document.createElement('h3');
	h3_g.appendChild(document.createTextNode($lang.get('acptm_field_acl_heading_groups')));
	div_acl.appendChild(h3_g);
	
	var div_groups = document.createElement('div');
	div_groups.style.border = '1px solid #E8E8E8';
	div_groups.id = 'themeed_group_list';
	
	// Group list
	for ( var i in data.group_names )
	{
		var g_name = data.group_names[i];
		var check = document.createElement('input');
		check.type = 'checkbox';
		if ( in_array("g:" + i, data.group_list) )
		{
			check.setAttribute('checked', 'checked');
		}
		check.group_id = parseInt(i);
		var lbl_g_acl = document.createElement('label');
		lbl_g_acl.appendChild(check);
		var str = 'groupcp_grp_' + g_name.toLowerCase();
		var g_name_l10n = ( $lang.get(str) != str ) ? $lang.get(str) : g_name;
		lbl_g_acl.appendChild(document.createTextNode(g_name_l10n));
		div_groups.appendChild(lbl_g_acl);
		div_groups.appendChild(document.createElement('br'));
	}
	div_acl.appendChild(div_groups);
	
	var h3_u = document.createElement('h3');
	h3_u.appendChild(document.createTextNode($lang.get('acptm_field_acl_heading_users')));
	div_acl.appendChild(h3_u);
	
	// User addition field
	var frm = document.createElement('form');
	frm.action = 'javascript:ajaxThemeManagerHandleUserAdd();';
	frm.appendChild(document.createTextNode($lang.get('acptm_field_acl_add_user')));
	var f_useradd = document.createElement('input');
	f_useradd.type = 'text';
	f_useradd.id = 'themeed_field_adduser';
	f_useradd.onkeyup = function(e)
	{
		new AutofillUsername(this, e, false);
	}
	
	frm.appendChild(f_useradd);
	div_acl.appendChild(frm);
	
	div_acl.appendChild(document.createElement('br'));
	
	// User list
	var div_users = document.createElement('div');
	div_users.style.border = '1px solid #E8E8E8';
	div_users.style.padding = '4px';
	div_users.id = 'themeed_user_list';
	for ( var i = 0; i < data.group_list.length; i++ )
	{
		var id = data.group_list[i];
		if ( id.substr(0, 2) != 'u:' )
			continue;
		var uid = id.substr(2);
		var username = data.usernames[uid];
		
		var useritem = document.createElement('span');
		useritem.appendChild(document.createTextNode(username + ' '));
		useritem.userid = parseInt(uid);
		var deleter = document.createElement('a');
		deleter.href = '#';
		deleter.onclick = function()
		{
			ajaxThemeManagerHandleUserRemoval(this);
			return false;
		}
		deleter.appendChild(document.createTextNode('[X]'));
		useritem.appendChild(deleter);
		div_users.appendChild(useritem);
		div_users.appendChild(document.createElement('br'));
	}
	div_acl.appendChild(div_users);
	
	target.appendChild(div_acl);
	
	ajaxThemeManagerHandlePolicyClick();
	
	var clearer = document.createElement('span');
	clearer.className = 'menuclear';
	target.appendChild(clearer);
	
	// Theme ID
	var tid = document.createElement('input');
	tid.type = 'hidden';
	tid.id = 'themeed_theme_id';
	tid.value = data.theme_id;
	target.appendChild(tid);
	
	// Save button
	var raquo = unescape('%BB');
	var savebtn = document.createElement('input');
	savebtn.type = 'button';
	savebtn.style.fontWeight = 'bold';
	savebtn.value = $lang.get('etc_save_changes') + ' ' + raquo;
	savebtn.onclick = function()
	{
		ajaxThemeManagerHandleSaveRequest();
	}
	target.appendChild(savebtn);
	
	target.appendChild(document.createTextNode(' '));
	
	// Cancel button
	var savebtn = document.createElement('input');
	savebtn.type = 'button';
	savebtn.value = $lang.get('etc_cancel');
	savebtn.onclick = function()
	{
		ajaxPage(namespace_list['Admin'] + 'ThemeManager');
	}
	target.appendChild(savebtn);
	
	target.appendChild(document.createTextNode(' '));
	
	// Uninstall button
	var savebtn = document.createElement('input');
	savebtn.type = 'button';
	savebtn.value = $lang.get('acptm_btn_uninstall_theme');
	savebtn.style.color = '#D84308';
	savebtn.onclick = function()
	{
		if ( !confirm($lang.get('acptm_msg_uninstall_confirm')) )
			return false;
		ajaxThemeManagerHandleUninstallClick();
	}
	target.appendChild(savebtn);
	
	// Fade it all in
	domOpacity(target, 0, 100, 500);
	f_name.focus();
}

function ajaxThemeManagerHandlePolicyClick()
{
	if ( document.getElementById('themeed_field_policy_allow_all').checked )
	{
		document.getElementById('themeed_acl_box').style.display = 'none';
	}
	else if ( document.getElementById('themeed_field_policy_whitelist').checked || document.getElementById('themeed_field_policy_blacklist').checked )
	{
		document.getElementById('themeed_acl_box').style.display = 'block';
	}
}

function ajaxThemeManagerHandleUserAdd()
{
	var f_useradd = document.getElementById('themeed_field_adduser');
	f_useradd.setAttribute('disabled', 'disabled');
	var parent = f_useradd.parentNode;
	var img = document.createElement('img');
	img.src = ajax_load_icon;
	img.id = 'themeed_useradd_status';
	img.style.marginLeft = '10px';
	insertAfter(parent, img, f_useradd);
	
	var req = toJSONString({
			mode: 'uid_lookup',
			username: f_useradd.value
		});
	ajaxPost(makeUrlNS('Admin', 'ThemeManager/action.json'), 'r=' + ajaxEscape(req), function(ajax)
		{
			if ( ajax.readyState == 4 && ajax.status == 200 )
			{
				var img = document.getElementById('themeed_useradd_status');
				var f_useradd = document.getElementById('themeed_field_adduser');
				
				f_useradd.disabled = null;
				img.parentNode.removeChild(img);
				
				// process response
				var response = String(ajax.responseText + '');
				if ( !check_json_response(response) )
				{
					alert(response);
					return false;
				}
				response = parseJSON(response);
				if ( response.mode == 'error' )
				{
					alert(response.error);
					return false;
				}
						
				var uid = parseInt(response.uid);
				var username = response.username;
				
				// Loop through the list of users and remove any existing ones with the same uid
				var div_users = document.getElementById('themeed_user_list');
				var children = div_users.getElementsByTagName('span');
				for ( var i = 0; i < children.length; i++ )
				{
					var child = children[i];
					if ( child.userid == uid )
					{
						// the sister is the br element next to the span with the checkbox/text
						var sister = child.nextSibling;
						div_users.removeChild(child);
						div_users.removeChild(sister);
						break;
					}
				}
				
				var useritem = document.createElement('span');
				useritem.appendChild(document.createTextNode(username + ' '));
				useritem.userid = parseInt(uid);
				var deleter = document.createElement('a');
				deleter.href = '#';
				deleter.onclick = function()
				{
					ajaxThemeManagerHandleUserRemoval(this);
					return false;
				}
				deleter.appendChild(document.createTextNode('[X]'));
				useritem.appendChild(deleter);
				div_users.appendChild(useritem);
				div_users.appendChild(document.createElement('br'));
			}
		});
}

function ajaxThemeManagerHandleUserRemoval(el)
{
	var parent = el.parentNode;
	var uid = parent.userid;
	
	var grandparent = parent.parentNode;
	var sister = parent.nextSibling;
	grandparent.removeChild(parent);
	grandparent.removeChild(sister);
}

function ajaxThemeManagerHandleSaveRequest()
{
	// Build a JSON condensed request
	var md = false;
	if ( document.getElementById('themeed_field_default') )
	{
		if ( document.getElementById('themeed_field_default').checked )
		{
			md = true;
		}
	}
	var policy = 'allow_all';
	if ( document.getElementById('themeed_field_policy_whitelist').checked )
		policy = 'whitelist';
	else if ( document.getElementById('themeed_field_policy_blacklist').checked )
		policy = 'blacklist';
	var json_packet = {
		theme_id: document.getElementById('themeed_theme_id').value,
		theme_name: document.getElementById('themeed_field_name').value,
		default_style: document.getElementById('themeed_field_style').value,
		make_default: md,
		group_policy: policy,
		enabled: ( document.getElementById('themeed_field_disable').checked ? false : true )
	};
	var acl_list = [];
	var checks = document.getElementById('themeed_group_list').getElementsByTagName('input');
	for ( var i = 0; i < checks.length; i++ )
	{
		if ( checks[i].checked )
			acl_list.push('g:' + checks[i].group_id);
	}
	var spans = document.getElementById('themeed_user_list').getElementsByTagName('span');
	for ( var i = 0; i < spans.length; i++ )
	{
		if ( spans[i].userid )
			acl_list.push('u:' + spans[i].userid);
	}
	json_packet.group_list = acl_list;
	
	var json_send = {
		mode: 'save_theme',
		theme_data: json_packet
	};
	
	json_send = ajaxEscape(toJSONString(json_send));
	
	// Request the save
	var parent = document.getElementById('ajaxPageContainer');
	ajaxPost(makeUrlNS('Admin', 'ThemeManager/action.json'), 'r=' + json_send, function(ajax)
		{
			if ( ajax.readyState == 4 && ajax.status == 200 )
			{
				// process response
				var response = String(ajax.responseText + '');
				if ( !check_json_response(response) )
				{
					// For this we actually *expect* an HTML response.
					parent.innerHTML = response;
					return false;
				}
				response = parseJSON(response);
				if ( response.mode == 'error' )
				{
					alert(response.error);
					return false;
				}
			}
		});
}

function ajaxThemeManagerHandleUninstallClick()
{
	var theme_id = document.getElementById('themeed_theme_id').value;
	var json_send = {
		mode: 'uninstall',
		theme_id: theme_id
	};
	
	json_send = ajaxEscape(toJSONString(json_send));
	
	// Request the action
	var parent = document.getElementById('ajaxPageContainer');
	ajaxPost(makeUrlNS('Admin', 'ThemeManager/action.json'), 'r=' + json_send, function(ajax)
		{
			if ( ajax.readyState == 4 && ajax.status == 200 )
			{
				// process response
				var response = String(ajax.responseText + '');
				if ( !check_json_response(response) )
				{
					// For this we actually *expect* an HTML response.
					parent.innerHTML = response;
					return false;
				}
				response = parseJSON(response);
				if ( response.mode == 'error' )
				{
					alert(response.error);
					return false;
				}
			}
		});
}