first go on unobstrusive javascript, new toolbar

darcs-hash:20051008175404-7ad00-cd640de7660825b19d5e863cc8caf5467d59b055.gz

35 files changed, 502 insertions, 236 deletions

diff --git a/lib/images/toolbar/bold.png b/lib/images/toolbar/bold.png
index d12c5710e..6ec336262 100644
--- a/lib/images/toolbar/bold.png
+++ b/lib/images/toolbar/bold.png
diff --git a/lib/images/toolbar/chars.png b/lib/images/toolbar/chars.png
new file mode 100644
index 000000000..83cdadd75
--- /dev/null
+++ b/lib/images/toolbar/chars.png
diff --git a/lib/images/toolbar/code.png b/lib/images/toolbar/code.png
deleted file mode 100644
index fb5c0c3d8..000000000
--- a/lib/images/toolbar/code.png
+++ /dev/null
diff --git a/lib/images/toolbar/empty.png b/lib/images/toolbar/empty.png
deleted file mode 100644
index e606cfd07..000000000
--- a/lib/images/toolbar/empty.png
+++ /dev/null
diff --git a/lib/images/toolbar/extlink.png b/lib/images/toolbar/extlink.png
deleted file mode 100644
index 705527e8c..000000000
--- a/lib/images/toolbar/extlink.png
+++ /dev/null
diff --git a/lib/images/toolbar/fonth1.png b/lib/images/toolbar/fonth1.png
deleted file mode 100644
index ded5113cc..000000000
--- a/lib/images/toolbar/fonth1.png
+++ /dev/null
diff --git a/lib/images/toolbar/fonth2.png b/lib/images/toolbar/fonth2.png
deleted file mode 100644
index fcf23f5ab..000000000
--- a/lib/images/toolbar/fonth2.png
+++ /dev/null
diff --git a/lib/images/toolbar/fonth3.png b/lib/images/toolbar/fonth3.png
deleted file mode 100644
index 04246acf2..000000000
--- a/lib/images/toolbar/fonth3.png
+++ /dev/null
diff --git a/lib/images/toolbar/fonth4.png b/lib/images/toolbar/fonth4.png
deleted file mode 100644
index 1e7ac84c6..000000000
--- a/lib/images/toolbar/fonth4.png
+++ /dev/null
diff --git a/lib/images/toolbar/fonth5.png b/lib/images/toolbar/fonth5.png
deleted file mode 100644
index 5a1edb14c..000000000
--- a/lib/images/toolbar/fonth5.png
+++ /dev/null
diff --git a/lib/images/toolbar/h1.png b/lib/images/toolbar/h1.png
new file mode 100644
index 000000000..ffee5c159
--- /dev/null
+++ b/lib/images/toolbar/h1.png
diff --git a/lib/images/toolbar/h2.png b/lib/images/toolbar/h2.png
new file mode 100644
index 000000000..a2cc7f253
--- /dev/null
+++ b/lib/images/toolbar/h2.png
diff --git a/lib/images/toolbar/h3.png b/lib/images/toolbar/h3.png
new file mode 100644
index 000000000..accdaf652
--- /dev/null
+++ b/lib/images/toolbar/h3.png
diff --git a/lib/images/toolbar/h4.png b/lib/images/toolbar/h4.png
new file mode 100644
index 000000000..8e5767688
--- /dev/null
+++ b/lib/images/toolbar/h4.png
diff --git a/lib/images/toolbar/h5.png b/lib/images/toolbar/h5.png
new file mode 100644
index 000000000..8fe10e99f
--- /dev/null
+++ b/lib/images/toolbar/h5.png
diff --git a/lib/images/toolbar/hr.png b/lib/images/toolbar/hr.png
new file mode 100644
index 000000000..6d68d66aa
--- /dev/null
+++ b/lib/images/toolbar/hr.png
diff --git a/lib/images/toolbar/image.png b/lib/images/toolbar/image.png
index ed35e5a62..d1416fae9 100644
--- a/lib/images/toolbar/image.png
+++ b/lib/images/toolbar/image.png
diff --git a/lib/images/toolbar/italic.png b/lib/images/toolbar/italic.png
index f4ecd0ddf..ab8943b45 100644
--- a/lib/images/toolbar/italic.png
+++ b/lib/images/toolbar/italic.png
diff --git a/lib/images/toolbar/link.png b/lib/images/toolbar/link.png
index 99cb40051..453f0d3f1 100644
--- a/lib/images/toolbar/link.png
+++ b/lib/images/toolbar/link.png
diff --git a/lib/images/toolbar/linkextern.png b/lib/images/toolbar/linkextern.png
new file mode 100644
index 000000000..780c33533
--- /dev/null
+++ b/lib/images/toolbar/linkextern.png
diff --git a/lib/images/toolbar/list.png b/lib/images/toolbar/list.png
deleted file mode 100644
index ffae5cfbf..000000000
--- a/lib/images/toolbar/list.png
+++ /dev/null
diff --git a/lib/images/toolbar/list_ul.png b/lib/images/toolbar/list_ul.png
deleted file mode 100644
index b86bcef7d..000000000
--- a/lib/images/toolbar/list_ul.png
+++ /dev/null
diff --git a/lib/images/toolbar/mono.png b/lib/images/toolbar/mono.png
new file mode 100644
index 000000000..dd398411e
--- /dev/null
+++ b/lib/images/toolbar/mono.png
diff --git a/lib/images/toolbar/ol.png b/lib/images/toolbar/ol.png
new file mode 100644
index 000000000..91ce32b9d
--- /dev/null
+++ b/lib/images/toolbar/ol.png
diff --git a/lib/images/toolbar/rule.png b/lib/images/toolbar/rule.png
deleted file mode 100644
index 3a32bef34..000000000
--- a/lib/images/toolbar/rule.png
+++ /dev/null
diff --git a/lib/images/toolbar/sig.png b/lib/images/toolbar/sig.png
index 3e8079f49..e4aa2943c 100644
--- a/lib/images/toolbar/sig.png
+++ b/lib/images/toolbar/sig.png
diff --git a/lib/images/toolbar/smiley.png b/lib/images/toolbar/smiley.png
new file mode 100644
index 000000000..dee8a962a
--- /dev/null
+++ b/lib/images/toolbar/smiley.png
diff --git a/lib/images/toolbar/spellcheck.png b/lib/images/toolbar/spellcheck.png
index 797a0433d..9aecbad4b 100644
--- a/lib/images/toolbar/spellcheck.png
+++ b/lib/images/toolbar/spellcheck.png
diff --git a/lib/images/toolbar/strike.png b/lib/images/toolbar/strike.png
index 197aafa9d..f6dd97647 100644
--- a/lib/images/toolbar/strike.png
+++ b/lib/images/toolbar/strike.png
diff --git a/lib/images/toolbar/ul.png b/lib/images/toolbar/ul.png
new file mode 100644
index 000000000..4331bc6c2
--- /dev/null
+++ b/lib/images/toolbar/ul.png
diff --git a/lib/images/toolbar/underline.png b/lib/images/toolbar/underline.png
index db07038fd..ee5e0d9fd 100644
--- a/lib/images/toolbar/underline.png
+++ b/lib/images/toolbar/underline.png
diff --git a/lib/scripts/edit.js b/lib/scripts/edit.js
new file mode 100644
index 000000000..641124c8f
--- /dev/null
+++ b/lib/scripts/edit.js
@@ -0,0 +1,308 @@
+/**
+ * Functions for text editing (toolbar stuff)
+ *
+ * @todo I'm no JS guru please help if you know how to improve
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+
+/**
+ * Creates a toolbar button through the DOM
+ *
+ * Style the buttons through the toolbutton class
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function createToolButton(icon,label,key,id){
+    var btn = document.createElement('button');
+    var ico = document.createElement('img');
+
+    // preapare the basic button stuff
+    btn.className = 'toolbutton';
+    btn.title = label;
+    if(key){
+        btn.title += ' [ALT+'+key.toUpperCase()+']';
+        btn.accesskey = key;
+    }
+
+    // set IDs if given
+    if(id){
+        btn.id = id;
+        ico.id = id+'_ico';
+    }
+
+    // create the icon and add it to the button
+    ico.src = DOKU_BASE+'lib/images/toolbar/'+icon;
+    btn.appendChild(ico);
+
+    return btn;
+}
+
+/**
+ * Creates a picker window for inserting text
+ *
+ * The given list can be an associative array with text,icon pairs
+ * or a simple list of text. Style the picker window through the picker
+ * class or the picker buttons with the pickerbutton class. Picker
+ * windows are appended to the body and created invisible.
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function createPicker(id,list,icobase,edid){
+    var cnt = list.length;
+      
+    var picker = document.createElement('div');
+    picker.className = 'picker';
+    picker.id = id;
+    picker.style.position = 'absolute';
+    picker.style.display  = 'none';
+      
+    for(var key in list){
+        var btn = document.createElement('button');
+
+        btn.className = 'pickerbutton'
+
+        // associative array?
+        if(isNaN(key)){
+            var ico = document.createElement('img');
+            ico.src       = DOKU_BASE+'lib/images/'+icobase+'/'+list[key];
+            btn.title     = key;
+            btn.appendChild(ico);
+            eval("btn.onclick = function(){pickerInsert('"+id+"','"+
+                                  jsEscape(key)+"','"+
+                                  jsEscape(edid)
+                                +"');return false;}");
+        }else{
+            var txt = document.createTextNode(list[key]);
+            btn.title     = list[key];
+            btn.appendChild(txt);
+            eval("btn.onclick = function(){pickerInsert('"+id+"','"+
+                                  jsEscape(list[key])+"','"+
+                                  jsEscape(edid)
+                                +"');return false;}");
+        }
+
+        picker.appendChild(btn);
+    }
+    var body = document.getElementsByTagName('body')[0];
+    body.appendChild(picker);
+}
+
+/**
+ * Called by picker buttons to insert Text and close the picker again
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function pickerInsert(pickerid,text,edid){
+    // insert
+    insertAtCarret(edid,text);
+    // close picker
+    pobj = document.getElementById(pickerid);
+    pobj.style.display = 'none';
+}
+
+/**
+ * Show a previosly created picker window
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function showPicker(pickerid,btn){
+    var picker = document.getElementById(pickerid);
+    var x = findPosX(btn);
+    var y = findPosY(btn);
+    if(picker.style.display == 'none'){
+        picker.style.display = 'block';
+        picker.style.left = (x+3)+'px';
+        picker.style.top = (y+btn.offsetHeight+3)+'px';
+    }else{
+        picker.style.display = 'none';
+    }
+}
+
+/**
+ * Create a toolbar
+ *
+ * @param  string tbid ID of the element where to insert the toolbar
+ * @param  string edid ID of the editor textarea
+ * @param  array  tb   Associative array defining the buttons
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function initToolbar(tbid,edid,tb){
+    var toolbar = document.getElementById(tbid);
+    var cnt = tb.length;
+    for(i=0; i<cnt; i++){
+        // create new button and add to the toolbar
+        btn = createToolButton(tb[i]['icon'],
+                               tb[i]['title'],
+                               tb[i]['key']);
+        toolbar.appendChild(btn);
+
+        // add button action dependend on type
+        switch(tb[i]['type']){
+            case 'format':
+                var sample = tb[i]['title'];
+                if(tb[i]['sample']) sample = tb[i]['sample'];
+      
+                eval("btn.onclick = function(){insertTags('"+
+                                        jsEscape(edid)+"','"+
+                                        jsEscape(tb[i]['open'])+"','"+
+                                        jsEscape(tb[i]['close'])+"','"+
+                                        jsEscape(sample)+
+                                    "');return false;}");
+                break;
+            case 'insert':
+                eval("btn.onclick = function(){insertAtCarret('"+
+                                        jsEscape(edid)+"','"+
+                                        jsEscape(tb[i]['insert'])+
+                                    "');return false;}");
+                break;
+            case 'picker':
+                createPicker('picker'+i,
+                             tb[i]['list'],
+                             tb[i]['icobase'],
+                             edid);
+                eval("btn.onclick = function(){showPicker('picker"+i+
+                                    "',this);return false;}");
+                break;
+            case 'popup':
+                eval("btn.onclick = function(){window.open('"+
+                                        jsEscape(tb[i]['url'])+"','"+
+                                        jsEscape(tb[i]['name'])+"','"+
+                                        jsEscape(tb[i]['options'])+
+                                    "');return false;}");
+                break;
+        } // end switch
+    } // end for
+}
+
+/**
+ * Format selection
+ *
+ * Apply tagOpen/tagClose to selection in textarea, use sampleText instead
+ * of selection if there is none. Copied and adapted from phpBB
+ *
+ * @author phpBB development team
+ * @author MediaWiki development team
+ * @author Andreas Gohr <andi@splitbrain.org>
+ * @author Jim Raynor <jim_raynor@web.de>
+ */
+function insertTags(edid,tagOpen, tagClose, sampleText) {
+  var txtarea = document.getElementById(edid);
+  // IE
+  if(document.selection  && !is_gecko) {
+    var theSelection = document.selection.createRange().text;
+    var replaced = true;
+    if(!theSelection){
+      replaced = false;
+      theSelection=sampleText;
+    }
+    txtarea.focus();
+ 
+    // This has change
+    text = theSelection;
+    if(theSelection.charAt(theSelection.length - 1) == " "){// exclude ending space char, if any
+      theSelection = theSelection.substring(0, theSelection.length - 1);
+      r = document.selection.createRange();
+      r.text = tagOpen + theSelection + tagClose + " ";
+    } else {
+      r = document.selection.createRange();
+      r.text = tagOpen + theSelection + tagClose;
+    }
+    if(!replaced){
+      r.moveStart('character',-text.length-tagClose.length);
+      r.moveEnd('character',-tagClose.length);
+    }
+    r.select();
+  // Mozilla
+  } else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
+    var replaced = false;
+    var startPos = txtarea.selectionStart;
+    var endPos   = txtarea.selectionEnd;
+    if(endPos - startPos) replaced = true;
+    var scrollTop=txtarea.scrollTop;
+    var myText = (txtarea.value).substring(startPos, endPos);
+    if(!myText) { myText=sampleText;}
+    if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
+      subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
+    } else {
+      subst = tagOpen + myText + tagClose;
+    }
+    txtarea.value = txtarea.value.substring(0, startPos) + subst +
+                    txtarea.value.substring(endPos, txtarea.value.length);
+    txtarea.focus();
+ 
+    //set new selection
+    if(replaced){
+      var cPos=startPos+(tagOpen.length+myText.length+tagClose.length);
+      txtarea.selectionStart=cPos;
+      txtarea.selectionEnd=cPos;
+    }else{
+      txtarea.selectionStart=startPos+tagOpen.length;   
+      txtarea.selectionEnd=startPos+tagOpen.length+myText.length;
+    }
+    txtarea.scrollTop=scrollTop;
+  // All others
+  } else {
+    var copy_alertText=alertText;
+    var re1=new RegExp("\\$1","g");
+    var re2=new RegExp("\\$2","g");
+    copy_alertText=copy_alertText.replace(re1,sampleText);
+    copy_alertText=copy_alertText.replace(re2,tagOpen+sampleText+tagClose);
+    var text;
+    if (sampleText) {
+      text=prompt(copy_alertText);
+    } else {
+      text="";
+    }
+    if(!text) { text=sampleText;}
+    text=tagOpen+text+tagClose;
+    //append to the end
+    txtarea.value += "\n"+text;
+
+    // in Safari this causes scrolling
+    if(!is_safari) {
+      txtarea.focus();
+    }
+
+  }
+  // reposition cursor if possible
+  if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
+}
+
+/*
+ * Insert the given value at the current cursor position
+ *
+ * @see http://www.alexking.org/index.php?content=software/javascript/content.php
+ */
+function insertAtCarret(edid,value){
+  var field = document.getElementById(edid);
+
+  //IE support
+  if (document.selection) {
+    field.focus();
+    if(opener == null){
+      sel = document.selection.createRange();
+    }else{
+      sel = opener.document.selection.createRange();
+    }
+    sel.text = value;
+  //MOZILLA/NETSCAPE support
+  }else if (field.selectionStart || field.selectionStart == '0') {
+    var startPos  = field.selectionStart;
+    var endPos    = field.selectionEnd;
+    var scrollTop = field.scrollTop;
+    field.value = field.value.substring(0, startPos)
+                  + value
+                  + field.value.substring(endPos, field.value.length);
+
+    field.focus();
+    var cPos=startPos+(value.length);
+    field.selectionStart=cPos;
+    field.selectionEnd=cPos;
+    field.scrollTop=scrollTop;
+  } else {
+    field.value += "\n"+value;
+  }
+  // reposition cursor if possible
+  if (field.createTextRange) field.caretPos = document.selection.createRange().duplicate();
+}
+
diff --git a/lib/scripts/script.js b/lib/scripts/script.js
index 8ee3c3805..490394dfb 100644
--- a/lib/scripts/script.js
+++ b/lib/scripts/script.js
@@ -16,9 +16,87 @@ if (clientPC.indexOf('opera')!=-1) {
     var is_opera_seven = (window.opera && document.childNodes);
 }
 
