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. (i've bolded the relevant functions in the code below...)
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. (i've bolded the relevant functions in the code below...)
Code:
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, "&").replace(/</g, "<").replace(/>/g, ">");
}
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, " ");
txt_part = txt_part.replace(/^ /g, " ");
txt_part = txt_part.replace(/ $/g, " ");
part.innerHTML = txt_part;
return part;
}
[B]
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) {}
}
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});
}