this.rankdata = ( typeof(rankdata) == 'object' ) ? rankdata : {};

    this.wrapperdiv = editor;

    editor.style.width = '100%';

    this.th_head = th_head;

    f_rank_title.editor = this;

    f_rank_title.onkeyup = function()

    {

      this.editor.renderPreview();

    }

      this.editor.renderPreview();

      this.editor.renderPreview();

      this.editor.renderPreview();

    f_rank_color.editor = this;

        this.editor.style_sim_obj.style.color = '#' + this.value;

        this.style.color = '#' + this.editor.determineLightness(this.value);

        this.editor.renderPreview();

      }

      else if ( this.value.length == 0 )

      {

        this.style.backgroundColor = null;

        this.editor.style_sim_obj.style.color = null;

        this.editor.renderPreview();

    // "field": preview

    var tr_preview = document.createElement('tr');

    var td_preview_l = document.createElement('td');

    td_preview_l.className = 'row2';

    td_preview_l.appendChild(document.createTextNode($lang.get('acpur_field_preview')));

    tr_preview.appendChild(td_preview_l);

    var td_preview_f = document.createElement('td');

    td_preview_f.className = 'row2';

    var div_preview = document.createElement('a');

    this.preview_div = div_preview;

    div_preview.style.fontSize = 'x-large';

    div_preview.appendChild(document.createTextNode(''));

    div_preview.firstChild.nodeValue = ( this.editing ) ? this.rankdata.rank_title : '';

    td_preview_f.appendChild(div_preview);

    tr_preview.appendChild(td_preview_f);

    table.appendChild(tr_preview);

    // submit button

    var tr_submit = document.createElement('tr');

    var th_submit = document.createElement('th');

    th_submit.className = 'subhead';

    th_submit.setAttribute('colspan', '2');

    var btn_submit = document.createElement('input');

    btn_submit.type = 'submit';

    btn_submit.value = ( this.editing ) ? $lang.get('acpur_btn_save') : $lang.get('acpur_btn_create_submit');

    btn_submit.editor = this;

    btn_submit.style.fontWeight = 'bold';

    btn_submit.onclick = function(e)

    {

      this.editor.submitEvent(e);

    }

    this.btn_submit = btn_submit;

    th_submit.appendChild(btn_submit);

    // delete button

    if ( this.editing )

    {

      var btn_delete = document.createElement('input');

      btn_delete.type = 'button';

      btn_delete.value = $lang.get('acpur_btn_delete');

      btn_delete.editor = this;

      btn_delete.onclick = function(e)

      {

        this.editor.deleteEvent(e);

      }

      th_submit.appendChild(document.createTextNode(' '));

      th_submit.appendChild(btn_delete);

    }

    tr_submit.appendChild(th_submit);

    table.appendChild(tr_submit);

    // render preview

    this.renderPreview();

  /**

   * Takes the existing editor div and transforms the necessary elements so that it goes from "create" mode to "edit" mode

   * @param object Edit data - same format as the rankdata parameter to the constructor, but we should only need rank_id

   */

  this.transformToEditor = function(rankdata)

  {

    // we need a rank ID

    if ( typeof(rankdata.rank_id) != 'number' )

      return false;

    if ( this.editing )

      return false;

    this.editing = true;

    this.rankdata = rankdata;

    this.rankdata.rank_title = this.f_rank_title.value;

    this.rankdata.rank_style = this.getCSS();

    // transform various controls

    this.th_head.firstChild.nodeValue = $lang.get('acpur_th_edit_rank', {

        rank_title: $lang.get(this.rankdata.rank_title)

      });

    this.btn_submit.value = $lang.get('acpur_btn_save');

    // add the delete button

    var th_submit = this.btn_submit.parentNode;

    var btn_delete = document.createElement('input');

    btn_delete.type = 'button';

    btn_delete.value = $lang.get('acpur_btn_delete');

    btn_delete.editor = this;

    btn_delete.onclick = function(e)

    {

      this.editor.deleteEvent(e);

    }

    th_submit.appendChild(document.createTextNode(' '));

    th_submit.appendChild(btn_delete);

    return true;

  }

  /**

   * Takes a hex color, averages the three channels, and returns either 'ffffff' or '000000' depending on the luminosity of the color.

   * @param string

   * @return string

   */

  this.determineLightness = function(hexval)

  {

    var rgb = this.hex2rgb(hexval);

    var lumin = ( rgb[0] + rgb[1] + rgb[2] ) / 3;

    return ( lumin > 60 ) ? '000000' : 'ffffff';

  }

    return this.style_sim_obj.getAttribute('style');

  }

  this.renderPreview = function()

  {

    if ( !this.preview_div )

      return false;

    var color = ( this.style_sim_obj.style.color ) ? '#' + this.rgb2hex(this.style_sim_obj.style.color) : null;

    this.preview_div.style.color = color;

    this.preview_div.style.fontWeight = this.style_sim_obj.style.fontWeight;

    this.preview_div.style.fontStyle = this.style_sim_obj.style.fontStyle;

    this.preview_div.style.textDecoration = this.style_sim_obj.style.textDecoration;

    this.preview_div.firstChild.nodeValue = $lang.get(this.f_rank_title.value);

  }

  this.submitEvent = function(e)

  {

    if ( this.onsubmit )

    {

      this.onsubmit(e);

    }

    else

    {

      window.console.error('RankEditorControl: no onsubmit event specified');

    }

  }

  this.deleteEvent = function(e)

  {

    if ( this.ondelete )

    {

      this.ondelete(e);

    }

    else

    {

      window.console.error('RankEditorControl: no ondelete event specified');

    }

  /**

   * Get red, green, and blue values for the given hex color

   * @param string

   * @return array (numbered, e.g. not an object

   */

  this.hex2rgb = function(hex)

  {

    hex = hex.replace(/^#/, '');

    if ( hex.length != 3 && hex.length != 6 )

    {

      return hex;

    }

    if ( hex.length == 3 )

    {

      // is there a better way to do this?

      hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);

    }

    hex = [ hex.substr(0, 2), hex.substr(2, 2), hex.substr(4, 2) ];

    var red = parseInt(hex[0], 16);

    var green = parseInt(hex[1], 16);

    var blue = parseInt(hex[2], 16);

    return [red, green, blue];

  }

  load_component('messagebox');

  var json_packet = {

    mode: 'get_rank',

    rank_id: rank_id

  };

  json_packet = ajaxEscape(toJSONString(json_packet));

  ajaxPost(makeUrlNS('Admin', 'UserRanks/action.json'), 'r=' + json_packet, function()

    {

      if ( ajax.readyState == 4 && ajax.status == 200 )

      {

        var response = String(ajax.responseText + '');

        if ( response.substr(0, 1) != '{' )

        {

          handle_invalid_json(ajax.responseText);

          return false;

        }

        try

        {

          var response = parseJSON(ajax.responseText);

        }

        catch(e)

        {

          handle_invalid_json(ajax.responseText);

        }

        var editor = new RankEditorControl(response);

        editor.onsubmit = ajaxRankEditHandleSaveExisting;

        editor.ondelete = ajaxRankEditHandleDelete;

        var container = document.getElementById('admin_ranks_container_right');

        container.innerHTML = '';

        container.appendChild(editor.render());

      }

    }, true);

}

