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;
        }
      }
    });
}