Improve googiespell widget for better styling capabilities

.. it is possible to style it with css, no images are required

program/js/googiespell.js

@@ -59,7 +59,7 @@ function GoogieSpell(img_dir, server_url, has_dict)
     };
     this.lang_to_word = this.org_lang_to_word;
     this.langlist_codes = this.array_keys(this.lang_to_word);
-    this.show_change_lang_pic = true;
+    this.show_change_lang_pic = false; // roundcube mod.
     this.change_lang_pic_placement = 'right';
     this.report_state_change = true;
 
@@ -74,6 +74,7 @@ function GoogieSpell(img_dir, server_url, has_dict)
     this.lang_no_suggestions = "No suggestions";
     this.lang_learn_word = "Add to dictionary";
 
+    this.use_ok_pic = false; // added by roundcube
     this.show_spell_img = false; // roundcube mod.
     this.decoration = true;
     this.use_close_btn = false;
@@ -505,7 +506,7 @@ this.showErrorWindow = function(elm, id)
             item = document.createElement('td'),
             dummy = document.createElement('span');
 
-            $(dummy).text(this.lang_learn_word);
+            $(dummy).text(this.lang_learn_word).addClass('googie_add_to_dict');
             $(item).attr('googie_action_btn', '1').css('cursor', 'default')
                 .mouseover(ref.item_onmouseover)
                 .mouseout(ref.item_onmouseout)
@@ -572,7 +573,7 @@ this.showErrorWindow = function(elm, id)
         var edit_row = document.createElement('tr'),
             edit = document.createElement('td'),
             edit_input = document.createElement('input'),
-            ok_pic = document.createElement('img'),
+            ok_pic = document.createElement('button'), // roundcube mod.
             edit_form = document.createElement('form');
 
         var onsub = function () {
@@ -592,10 +593,18 @@ this.showErrorWindow = function(elm, id)
           .val($(elm).text()).attr('googie_action_btn', '1');
         $(edit).css('cursor', 'default').attr('googie_action_btn', '1');
 
-        $(ok_pic).attr('src', this.img_dir + 'ok.gif')
+        // roundcube modified image use
+        if (this.use_ok_pic) {
+            $('<img>').attr('src', this.img_dir + 'ok.gif')
                 .width(32).height(16)
-            .css({'cursor': 'pointer', 'margin-left': '2px', 'margin-right': '2px'})
-            .click(onsub);
+                .css({cursor: 'pointer', 'margin-left': '2px', 'margin-right': '2px'})
+                .appendTo(ok_pic);
+        }
+        else {
+            $(ok_pic).text('OK');
+        }
+
+        $(ok_pic).addClass('mainaction save googie_ok_button').click(onsub);
 
         $(edit_form).attr('googie_action_btn', '1')
             .css({'margin': 0, 'padding': 0, 'cursor': 'default', 'white-space': 'nowrap'})
@@ -643,6 +652,9 @@ this.showErrorWindow = function(elm, id)
     table.appendChild(list);
     this.error_window.appendChild(table);
 
+    // roundcube plugin api hook
+    rcmail.triggerEvent('googiespell_create', {obj: this.error_window});
+
     // calculate and set position
     var height = $(this.error_window).height(),
         width = $(this.error_window).width(),
@@ -651,7 +663,10 @@ this.showErrorWindow = function(elm, id)
         top = pos.top + height + 20 < pageheight ? pos.top + 20 : pos.top - height,
         left = pos.left + width < pagewidth ? pos.left : pos.left - width;
 
-    $(this.error_window).css({'top': top+'px', 'left': left+'px'}).show();
+    if (left < 0) left = 0;
+    if (top < 0) top = 0;
+
+    $(this.error_window).css({'top': top+'px', 'left': left+'px', position: 'absolute'}).show();
 
     // Dummy for IE - dropdown bug fix
     if (document.all && !window.opera) {

skins/classic/googiespell.css

@@ -116,3 +116,13 @@
   border-right: 1px solid #555;
   border-bottom: 1px solid #555;
 }
+
+.googie_ok_button {
+  background: url(images/googiespell/ok.gif) no-repeat center center transparent;
+  width: 32px;
+  height: 16px;
+  cursor: pointer;
+  padding: 0 2px;
+  text-indent: -5000px;
+  border: 0;
+}

skins/larry/googiespell.css

@@ -92,3 +92,13 @@
   border: 0;
 }
 
+.googie_ok_button {
+  background: url(images/googiespell/ok.gif) no-repeat center center transparent !important;
+  width: 32px;
+  height: 16px;
+  cursor: pointer;
+  margin: 0 5px;
+  padding: 0;
+  border: 0 !important;
+  text-indent: -5000px;
+}