+//http://simon.incutio.com/archive/2004/05/26/addLoadEvent#comment2
+function addEvent(oTarget, sType, fpDest) {
+  var oOldEvent = oTarget[sType];
+  if (typeof oOldEvent != "function") {
+    oTarget[sType] = fpDest;
+  } else {
+    oTarget[sType] = function(e) {
+      oOldEvent(e);
+      fpDest(e);
+    }
+  }
+}
+
+/**
+ * Get the X offset of the top left corner of the given object
+ *
+ * @link http://www.quirksmode.org/index.html?/js/findpos.html
+ */
+function findPosX(object){
+  var curleft = 0;
+  if(typeof(object) == 'object'){
+    var obj = object;
+  }else{
+    var obj = document.getElementById(object);
+  }
+  if (obj.offsetParent){
+    while (obj.offsetParent){
+      curleft += obj.offsetLeft;
+      obj = obj.offsetParent;
+    }
+  }
+  else if (obj.x){
+    curleft += obj.x;
+  }
+  return curleft;
+} //end findPosX function
+
+/**
+ * Get the Y offset of the top left corner of the given object
+ *
+ * @link http://www.quirksmode.org/index.html?/js/findpos.html
+ */
+function findPosY(object){
+  var curtop = 0;
+  if(typeof(object) == 'object'){
+    var obj = object;
+  }else{
+    var obj = document.getElementById(object);
+  }
+  if (obj.offsetParent){
+    while (obj.offsetParent){
+      curtop += obj.offsetTop;
+      obj = obj.offsetParent;
+    }
+  }
+  else if (obj.y){
+    curtop += obj.y;
+  }
+  return curtop;
+} //end findPosY function
+
+/**
+ * Escape special chars in JavaScript
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function jsEscape(text){
+    var re=new RegExp("\\\\","g");
+    text=text.replace(re,"\\\\");
+    var re=new RegExp("'","g");
+    text=text.replace(re,"\\'");
+    re=new RegExp('"',"g");
+    text=text.replace(re,'&quot;');
+    re=new RegExp("\\\\\\\\n","g");
+    text=text.replace(re,"\\n");
+    return text;
+}
 
 /**
  * This function escapes some special chars
+ * @deprecated by above function
  */
 function escapeQuotes(text) {
   var re=new RegExp("'","g");
@@ -72,6 +150,7 @@ function summaryCheck(){
 /**
  * This function generates the actual toolbar buttons with localized text
  * we use it to avoid creating the toolbar where javascript is not enabled
+ * @deprecated
  */
 function formatButton(imageFile, speedTip, tagOpen, tagClose, sampleText, accessKey) {
   speedTip=escapeQuotes(speedTip);
@@ -97,6 +176,7 @@ function formatButton(imageFile, speedTip, tagOpen, tagClose, sampleText, access
 /**
  * This function generates the actual toolbar buttons with localized text
  * we use it to avoid creating the toolbar where javascript is not enabled
+ * @deprecated
  */
 function insertButton(imageFile, speedTip, value, accessKey) {
   speedTip=escapeQuotes(speedTip);
@@ -119,6 +199,7 @@ function insertButton(imageFile, speedTip, value, accessKey) {
 
 /**
  * This adds a button for the MediaSelection Popup
+ * @deprecated
  */
 function mediaButton(imageFile, speedTip, accessKey, namespace) {
   speedTip=escapeQuotes(speedTip);
@@ -135,99 +216,6 @@ function mediaButton(imageFile, speedTip, accessKey, namespace) {
   return;
 }
 
-/**
- * apply tagOpen/tagClose to selection in textarea, use sampleText instead
- * of selection if there is none copied and adapted from phpBB
- *
- * @author phpBB development team
- * @author MediaWiki development team
- * @author Andreas Gohr <andi@splitbrain.org>
- * @author Jim Raynor <jim_raynor@web.de>
- */
-function insertTags(tagOpen, tagClose, sampleText) {
-  var txtarea = document.editform.wikitext;
-  // IE
-  if(document.selection  && !is_gecko) {
-    var theSelection = document.selection.createRange().text;
-    var replaced = true;
-    if(!theSelection){
-      replaced = false;
-      theSelection=sampleText;
-    }
-    txtarea.focus();
- 
-    // This has change
-    text = theSelection;
-    if(theSelection.charAt(theSelection.length - 1) == " "){// exclude ending space char, if any
-      theSelection = theSelection.substring(0, theSelection.length - 1);
-      r = document.selection.createRange();
-      r.text = tagOpen + theSelection + tagClose + " ";
-    } else {
-      r = document.selection.createRange();
-      r.text = tagOpen + theSelection + tagClose;
-    }
-    if(!replaced){
-      r.moveStart('character',-text.length-tagClose.length);
-      r.moveEnd('character',-tagClose.length);
-    }
-    r.select();
-  // Mozilla
-  } else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
-    var replaced = false;
-    var startPos = txtarea.selectionStart;
-    var endPos   = txtarea.selectionEnd;
-    if(endPos - startPos) replaced = true;
-    var scrollTop=txtarea.scrollTop;
-    var myText = (txtarea.value).substring(startPos, endPos);
-    if(!myText) { myText=sampleText;}
-    if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
-      subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
-    } else {
-      subst = tagOpen + myText + tagClose;
-    }
-    txtarea.value = txtarea.value.substring(0, startPos) + subst +
-                    txtarea.value.substring(endPos, txtarea.value.length);
-    txtarea.focus();
- 
-    //set new selection
-    if(replaced){
-      var cPos=startPos+(tagOpen.length+myText.length+tagClose.length);
-      txtarea.selectionStart=cPos;
-      txtarea.selectionEnd=cPos;
-    }else{
-      txtarea.selectionStart=startPos+tagOpen.length;   
-      txtarea.selectionEnd=startPos+tagOpen.length+myText.length;
-    }
-    txtarea.scrollTop=scrollTop;
-  // All others
-  } else {
-    var copy_alertText=alertText;
-    var re1=new RegExp("\\$1","g");
-    var re2=new RegExp("\\$2","g");
-    copy_alertText=copy_alertText.replace(re1,sampleText);
-    copy_alertText=copy_alertText.replace(re2,tagOpen+sampleText+tagClose);
-    var text;
-    if (sampleText) {
-      text=prompt(copy_alertText);
-    } else {
-      text="";
-    }
-    if(!text) { text=sampleText;}
-    text=tagOpen+text+tagClose;
-    //append to the end
-    txtarea.value += "\n"+text;
-
-    // in Safari this causes scrolling
-    if(!is_safari) {
-      txtarea.focus();
-    }
-
-  }
-  // reposition cursor if possible
-  if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
-}
-
-
 /*
  * Insert the selected filename and close the window
  *
@@ -238,41 +226,6 @@ function mediaSelect(file){
   window.close(); 
 }
 
-/*
- * Insert the given value at the current cursor position
- *
- * @see http://www.alexking.org/index.php?content=software/javascript/content.php
- */
-function insertAtCarret(field,value){
-  //IE support
-  if (document.selection) {
-    field.focus();
-    if(opener == null){
-      sel = document.selection.createRange();
-    }else{
-      sel = opener.document.selection.createRange();
-    }
-    sel.text = value;
-  //MOZILLA/NETSCAPE support
-  }else if (field.selectionStart || field.selectionStart == '0') {
-    var startPos  = field.selectionStart;
-    var endPos    = field.selectionEnd;
-    var scrollTop = field.scrollTop;
-    field.value = field.value.substring(0, startPos)
-                  + value
-                  + field.value.substring(endPos, field.value.length);
-
-    field.focus();
-    var cPos=startPos+(value.length);
-    field.selectionStart=cPos;
-    field.selectionEnd=cPos;
-    field.scrollTop=scrollTop;
-  } else {
-    field.value += "\n"+value;
-  }
-  // reposition cursor if possible
-  if (field.createTextRange) field.caretPos = document.selection.createRange().duplicate();
-}
 
 /**
  * For the upload Dialog. Prefills the wikiname.
@@ -321,38 +274,6 @@ function toggleToc() {
   }
 }
 
-/**
- * Sizecontrol inspired by TikiWiki. This displays the buttons.
- */
-function showSizeCtl(){
-  if(document.getElementById) {
-    var textarea = document.getElementById('wikitext');
-    var hgt = getCookie('DokuWikisizeCtl');
-    if(hgt == null){
-      textarea.style.height = '300px';
-    }else{
-      textarea.style.height = hgt;
-    }
-    document.writeln('<a href="javascript:sizeCtl(100)"><img src="'+DOKU_BASE+'lib/images/larger.gif" width="20" height="20" border="0"></a>');
-    document.writeln('<a href="javascript:sizeCtl(-100)"><img src="'+DOKU_BASE+'lib/images/smaller.gif" width="20" height="20" border="0"></a>');
-  }
-}
-
-/**
- * This sets the vertical size of the editbox
- */
-function sizeCtl(val){
-  var textarea = document.getElementById('wikitext');
-  var height = parseInt(textarea.style.height.substr(0,textarea.style.height.length-2));
-  height += val;
-  textarea.style.height = height+'px';
-  
-  var now = new Date();
-  fixDate(now);
-  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000); //expire in a year
-  setCookie('DokuWikisizeCtl',textarea.style.height,now);
-}
-
 
 /**
  * global var used for not saved yet warning
@@ -497,3 +418,43 @@ function fnt(id, e, evt) {
     domTT_activate(e, evt, 'content', footnote, 'type', 'velcro', 'id', 'insitu-fn'+id, 'styleClass', 'insitu-footnote', 'maxWidth', document.body.offsetWidth*0.4);
     currentFootnote = id;    
 }
+
+
+/**
+ * Add the edit window size controls
+ */
+function initSizeCtl(ctlid,edid){
+    var ctl      = document.getElementById(ctlid);
+    var textarea = document.getElementById(edid);
+
+    var hgt = getCookie('DokuWikisizeCtl');
+    if(hgt == null){
+      textarea.style.height = '300px';
+    }else{
+      textarea.style.height = hgt;
+    }
+
+    var l = document.createElement('img');
+    var s = document.createElement('img');
+    l.src = DOKU_BASE+'lib/images/larger.gif';
+    s.src = DOKU_BASE+'lib/images/smaller.gif';
+    l.onclick = function(){sizeCtl(edid,100);}
+    s.onclick = function(){sizeCtl(edid,-100);}
+    ctl.appendChild(l);
+    ctl.appendChild(s);
+}
+
+/**
+ * This sets the vertical size of the editbox
+ */
+function sizeCtl(edid,val){
+  var textarea = document.getElementById(edid);
+  var height = parseInt(textarea.style.height.substr(0,textarea.style.height.length-2));
+  height += val;
+  textarea.style.height = height+'px';
+  
+  var now = new Date();
+  fixDate(now);
+  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000); //expire in a year
+  setCookie('DokuWikisizeCtl',textarea.style.height,now);
+}
diff --git a/lib/scripts/spellcheck.js b/lib/scripts/spellcheck.js
index e86c079df..d47430c31 100644
--- a/lib/scripts/spellcheck.js
+++ b/lib/scripts/spellcheck.js
@@ -40,45 +40,19 @@
  * OF SUCH DAMAGE.
  */
 
-/**
- * Get the X offset of the top left corner of the given object
+/*
+ * Uses some general functions defined elsewhere. Here is a list:
  *
- * @author Garrison Locke <http://www.broken-notebook.com>
- */
-function findPosX(object){
-  var curleft = 0;
-  var obj = document.getElementById(object);
-  if (obj.offsetParent){
-    while (obj.offsetParent){
-      curleft += obj.offsetLeft;
-      obj = obj.offsetParent;
-    }
-  }
-  else if (obj.x){
-    curleft += obj.x;
-  }
-  return curleft;
-} //end findPosX function
-
-/**
- * Get the Y offset of the top left corner of the given object
+ * Defined in script.js:
  *
- * @author Garrison Locke <http://www.broken-notebook.com>
+ *   findPosX()
+ *   findPosY()
+ *   addEvent()
+ *
+ * Defined in edit.js:
+ *
+ *   createToolButton()
  */
-function findPosY(object){
-  var curtop = 0;
-  var obj = document.getElementById(object);
-  if (obj.offsetParent){
-    while (obj.offsetParent){
-      curtop += obj.offsetTop;
-      obj = obj.offsetParent;
-    }
-  }
-  else if (obj.y){
-    curtop += obj.y;
-  }
-  return curtop;
-} //end findPosY function
 
 /**
  * quotes single quotes
@@ -90,29 +64,6 @@ function qquote(str){
 }
 
 /**
- * This function generates a spellchecker button with localized tooltips
- */
-function spellButton(imageFile, speedTip, funcCall, accessKey) {
-  speedTip=escapeQuotes(speedTip);
-  funcCall=escapeQuotes(funcCall);
-
-  button = "<a ";
-  if(accessKey){
-    button = button+"accesskey=\""+accessKey+"\" ";
-    speedTip = speedTip+' [ALT+'+accessKey.toUpperCase()+']';
-  }
-  if(funcCall){
-    button = button+"href=\"javascript:"+funcCall+";\"";
-  }
-  button = button+">";
-  button = button+"<img width=\"24\" height=\"24\" src=\""+
-                DOKU_BASE+'lib/images/toolbar/'+imageFile+"\" border=\"0\" alt=\""+
-                speedTip+"\" title=\""+speedTip+"\">";
-  button = button+"</a>";
-  return button;
-}
-
-/**
  * AJAX Spellchecker Class
  *
  * Note to some function use a hardcoded instance named ajax_spell to make
@@ -127,11 +78,13 @@ function ajax_spell_class(){
   this.utf8ok = 1;
   this.handler = DOKU_BASE+'lib/exe/spellcheck.php';
   // to hold the page objects (initialized with init())
-  this.textboxObj = null;
+  this.textboxObj = null; 
   this.showboxObj = null;
   this.suggestObj = null;
-  this.actionObj  = null;
   this.editbarObj = null;
+  this.buttonObj = null;
+  this.imageObj  = null;
+
   // hold translations
   this.txtStart = 'Check Spelling';
   this.txtStop  = 'Resume Editing';
@@ -162,7 +115,6 @@ function ajax_spell_class(){
     this.editbarObj = document.getElementById('wikieditbar');
     this.showboxObj = document.getElementById('spell_result'); 
     this.suggestObj = document.getElementById('spell_suggest');
-    this.actionObj  = document.getElementById('spell_action'); 
 
     // set Translation Strings
     this.txtStart = txtStart;
@@ -172,11 +124,20 @@ function ajax_spell_class(){
     this.txtNoSug = txtNoSug;
     this.txtChange= txtChange;
 
+    // create ToolBar Button with ID and add it to the toolbar with null action
+    var toolbarObj = document.getElementById('toolbar');
+    this.buttonObj = createToolButton('spellcheck.png',txtStart,'k','spellcheck');
+    this.buttonObj.onclick = function(){return false;};
+    toolbarObj.appendChild(this.buttonObj);
+    this.imageObj  = document.getElementById('spellcheck_ico');
+
     // start UTF-8 compliance test - send an UTF-8 char and see what comes back
     ajax.AjaxFailedAlert = '';
     ajax.encodeURIString = false;
     ajax.onCompletion    = this.initReady;
     ajax.runAJAX('call=utf8test&data='+encodeURIComponent('ü'));
+
+    // second part of initialisation is in initReady() function
   }
 
   /**
@@ -208,16 +169,28 @@ function ajax_spell_class(){
   this.setState = function(state){
     switch (state){
       case 'stop':
-        ajax_spell.actionObj.innerHTML = spellButton("spellstop.png",ajax_spell.txtStop,"ajax_spell.resume()","");
+        ajax_spell.buttonObj.onclick   = function(){ ajax_spell.resume(); return false; };
+        ajax_spell.buttonObj.title     = ajax_spell.txtStop;
+        ajax_spell.buttonObj.accesskey = '';
+        ajax_spell.imageObj.src = DOKU_BASE+'lib/images/toolbar/spellstop.png';
         break;
       case 'noerr':
-        ajax_spell.actionObj.innerHTML = spellButton("spellnoerr.png",ajax_spell.txtNoErr,"ajax_spell.setState(\"start\")","");
+        ajax_spell.buttonObj.onclick   = function(){ajax_spell.setState('start'); return false; };
+        ajax_spell.buttonObj.title     = ajax_spell.txtNoErr;
+        ajax_spell.buttonObj.accesskey = '';
+        ajax_spell.imageObj.src = DOKU_BASE+'lib/images/toolbar/spellnoerr.png';
         break;
       case 'run':
-        ajax_spell.actionObj.innerHTML = spellButton("spellwait.gif",ajax_spell.txtRun,"","");
+        ajax_spell.buttonObj.onclick   = function(){return false;};
+        ajax_spell.buttonObj.title     = ajax_spell.txtRun;
+        ajax_spell.buttonObj.accesskey = '';
+        ajax_spell.imageObj.src = DOKU_BASE+'lib/images/toolbar/spellwait.gif';
         break;
       default:
-        ajax_spell.actionObj.innerHTML = spellButton("spellcheck.png",ajax_spell.txtStart,"ajax_spell.run()","k");
+        ajax_spell.buttonObj.onclick   = function(){ ajax_spell.run(); return false; };
+        ajax_spell.buttonObj.title     = ajax_spell.txtStart+' [ALT-K]';
+        ajax_spell.buttonObj.accesskey = 'k';
+        ajax_spell.imageObj.src = DOKU_BASE+'lib/images/toolbar/spellcheck.png';
         break;
     }
   }
@@ -311,10 +284,10 @@ function ajax_spell_class(){
     }
 
     // register click event
-    document.onclick = ajax_spell.docClick;
+    addEvent(document,'onclick',ajax_spell.docClick);
 
     // register focus event
-    ajax_spell.textboxObj.onfocus = ajax_spell.setState;
+    addEvent(ajax_spell.textboxObj,'onfocus',ajax_spell.setState);
 
     // get started
     ajax_spell.setState('start');    
@@ -395,14 +368,14 @@ function ajax_spell_class(){
    * @author Andreas Gohr <andi@splitbrain.org>
    */
   this.run = function(){
-    this.setState('run');
-    this.textboxObj.disabled = true;
-    var ajax = new sack(this.handler);
+    ajax_spell.setState('run');
+    ajax_spell.textboxObj.disabled = true;
+    var ajax = new sack(ajax_spell.handler);
     ajax.AjaxFailedAlert = '';
     ajax.encodeURIString = false;
     ajax.onCompletion    = this.start;
     ajax.runAJAX('call=check&utf8='+ajax_spell.utf8ok+
-                 '&data='+encodeURIComponent(this.textboxObj.value));
+                 '&data='+encodeURIComponent(ajax_spell.textboxObj.value));
   }
 
   /**
@@ -411,13 +384,13 @@ function ajax_spell_class(){
    * @author Andreas Gohr <andi@splitbrain.org>
    */
   this.resume = function(){
-    this.setState('run');
-    var text = this.showboxObj.innerHTML;
+    ajax_spell.setState('run');
+    var text = ajax_spell.showboxObj.innerHTML;
     if(text != ''){
-      var ajax = new sack(this.handler);
+      var ajax = new sack(ajax_spell.handler);
       ajax.AjaxFailedAlert = '';
       ajax.encodeURIString = false;
-      ajax.onCompletion    = this.stop;
+      ajax.onCompletion    = ajax_spell.stop;
       ajax.runAJAX('call=resume&utf8='+ajax_spell.utf8ok+
                    '&data='+encodeURIComponent(text));
     }
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 83547b9b4..7bc6085f2 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -666,6 +666,30 @@ div.ajax_qsearch {
   padding: 4px;
 }
 
+/* --------- Toolbar -------------------- */
+button.toolbutton{
+  background-color: #fff;
+  padding: 0px;
+  margin: 0 1px 0 0;
+	border: 1px solid #8cacbb;
+	cursor: pointer;
+}
+
+div.picker {
+  width: 250px;
+  border: 1px solid #8cacbb;
+  background: #eef3f8;
+}
+
+button.pickerbutton {
+  padding: 0px;
+  margin: 0 1px 1px 0;
+  border: 0;
+  background-color: transparent;
+  font-size: 80%;
+	cursor: pointer;
+}
+
 /* ---------- Spellchecking ------------- */
 
 a.spell_error {