function ajaxInitRankCreate()

{

  load_component('messagebox');

  var editor = new RankEditorControl();

  editor.onsubmit = ajaxRankEditHandleSaveNew;

function ajaxRankEditHandleSave(editor, switch_new)

{

  var whitey = whiteOutElement(editor.wrapperdiv);

  // pack it up, ...

  var json_packet = {

    mode: ( switch_new ) ? 'create_rank' : 'save_rank',

    rank_title: editor.f_rank_title.value,

    rank_style: editor.getCSS()

  }

  if ( !switch_new )

  {

    json_packet.rank_id = editor.rankdata.rank_id;

  }

  /// ... pack it in

  var json_packet = ajaxEscape(toJSONString(json_packet));

  ajaxPost(makeUrlNS('Admin', 'UserRanks/action.json'), 'r=' + json_packet, function()

    {

      if ( ajax.readyState == 4 && ajax.status == 200 )

      {

        var response = String(ajax.responseText + '');

        if ( response.substr(0, 1) != '{' )

        {

          handle_invalid_json(ajax.responseText);

          return false;

        }

        try

        {

          var response = parseJSON(ajax.responseText);

        }

        catch(e)

        {

          handle_invalid_json(ajax.responseText);

        }

        if ( response.mode == 'success' )

        {

          whiteOutReportSuccess(whitey);

          if ( switch_new )

          {