/**

 * Creates a control that can be used to edit a rank.

 */

var RankEditorControl = function(rankdata)

{

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

  if ( !this.rankdata.rank_style )

  {

    this.rankdata.rank_style = '';

  }

  // have the browser parse CSS for us and use an anchor to be as close

  // as possible in calculating CSS

  // this is kind of a hack as it relies on setAttribute/getAttribute in

  // order to obtain stringified versions of CSS data

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

  cssobj.setAttribute('style', this.rankdata.rank_style);

  this.style_sim_obj = cssobj;

  // figure out if we're editing or creating

  this.editing = ( typeof(this.rankdata.rank_id) == 'number' );

  this.render = function()

  {

    var editor = document.createElement('div');

    editor.className = 'tblholder';

    // stash this editor instance in the parent div for later function calls

    editor.editor = this;

    this.wrapperdiv = editor;

    editor.style.width = '100%';

    // tables suck.

    var table = document.createElement('table');

    table.setAttribute('cellspacing', '1');

    table.setAttribute('cellpadding', '4');

    table.setAttribute('width', '100%');

    // heading: "Edit rank: foo" or "Create a new rank"

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

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

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

    if ( this.editing )

    {

      var th_head_string = 'acpur_th_edit_rank';

      var th_head_data = { rank_title: $lang.get(this.rankdata.rank_title) };

    }

    else

    {

      var th_head_string = 'acpur_th_create_rank';

      var th_head_data = { };

    }

    th_head.appendChild(document.createTextNode($lang.get(th_head_string, th_head_data)));

    tr_head.appendChild(th_head);

    this.th_head = th_head;

    table.appendChild(tr_head);

    // row: rank title

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

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

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

    td_title_l.className = td_title_f.className = 'row1';

    td_title_l.appendChild(document.createTextNode($lang.get('acpur_field_rank_title')));

    // field: rank title

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

    f_rank_title.type = 'text';

    f_rank_title.size = '30';

    f_rank_title.value = ( this.editing ) ? this.rankdata.rank_title : '';

    f_rank_title.editor = this;

    f_rank_title.onkeyup = function()

    {

      this.editor.renderPreview();

    }

    this.f_rank_title = f_rank_title;

    td_title_f.appendChild(f_rank_title);

    tr_title.appendChild(td_title_l);

    tr_title.appendChild(td_title_f);

    table.appendChild(tr_title);

    // row: basic style options

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

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

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

    td_basic_l.className = td_basic_f.className = 'row2';

    td_basic_l.appendChild(document.createTextNode($lang.get('acpur_field_style_basic')));

    // fieldset: basic style options

    // field: bold

    var l_basic_bold = document.createElement('label');

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

    f_basic_bold.type = 'checkbox';

    f_basic_bold.checked = ( this.style_sim_obj.style.fontWeight == 'bold' ) ? true : false;

    f_basic_bold.editor = this;

    f_basic_bold.onclick = function()

    {

      this.editor.style_sim_obj.style.fontWeight = ( this.checked ) ? 'bold' : null;

      this.editor.renderPreview();

    }

    l_basic_bold.style.fontWeight = 'bold';

    l_basic_bold.appendChild(f_basic_bold);

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

    l_basic_bold.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_bold')));

    // field: italic

    var l_basic_italic = document.createElement('label');

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

    f_basic_italic.type = 'checkbox';

    f_basic_italic.checked = ( this.style_sim_obj.style.fontStyle == 'italic' ) ? true : false;

    f_basic_italic.editor = this;

    f_basic_italic.onclick = function()

    {

      this.editor.style_sim_obj.style.fontStyle = ( this.checked ) ? 'italic' : null;

      this.editor.renderPreview();

    }

    l_basic_italic.style.fontStyle = 'italic';

    l_basic_italic.appendChild(f_basic_italic);

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

    l_basic_italic.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_italic')));

    // field: underline

    var l_basic_underline = document.createElement('label');

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

    f_basic_underline.type = 'checkbox';

    f_basic_underline.checked = ( this.style_sim_obj.style.textDecoration == 'underline' ) ? true : false;

    f_basic_underline.editor = this;

    f_basic_underline.onclick = function()

    {

      this.editor.style_sim_obj.style.textDecoration = ( this.checked ) ? 'underline' : null;

      this.editor.renderPreview();

    }

    l_basic_underline.style.textDecoration = 'underline';

    l_basic_underline.appendChild(f_basic_underline);

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

    l_basic_underline.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_underline')));

    // finish up formatting row#1

    td_basic_f.appendChild(l_basic_bold);

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

    td_basic_f.appendChild(l_basic_italic);

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

    td_basic_f.appendChild(l_basic_underline);

    tr_basic.appendChild(td_basic_l);

    tr_basic.appendChild(td_basic_f);

    table.appendChild(tr_basic);

    // row: rank color

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

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

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

    td_color_l.className = td_color_f.className = 'row1';

    td_color_l.appendChild(document.createTextNode($lang.get('acpur_field_style_color')));

    // field: rank color

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

    f_rank_color.type = 'text';

    f_rank_color.size = '7';

    f_rank_color.value = ( this.editing ) ? this.rgb2hex(this.style_sim_obj.style.color) : '';

    f_rank_color.style.backgroundColor = this.style_sim_obj.style.color;

    f_rank_color.editor = this;

    this.f_rank_color = f_rank_color;

    f_rank_color.onkeyup = function(e)

    {

      if ( !e.keyCode )

        e = window.event;

      if ( !e )

        return false;

      var chr = (String.fromCharCode(e.keyCode)).toLowerCase();

      this.value = this.value.replace(/[^a-fA-F0-9]/g, '');

      if ( this.value.length > 6 )

      {

        this.value = this.value.substr(0, 6);

      }

      if ( this.value.length == 6 || this.value.length == 3 )

      {

        this.style.backgroundColor = '#' + this.value;

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

      }

    }

    td_color_f.appendChild(f_rank_color);

    tr_color.appendChild(td_color_l);

    tr_color.appendChild(td_color_f);

    table.appendChild(tr_color);

    // field: additional CSS

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

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

    td_css_l.className = 'row2';

    td_css_l.appendChild(document.createTextNode($lang.get('acpur_field_style_css')));

    tr_css.appendChild(td_css_l);

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

    td_css_f.className = 'row2';

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

    f_css.type = 'text';

    f_css.value = this.stripBasicCSSAttributes(this.rankdata.rank_style);

    f_css.style.width = '98%';

    f_css.editor = this;

    f_css.onkeyup = function()

    {

      if ( !(trim(this.value)).match(/^((([a-z-]+):(.+?);)+)?$/) )

        return;

      var newcss = this.editor.stripExtendedCSSAttributes(String(this.editor.style_sim_obj.getAttribute('style'))) + ' ' + this.value;

      this.editor.preview_div.setAttribute('style', 'font-size: x-large; ' + newcss);

      this.editor.style_sim_obj.setAttribute('style', newcss);

    }

    this.f_css = f_css;

    td_css_f.appendChild(f_css);

    tr_css.appendChild(td_css_f);

    table.appendChild(tr_css);

    // "field": preview

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

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

    td_preview_l.className = 'row1';

    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 = 'row1';

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

    // finalize the editor table

    editor.appendChild(table);

    // stash rendered editor

    this.editordiv = editor;

    // send output

    return editor;

  }

  /**

   * 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';

  }

  /**

   * Strips out basic CSS attributes (color, font-weight, font-style, text-decoration) from a snippet of CSS.

   * @param string

   * @return string

   */

  this.stripBasicCSSAttributes = function(css)

  {

    return trim(css.replace(/(color|font-weight|font-style|text-decoration): ?([A-z0-9# ,\(\)]+);/g, ''));

  }

  /**

   * Strips out all but basic CSS attributes.

   * @param string

   * @return string

   */

  this.stripExtendedCSSAttributes = function(css)

  {

    var match;

    var final_css = '';

    var basics = ['color', 'font-weight', 'font-style', 'text-decoration'];

    while ( match = css.match(/([a-z-]+):(.+?);/) )

    {

      if ( in_array(match[1], basics) )

      {

        final_css += ' ' + match[0] + ' ';

      }

      css = css.replace(match[0], '');

    }

    final_css = trim(final_css);

    return final_css;

  }

  this.getCSS = function()

  {

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