Coding Help

I have a button with an image beside it. Onclick, it should switch to another image, then back.

View it at my test page http://www.billiardscores.com/

Throw some text in the box, and click the button.....You'll notice that while the spell checker is working, a SECOND image appears. I want it to REPLACE the initial image. This is controlled by the second last function in the following code.... (andalso a few above it...) ANY help is appreaciated.

var GOOGIE_CUR_LANG = null;
var GOOGIE_DEFAULT_LANG = "en";

function GoogieSpell(img_dir, server_url) {
  var cookie_value;
  var lang;
  cookie_value = getCookie('language');

  if(cookie_value != null)
    GOOGIE_CUR_LANG = cookie_value;
  else
    GOOGIE_CUR_LANG = GOOGIE_DEFAULT_LANG;

  this.img_dir = img_dir;
  this.server_url = server_url;

  this.org_lang_to_word = {"en": "English"};
  this.lang_to_word = this.org_lang_to_word;
  this.langlist_codes = AJS.keys(this.lang_to_word);

  this.show_change_lang_pic = false;
  this.change_lang_pic_placement = "left";

  this.report_state_change = true;

  this.lang_chck_spell = "<input type='button' value='Spell Check' />";
  this.lang_rsm_edt = "<input type='button' value='Check Errors' />";
  this.lang_no_error_found = "<input type='button' value='Spelling Ok' />";
  this.lang_revert = "Revert to - ";
  this.lang_close = "Close Menu";
  this.lang_no_suggestions = "Sorry, no suggestions found";
  
  this.show_spell_img = true;  
  this.decoration = true;
  this.use_close_btn = true;
  this.edit_layer_dbl_click = true;
  this.report_ta_not_found = false;

  //Extensions
  this.custom_ajax_error = null;
  this.custom_no_spelling_error = null;
  this.custom_menu_builder = []; //Should take an eval function and a build menu function
  this.custom_item_evaulator = null; //Should take an eval function and a build menu function
  this.extra_menu_items = [];
  this.custom_spellcheck_starter = null;
  this.main_controller = true;

  //Observers
  this.lang_state_observer = null;
  this.spelling_state_observer = null;
  this.show_menu_observer = null;
  this.all_errors_fixed_observer = null;


GoogieSpell.prototype.setSpellContainer = function(elm) {
  this.spell_container = AJS.$(elm);
}

GoogieSpell.prototype.setLanguages = function(lang_dict) {
  this.lang_to_word = lang_dict;
  this.langlist_codes = AJS.keys(lang_dict);
}

GoogieSpell.prototype.setForceWidthHeight = function(width, height) {
  this.force_width = width;
  this.force_height = height;
}

GoogieSpell.prototype.setDecoration = function(bool) {
  this.decoration = bool;
}

GoogieSpell.prototype.dontUseCloseButtons = function() {
  this.use_close_btn = true;
}

GoogieSpell.prototype.appendNewMenuItem = function(name, call_back_fn, checker) {
  this.extra_menu_items.push([name, call_back_fn, checker]);
}

GoogieSpell.prototype.appendCustomMenuBuilder = function(eval, builder) {
  this.custom_menu_builder.push([eval, builder]);
}


GoogieSpell.prototype.setStateChanged = function(current_state) {
  this.state = current_state;
  if(this.spelling_state_observer != null && this.report_state_change)
    this.spelling_state_observer(current_state, this);
}

GoogieSpell.prototype.setReportStateChange = function(bool) {
  this.report_state_change = bool;
}

GoogieSpell.prototype.getGoogleUrl = function() {
  return this.server_url + GOOGIE_CUR_LANG;
}

// need .replace(/—/g, "—")
GoogieSpell.escapeSepcial = function(val) {
  return val.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

GoogieSpell.createXMLReq = function (text) {
  return '<?xml version="1.0" encoding="utf-8" ?><spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1"><text>' + text + '</text></spellrequest>';
}

GoogieSpell.prototype.spellCheck = function(ignore) {
  var me = this;

  this.cnt_errors_fixed = 0;
  this.cnt_errors = 0;
  this.setStateChanged("checking_spell");

  if(this.main_controller)
    this.appendIndicator(this.spell_span);

  this.error_links = [];
  this.ta_scroll_top = this.text_area.scrollTop;

  try { this.hideLangWindow(); }
  catch(e) {}
  
  this.createEditLayer(this.text_area.offsetWidth, this.text_area.offsetHeight);

  this.createErrorWindow();
  AJS.getBody().appendChild(this.error_window);

  try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } 
  catch (e) { }

  if(this.main_controller)
    this.spell_span.onclick = null;

  this.orginal_text = this.text_area.value;

  if(this.text_area.value == '' || ignore) {
    if(!me.custom_no_spelling_error)
      me.flashNoSpellingErrorState();
    else
      me.custom_no_spelling_error(me);
    me.removeIndicator();
    return ;
  }

GoogieSpell.prototype.showErrorWindow = function(elm, id) {
  if(this.show_menu_observer)
    this.show_menu_observer(this);
  var me = this;

  var abs_pos = AJS.absolutePosition(elm);
  abs_pos.y -= this.edit_layer.scrollTop;
  this.error_window.style.visibility = "visible";

  AJS.setTop(this.error_window, (abs_pos.y+20));
  AJS.setLeft(this.error_window, (abs_pos.x));

  this.error_window.innerHTML = "";

  var table = AJS.TABLE({'class': 'googie_list'});
  table.googie_action_btn = "1";
  var list = AJS.TBODY();

  //Check if we should use custom menu builder, if not we use the default
  var changed = false;
  if(this.custom_menu_builder != []) {
    for(var k=0; k<this.custom_menu_builder.length; k++) {
      var eb = this.custom_menu_builder[k];
      if(eb[0]((this.results[id]))){
        changed = eb[1](this, list, elm);
        break;
      }
    }
  }
  if(!changed) {
    //Build up the result list
    var suggestions = this.results[id]['suggestions'];
    var offset = this.results[id]['attrs']['o'];
    var len = this.results[id]['attrs']['l'];

    if(suggestions.length == 0) {
      var row = AJS.TR();
      var item = AJS.TD({'style': 'cursor: default;'});
      var dummy = AJS.SPAN();
      dummy.innerHTML = this.lang_no_suggestions;
      AJS.ACN(item, AJS.TN(dummy.innerHTML));
      item.googie_action_btn = "1";
      row.appendChild(item);
      list.appendChild(row);
    }

    for(i=0; i < suggestions.length; i++) {
      var row = AJS.TR();
      var item = AJS.TD();
      var dummy = AJS.SPAN();
      dummy.innerHTML = suggestions[i];
      item.appendChild(AJS.TN(dummy.innerHTML));
      
      var fn = function(e) {
        var l_elm = AJS.getEventElm(e);
        this.correctError(id, elm, l_elm);
      };

      AJS.AEV(item, "click", AJS.$b(fn, this));

      item.onmouseover = GoogieSpell.item_onmouseover;
      item.onmouseout = GoogieSpell.item_onmouseout;
      row.appendChild(item);
      list.appendChild(row);
    }

    //The element is changed, append the revert
    if(elm.is_changed && elm.innerHTML != elm.old_value) {
      var old_value = elm.old_value;
      var revert_row = AJS.TR();
      var revert = AJS.TD();

      revert.onmouseover = GoogieSpell.item_onmouseover;
      revert.onmouseout = GoogieSpell.item_onmouseout;
      var rev_span = AJS.SPAN({'class': 'googie_list_revert'});
      rev_span.innerHTML = this.lang_revert + " " + old_value;
      revert.appendChild(rev_span);

      var fn = function(e) { 
        this.updateOrginalText(offset, elm.innerHTML, old_value, id);
        elm.is_corrected = true;
        elm.style.color = "#cc0000";
        elm.innerHTML = old_value;
        this.hideErrorWindow();
      };
      AJS.AEV(revert, "click", AJS.$b(fn, this));

      revert_row.appendChild(revert);
      list.appendChild(revert_row);
    }
    
    //Append the edit box
    var edit_row = AJS.TR();
    var edit = AJS.TD({'style': 'cursor: default'});

    var edit_input = AJS.INPUT({'style': 'width: 97%; cursor: default;', 'value': elm.innerHTML});
    edit_input.googie_action_btn = "1";

    var onsub = function () {
      if(edit_input.value != "") {
        if(!AJS.isDefined(elm.old_value))
          this.saveOldValue(elm, elm.innerHTML);

        this.updateOrginalText(offset, elm.innerHTML, edit_input.value, id);
        elm.style.color = "#99cc66"
        elm.is_corrected = true;
        elm.innerHTML = edit_input.value;
        
        this.hideErrorWindow();
      }
      return false;
    };
    onsub = AJS.$b(onsub, this);
    
    var ok_pic = AJS.IMG({'src': this.img_dir + "ok.gif", 'style': 'width: 32px; height: 16px; margin-left: 0px; margin-top: 2px; cursor: pointer;'});
    var edit_form = AJS.FORM({'style': 'margin: 0; padding: 0; cursor: default;'}, edit_input, ok_pic);

    edit_form.googie_action_btn = "1";
    edit.googie_action_btn = "1";

    AJS.AEV(edit_form, "submit", onsub);
    AJS.AEV(ok_pic, "click", onsub);
    
    edit.appendChild(edit_form);
    edit_row.appendChild(edit);
    list.appendChild(edit_row);

    //Append extra menu items
    if(this.extra_menu_items.length > 0)
      AJS.ACN(list, this.createListSeparator());

    var loop = function(i) {
        if(i < me.extra_menu_items.length) {
          var e_elm = me.extra_menu_items[i];

          if(!e_elm[2] || e_elm[2](elm, me)) {
            var e_row = AJS.TR();
            var e_col = AJS.TD(e_elm[0]);

            e_col.onmouseover = GoogieSpell.item_onmouseover;
            e_col.onmouseout = GoogieSpell.item_onmouseout;

            var fn = function() {
              return e_elm[1](elm, me);
            };
            AJS.AEV(e_col, "click", fn);

            AJS.ACN(e_row, e_col);
            AJS.ACN(list, e_row);

          }
          loop(i+1);
        }
    }
    loop(0);
    loop = null;

    //Close button
    if(this.use_close_btn) {
      AJS.ACN(list, this.createCloseButton(this.hideErrorWindow));
    }
  }

  table.appendChild(list);
  this.error_window.appendChild(table);

  //Dummy for IE - dropdown bug fix
  if(AJS.isIe() && !this.error_window_iframe) {
    var iframe = AJS.IFRAME({'style': 'position: absolute; z-index: 0;'});
    AJS.ACN(AJS.getBody(), iframe);
    this.error_window_iframe = iframe;
  }
  if(AJS.isIe()) {
    var iframe = this.error_window_iframe;
    AJS.setTop(iframe, this.error_window.offsetTop);
    AJS.setLeft(iframe, this.error_window.offsetLeft);

    AJS.setWidth(iframe, this.error_window.offsetWidth);
    AJS.setHeight(iframe, this.error_window.offsetHeight);

    iframe.style.visibility = "visible";
  }

  //Set focus on the last element
  var link = this.createFocusLink('link');
  list.appendChild(AJS.TR(AJS.TD({'style': 'text-align: right; font-size: 1px; height: 1px; margin: 0; padding: 0;'}, link)));
  link.focus();
}


//////
// Edit layer (the layer where the suggestions are stored)
//////
GoogieSpell.prototype.createEditLayer = function(width, height) {
  this.edit_layer = AJS.DIV({'class': 'googie_edit_layer'});

//Set the style so it looks like edit areas
	this.edit_layer.className = this.text_area.className;
	this.edit_layer.style.font = "15px arial, verdana, sans-serif";
	this.edit_layer.style.border = "1px solid #7f9db9";
	this.edit_layer.style.backgroundColor = "#dce4ec";
	this.edit_layer.style.padding = "4px";
	this.edit_layer.style.whiteSpace = "normal";	
	this.edit_layer.style.margin = "0px";


  AJS.setWidth(this.edit_layer, (width-8));

  if(AJS.nodeName(this.text_area) != "input" || this.text_area.value == "") {
    this.edit_layer.style.overflow = "auto";
    AJS.setHeight(this.edit_layer, (height-6));
  }
  else {
    this.edit_layer.style.overflow = "auto";
  }

  if(this.edit_layer_dbl_click) {
    var me = this;
    var fn = function(e) {
      if(AJS.getEventElm(e).className != "googie_link" && !me.isErrorWindowShown()) {
        me.resumeEditing();
        var fn1 = function() {
          me.text_area.focus();
          fn1 = null;
        };
        AJS.callLater(fn1, 10);
      }
      return false;
    };
    this.edit_layer.ondblclick = fn;
    fn = null;
  }
}

GoogieSpell.prototype.resumeEditing = function() {
  this.setStateChanged("spell_check");
  this.switch_lan_pic.style.display = "inline";

  this.el_scroll_top = this.edit_layer.scrollTop;

  this.hideErrorWindow();

  //Remove the EDIT_LAYER
  try {
    this.edit_layer.parentNode.removeChild(this.edit_layer);
    if(this.use_focus) {
      AJS.removeElement(this.focus_link_t);
      AJS.removeElement(this.focus_link_b);
    }
  }
  catch(e) {
  }

  AJS.showElement(this.text_area);

  if(this.main_controller)
    this.spell_span.className = "googie_no_style";

  this.text_area.scrollTop = this.el_scroll_top;

  elm.onmouseout = null;

  this.checkSpellingState(false);
}

GoogieSpell.prototype.createErrorLink = function(text, id) {
  var elm = AJS.SPAN({'class': 'googie_link'});
  var me = this;
  var d = function (e) {
    me.showErrorWindow(elm, id);
    d = null;
    return false;
  };
  AJS.AEV(elm, "click", d);

  elm.googie_action_btn = "1";
  elm.g_id = id;
  elm.is_corrected = false;
  elm.oncontextmenu = d;
  elm.innerHTML = text;
  return elm;
}

GoogieSpell.createPart = function(txt_part) {
  if(txt_part == " ")
    return AJS.TN(" ");
  var result = AJS.SPAN();

  var is_first = true;
  var is_safari = (navigator.userAgent.toLowerCase().indexOf("safari") != -1);

  var part = AJS.SPAN();
  txt_part = GoogieSpell.escapeSepcial(txt_part);
  txt_part = txt_part.replace(/\n/g, "<br>");
  txt_part = txt_part.replace(/  /g, " &nbsp;");
  txt_part = txt_part.replace(/^ /g, "&nbsp;");
  txt_part = txt_part.replace(/ $/g, "&nbsp;");
 
  part.innerHTML = txt_part;

  return part;
}

GoogieSpell.prototype.showErrorsInIframe = function() {
  var output = AJS.DIV();
  output.style.textAlign = "left";
  var pointer = 0;
  var results = this.results;

  if(results.length > 0) {
    for(var i=0; i < results.length; i++) {
      var offset = results[i]['attrs']['o'];
      var len = results[i]['attrs']['l'];
      
      var part_1_text = this.orginal_text.substring(pointer, offset);
      var part_1 = GoogieSpell.createPart(part_1_text);
      output.appendChild(part_1);
      pointer += offset - pointer;
      
      //If the last child was an error, then insert some space
      var err_link = this.createErrorLink(this.orginal_text.substr(offset, len), i);
      this.error_links.push(err_link);
      output.appendChild(err_link);
      pointer += len;
    }
    //Insert the rest of the orginal text
    var part_2_text = this.orginal_text.substr(pointer, this.orginal_text.length);

    var part_2 = GoogieSpell.createPart(part_2_text);
    output.appendChild(part_2);
  }
  else
    output.innerHTML = this.orginal_text;

  var me = this;
  if(this.custom_item_evaulator)
    AJS.map(this.error_links, function(elm){me.custom_item_evaulator(me, elm)});
  
  AJS.ACN(this.edit_layer, output);


GoogieSpell.prototype.createSpellDiv = function() {
  var chk_spell = AJS.SPAN({'class': 'googie_check_spelling_link'});

  chk_spell.innerHTML = this.lang_chck_spell;
  var spell_img = null;
  if(this.show_spell_img)
    spell_img = AJS.IMG({'src': this.img_dir + "spell_initial.gif", 'style': 'height: 16px; width: 16px; vertical-align: top;'});
    
  return AJS.SPAN(spell_img, " ",chk_spell);
}


GoogieSpell.prototype.flashNoSpellingErrorState = function(on_finish) {
  var no_spell_errors;

  if(on_finish) {
    var fn = function() {
      on_finish();
      this.checkSpellingState();
    };
    no_spell_errors = fn;
  }
  else
    no_spell_errors = this.checkSpellingState;

  this.setStateChanged("no_error_found");

  if(this.main_controller) {
    AJS.hideElement(this.switch_lan_pic);

    var dummy = AJS.IMG({'src': this.img_dir + "spell_success.gif", 'style': 'height: 16px; width: 16px; vertical-align: top;'});
    var rsm = AJS.SPAN();
    rsm.innerHTML = this.lang_no_error_found;

    AJS.RCN(this.spell_span, AJS.SPAN(dummy, " ",rsm));

    this.spell_span.className = "googie_check_spelling_ok";
    this.spell_span.style.cursor = "default";

    AJS.callLater(AJS.$b(no_spell_errors, this), 1200, [false]);
  }
}

GoogieSpell.prototype.resumeEditingState = function() {
  this.setStateChanged("resume_editing");

  //Change link text to resume
  if(this.main_controller) {
    AJS.hideElement(this.switch_lan_pic);
    var dummy = AJS.IMG({'src': this.img_dir + "spell_errors.gif", 'style': 'height: 16px; width: 16px; vertical-align: top;'});
    var rsm = AJS.SPAN();
    rsm.innerHTML = this.lang_rsm_edt;
    AJS.RCN(this.spell_span, AJS.SPAN(dummy, " ",rsm));
  
    var fn = function(e) {
      this.resumeEditing();
    }
    AJS.AEV(this.spell_span, "click", AJS.$b(fn, this), true);

    this.spell_span.className = "googie_resume_editing";
  }
  try { this.edit_layer.scrollTop = this.ta_scroll_top; }
  catch(e) { }
}

GoogieSpell.prototype.checkSpellingState = function(fire) {
  if(!AJS.isDefined(fire) || fire)
    this.setStateChanged("spell_check");

  if(this.show_change_lang_pic)
    this.switch_lan_pic = this.createChangeLangPic();
  else
    this.switch_lan_pic = AJS.SPAN();
    //removed AJS.SPAN() and replaced with null

  var span_chck = this.createSpellDiv();
  var fn = function() {
    this.spellCheck();
  };

  if(this.custom_spellcheck_starter)
    span_chck.onclick = this.custom_spellcheck_starter;
  else {
    AJS.AEV(span_chck, "click", AJS.$b(fn, this), true);
  }

  this.spell_span = span_chck;
  if(this.main_controller) {
    if(this.change_lang_pic_placement == "right")
      AJS.RCN(this.spell_container, span_chck, " ", this.switch_lan_pic);
    else
      AJS.RCN(this.spell_container, this.switch_lan_pic, " ", span_chck);
  }
}


//////
// Misc. functions
/////
GoogieSpell.item_onmouseover = function(e) {
  var elm = AJS.getEventElm(e);
  if(elm.className != "googie_list_revert" && elm.className != "googie_list_close")
    elm.className = "googie_list_onhover";
  else
    elm.parentNode.className = "googie_list_onhover";
}
GoogieSpell.item_onmouseout = function(e) {
  var elm = AJS.getEventElm(e);
  if(elm.className != "googie_list_revert" && elm.className != "googie_list_close")
    elm.className = "googie_list_onout";
  else
    elm.parentNode.className = "googie_list_onout";
}

GoogieSpell.prototype.createCloseButton = function(c_fn) {
  return this.createButton(this.lang_close, 'googie_list_close', AJS.$b(c_fn, this));
}

GoogieSpell.prototype.createButton = function(name, css_class, c_fn) {
  var btn_row = AJS.TR();
  var btn = AJS.TD();

  btn.onmouseover = GoogieSpell.item_onmouseover;
  btn.onmouseout = GoogieSpell.item_onmouseout;

  var spn_btn;
  if(css_class != "") {
    spn_btn = AJS.SPAN({'class': css_class});
    spn_btn.innerHTML = name;
  }
  else {
    spn_btn = AJS.TN(name);
  }
  btn.appendChild(spn_btn);
  AJS.AEV(btn, "click", c_fn);
  btn_row.appendChild(btn);

  return btn_row;
}

GoogieSpell.prototype.removeIndicator = function(elm) {
  try { AJS.removeElement(this.indicator); }
  catch(e) {}
}

[B]GoogieSpell.prototype.appendIndicator = function(elm) {
  var img = AJS.IMG({'src': this.img_dir + 'spell_working.gif', 'style': 'height: 16px; width: 16px; vertical-align: top;'});
  AJS.setWidth(img, 16);
  AJS.setHeight(img, 16);
  this.indicator = img;
  img.style.textDecoration = "none";
  try {
    AJS.insertBefore(img, elm);
  }
  catch(e) {}
}[/B]

GoogieSpell.prototype.createFocusLink = function(name) {
  return AJS.A({'href': 'javascript:;', name: name});
}

Code (markup):

 

this is the line you need to change to make it work with your picture:

var img = AJS.IMG({'src': this.img_dir + 'spell_working.gif', 'style': 'height: 16px; width: 16px; vertical-align: top;'});

You can change img_dir via function GoogieSpell(img_dir, server_url) and also change picture name as you want.

Do you have a test sample for that JS class?

 

Thanks for the response. I'm afraid that this is not the root of the issue. The image in that function is correct...I need it to display...

when enter a pharase, and click "check spelling" it APPENDS that working image to the image already there...the "ABC" image. I need the ABC image to dissapear when spell check is clicked, then return later.