<!-- end editor enhancement javascript -->
<script type="text/javascript">

function addEvent(el, evname, func) {
	if (el.attachEvent) {
		el.attachEvent("on" + evname, func);
	} else {
		el.addEventListener(evname, func, true);
	}
}

function stopEvent(evt) {
	if (evt.preventDefault) {
		evt.preventDefault();
		evt.stopPropagation();
	} else {
		evt.cancelBubble = true;
		evt.returnValue = false;
	}
}

// returns the current selection object
function getSelection(ele) {
	if (document.all) {
		return ele.selection;
	} else {
		return window.getSelection();
	}
}

function getSelectedText(ele) {
  if (!ele) return "";

  var result = "";
  if (document.all) {
    var selection = document.selection;
    if (!selection) return "";
    if (selection.type.toLowerCase() != "text") return;
    ele.focus();
    var range = selection.createRange();
    if (range.parentElement() != ele) return;

    return range.text;

  } else {
    var selectionStart = ele.selectionStart;
    var selectionEnd = ele.selectionEnd;
    if (selectionStart >= ele.length) return;

    ele.setSelectionRange(selectionStart, selectionEnd);
    ele.focus();

    return ele.value.slice(selectionStart, selectionEnd);

  }

  return;
}

var bookMark01;

function pasteText(ele, before, text, after) {
  if (!ele) return false;
  before = before ? before : "";
  text = text ? text : "";
  after = after ? after : "";

  if (document.all) {
    var selection = document.selection;
    if (!selection) return false;

    if (selection.type.toLowerCase() != "text" && selection.type.toLowerCase() != "none") return;
    ele.focus();
    var range = selection.createRange();
    if (range.parentElement() != ele) return false;

    range.text = before + text + after;
    bookMark01 = range.getBookmark();
    range.moveStart("character", -after.length);
    range.collapse(true);
    range.select();
    ele.focus();

  } else {
    var selectionStart = ele.selectionStart;
    var selectionEnd = ele.selectionEnd;
    if (selectionStart >= ele.length) return false;

    ele.value.slice(selectionStart, selectionEnd);
    ele.value = ele.value.slice(0, selectionStart) + before + text + after + ele.value.slice(selectionEnd);
    var cursorPos = selectionStart + before.length + text.length;
    ele.setSelectionRange(cursorPos, cursorPos);
    ele.focus();

  }

  return true;
}

var formatOptions = [
  { "identifier": 'bold',
    "before":     '<b>',
    "after":      '</b>',
    "shortcut":   'b' },
  { "identifier": 'italic',
    "before":     '<i>',
    "after":      '</i>',
    "shortcut":   'i' },
  { "identifier": 'underline',
    "before":     '<u>',
    "after":      '</u>',
    "shortcut":   'u' },
  { "identifier": 'strike',
    "before":     '<strike>',
    "after":      '</strike>'},
  { "identifier": 'cite',
    "before":     '<cite>',
    "after":      '</cite>',
    "shortcut":   '"' },
  { "identifier": 'ul',
    "before":     '<ul>\n  <li>',
    "after":      '</li>\n</ul>',
    "shortcut":   '*' },
  { "identifier": 'ol',
    "before":     '<ol>\n  <li>',
    "after":      '</li>\n</ol>',
    "shortcut":   '.' },
  { "identifier": 'macro',
    "dialog":     'insertMacro',
    "shortcut":   '%' },
  { "identifier": 'file',
    "before":     '<\% file name="',
    "after":       '" %>',
    "shortcut":   'f' },
  { "identifier": 'image',
    "before":     '<img src="http://',
    "after":       '" alt="">',
    "shortcut":   'm' },
  { "identifier": 'link',
    "command":     'insertLink',
    "shortcut":   'k' },
  { "identifier": 'undo',
    "shortcut":   'z',
    "command":    'undo' },
  { "identifier": 'redo',
    "shortcut":   'z',
    "shiftKey":   true,
    "command":    'redo' },
  { "identifier": 'redo',
    "shortcut":   'y',
    "command":    'redo' }
]

var dialog;
var openedDialog = null;
function doFormat(format, id) {
  var editableArea = document.getElementById(id);

  for (var i in formatOptions) {
    if (formatOptions[i].identifier == format) {
      if (formatOptions[i].dialog) {
        if (dialog) dialog.close();
        dialog = window.open(formatOptions[i].dialog,'dialog','width=550,height=550,resizable');
        openedDialog = new Object();
        openedDialog.id = id;

      } else if (formatOptions[i].command) {
        doCommand(editableArea, formatOptions[i].command);

      } else {
        pasteText(editableArea, formatOptions[i].before, getSelectedText(editableArea), formatOptions[i].after);

      }

    }
  }
}

function doCommand(ele, cmd) {
  if (is_ie) {
    var selection = document.selection;
    if (!selection) return "";
    ele.focus();
    var range = selection.createRange();
    if (range.parentElement() != ele) return;

    if (cmd == "undo") {
      document.execCommand("undo");

    } else if (cmd == "redo") {
      document.execCommand("redo");

    } else if (cmd == "insertLink") {
      var linkURL = window.prompt("Gib hier eine vollst�ndige URL ein:", "http://" + ele);
      pasteText(ele, '<a href="' + linkURL + '">', getSelectedText(ele), '</a>');

    }

  } else {
    if (cmd == "insertLink") {
      var linkURL = window.prompt("Gib hier eine vollst�ndige URL ein:", "http://");
      pasteText(ele, '<a href="' + linkURL + '">', getSelectedText(ele), '</a>');
    }

  }

}

var KEY_TAB = 9;
var KEY_REFRESH= 116; //F5 abfangen
var KEY_ENTER= 13; 
var TAB_INDENT = 2;
var KEY_SPACE = 32;

var autoCompletion = [
  { "identifier": '<a',
    "pattern":    '<a href="http://"></a>',
    "moveBy":     -6 },
  { "identifier": '<img',
    "pattern":    '<img src="http://" alt="">',
    "moveBy":     -9 },
  { "identifier": '<table',
    "pattern":    '<table><tbody>\n<tr><td></td></tr>\n</tbody></table>',
    "moveBy":     -27 },
  { "identifier": '<ol',
    "pattern":    '<ol>\n  <li></li>\n</ol>\n',
    "moveBy":     -12 },
  { "identifier": '\n*',
    "pattern":    '\n<ul>\n  <li></li>\n</ul>\n',
    "key":        KEY_TAB,
    "moveBy":     -12 },
  { "identifier": '\n1.',
    "pattern":    '\n<ol>\n  <li></li>\n</ol>\n',
    "key":        KEY_TAB,
    "moveBy":     -12 },
  { "identifier": '</li>',
    "pattern":    '</li>\n  <li></li>',
    "moveBy":     -5 },
  { "identifier": '<ul',
    "pattern":    '<ul>\n  <li></li>\n</ul>\n',
    "moveBy":     -12 },
  { "identifier": 'via',
    "pattern":    '[via <a href="http://"></a>]',
    "moveBy":     -7 },
  { "identifier": '<cite',
    "pattern":    '<cite>\n\n</cite>\n',
    "moveBy":     -9 },
  { "identifier": '\n"',
    "pattern":    '\n<cite>\n\n</cite>\n',
    "moveBy":     -9 },
  { "identifier": '<cite>',
    "pattern":    '<cite>\n\n</cite>\n',
    "moveBy":     -9 },
  { "identifier": '<\% image',
    "pattern":    '<\% image name="" %>',
    "moveBy":     -4 },
  { "identifier": '<\% file',
    "pattern":    '<\% file name="" %>',
    "moveBy":     -4 }
]


function editorKeyListener(evt) {
  evt = evt ? evt : window.event;
  var ele = evt.target ? evt.target : evt.srcElement;
  var editableArea = ele;

  var keyCode = (is_ie) ? evt.keyCode : evt.charCode

  if (evt.ctrlKey && !evt.altKey)
  {
    for (var i in formatOptions) {
      if (formatOptions[i].shortcut == String.fromCharCode(keyCode).toLowerCase() && evt.shiftKey == (formatOptions[i].shiftKey == true)) {
        if (formatOptions[i].dialog) {
          if (dialog) dialog.close();
          dialog = window.open(formatOptions[i].dialog,'dialog','width=550,height=550,resizable');

        } else if (formatOptions[i].command) {
          doCommand(editableArea, formatOptions[i].command);

        } else {
          pasteText(editableArea, formatOptions[i].before, getSelectedText(editableArea), formatOptions[i].after);

        }
        stopEvent(evt);
        return;
      }
    }
  }

  if (is_ie) {
    if (evt.keyCode == KEY_SPACE || evt.keyCode == KEY_TAB || evt.keyCode == KEY_ENTER) {
      var testRange = document.selection.createRange();
      testRange.moveStart("character", -20);
      var preText = testRange.text;

      for (var i in autoCompletion) {
        if (preText.substring(preText.length - autoCompletion[i].identifier.length, preText.length) == autoCompletion[i].identifier) {
          if (autoCompletion[i].key != null && autoCompletion[i].key != evt.keyCode) {
            continue;
          }

          var range = document.selection.createRange();
          range.moveStart("character", -autoCompletion[i].identifier.length);
          range.select();

          range.text = autoCompletion[i].pattern;
          
          range.move("character", autoCompletion[i].moveBy);
          range.select();

          stopEvent(evt);
          return;
        }
      }
    }

  } else {
    if (evt.charCode == KEY_SPACE || evt.keyCode == KEY_TAB || evt.keyCode == KEY_ENTER) {

      var selectionStart = ele.selectionStart;
      var selectionEnd = ele.selectionEnd;

      var preText = ele.value.substring(Math.max(0, selectionStart - 20), selectionEnd);

      for (var i in autoCompletion) {
        if (preText.substring(preText.length - autoCompletion[i].identifier.length, preText.length) == autoCompletion[i].identifier) {
          if (autoCompletion[i].key != null && autoCompletion[i].key != evt.keyCode) {
            continue;
          }

          var insertAt = selectionStart - autoCompletion[i].identifier.length;
          ele.value = ele.value.substring(0, insertAt) + autoCompletion[i].pattern + ele.value.substring(selectionStart);

          var newPos = insertAt + autoCompletion[i].pattern.length + autoCompletion[i].moveBy;
          ele.setSelectionRange(newPos, newPos);


          stopEvent(evt);
          return;
        }
      }

    }

  }
}

var userAgent = navigator.userAgent.toLowerCase();
var is_ie	   = ((userAgent.indexOf("msie") != -1) && (userAgent.indexOf("opera") == -1));
var is_opera  = (userAgent.indexOf("opera") != -1);
var is_mac	   = (userAgent.indexOf("mac") != -1);
var is_mac_ie = (is_ie && is_mac);
var is_win_ie = (is_ie && !is_mac);
var is_gecko  = (navigator.product == "Gecko");
var is_editable = (is_win_ie || is_gecko);

function initEditor() {
 var textareas = document.getElementsByTagName("textarea");
  for (var i = 0; i < textareas.length; i++) {
    if (textareas[i].getAttribute("editor") == "editorJS" && is_editable) {
      document.getElementById(textareas[i].id + "_toolbar").style.display = "block";
      addEvent(textareas[i], (is_win_ie) ? "keydown" : "keypress", editorKeyListener);
    }
  }
}

onload = initEditor;
</script>
<style>
.editorToolbar {
  display: none; 
  position: relative; 
  width: 100%; 
  border: 1px solid #000000; 
  background-color: #0a2d6c; 
  height: 24px;
}

.editorToolbar a {
  width: 24px;
  height: 24px;
  display: block;
  float: left;
}

.editorToolbar a.right {
  float: right;
}

.editorToolbar a.first {
}

.editorToolbar a:hover {
  background-color: #999999;
}

.editorToolbar img {
  width: 24px;
  height: 24px;
}
</style>
<!-- end editor enhancement javascript -->
<form method="post" action="<% response.action %>">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td nowrap="nowrap"><span class="small">Title:</span><br />
<% story.content part="title" as="editor" width="24" style="formTitle" %></td>
</tr>
<tr>
<td nowrap="nowrap"><span class="small">Text:</span><br />

<!-- begin toolbar enhanced editor -->
<div id="content_text_toolbar" class="editorToolbar">
<a class="first" href="javascript: doFormat('bold', 'content_text')"><img width="24" height="24" title="Fett (Strg+b)" border="0" src="http://www.antville.org/img/diskrep/editor_icon_bold.gif" alt="[B]" /></a>
<a href="javascript: doFormat('italic', 'content_text')"><img width="24" height="24" title="Kursiv (Strg+i)" border="0" src="http://www.antville.org/img/diskrep/editor_icon_italic.gif" alt="[I]" /></a>
<a href="javascript: doFormat('strike', 'content_text')"><img width="24" height="24" title="Durchgestrichen" border="0" src="http://www.antville.org/img/diskrep/editor_icon_strike.gif" alt="[S]" /></a>
<a href="javascript: doFormat('cite', 'content_text')"><img width="24" height="24" title="Zitat" border="0" src="http://www.antville.org/img/diskrep/editor_icon_cite.gif" alt="&quot;..&quot;" /></a>
<a href="javascript: doFormat('link', 'content_text')"><img width="24" height="24" title="Link einf�gen (Strk+k)" border="0" src="http://www.antville.org/img/diskrep/editor_icon_link.gif" alt="link" /></a>
<a href="javascript: doFormat('image', 'content_text')"><img width="24" height="24" title="Bild einf�gen" border="0" src="http://www.antville.org/img/diskrep/editor_icon_image.gif" alt="img" /></a>
<a href="javascript: doFormat('file', 'content_text')"><img width="24" height="24" title="Datei einf�gen" border="0" src="http://www.antville.org/img/diskrep/editor_icon_file.gif" alt="file" /></a>
<a href="javascript: doFormat('ol', 'content_text')"><img width="24" height="24" title="Ungeordnete Liste" border="0" src="http://www.antville.org/img/diskrep/editor_icon_ol.gif" alt="1." /></a>
<a href="javascript: doFormat('ul', 'content_text')"><img width="24" height="24" title="Geordnete Liste" border="0" src="http://www.antville.org/img/diskrep/editor_icon_ul.gif" alt=" * " /></a>
<a href="javascript: var dele = document.getElementById('content_text');doCommand(dele, 'undo')"><img width="24" height="24" title="Undo" border="0" src="http://www.antville.org/img/diskrep/editor_icon_undo.gif" alt="un" /></a>
<a href="javascript: var dele = document.getElementById('content_text');doCommand(dele, 'redo')"><img width="24" height="24" title="Redo" border="0" src="http://www.antville.org/img/diskrep/editor_icon_redo.gif" alt="re" /></a></div>
<% story.content part="text" as="editor" width="30" height="15" style="formText" id="content_text" editor="editorJS" %></td>
<!-- end toolbar enhanced editor -->

</tr>
<tr>
<td><fieldset><legend class="small">Options</legend>

Add this story to a topic<br />
<table style="margin-left:15px;">
<tr>
<td width="48%" class="small">Choose a topic...<br />
<% story.topicchooser %></td>
<td valign="top" width="4%">&nbsp;</td>
<td valign="top" width="48%" class="small">...or enter a new one<br /> 
<input type="text" name="topic" value="<% request.topic %>" /></td>
</tr>
</table>

<p><% story.addtofront as="editor" checked="checked" %>&nbsp;auf Hauptseite zeigen (sonst nur in Topic)</p>

<p>Editierbar durch<br />
<span class="small"><% story.editableby as="editor" %></span></p>
<% story.discussions as="editor" checked="checked" prefix="<p>" suffix="&nbsp;Kommentare erlauben</p>" %>
<p>Datum: <% story.createtime as="editor" %> </p></fieldset></td>
</tr>
<tr>
<td class="small"><% story.creator as="link" prefix="Erstellt von " %><% story.modifier as="link" prefix=", am&nbsp;by&nbsp;" %><% story.modifytime format="short" prefix="&nbsp;on&nbsp;" %></td>
</tr>
<tr>
<td nowrap="nowrap"><br /><% input type="button" name="publish" value="Publish" %>&nbsp;<% input type="button" name="save" value="Save offline" %>&nbsp;
<input type="button" value="M�llhalde" onclick="this.form.target='_blank'; this.form.action='http://ubique.ch/weblog/waste.pl'; this.form.submit(); if(!document.layers)location.reload()">&nbsp;<% input type="button" name="cancel" value="Cancel" %></td>
</tr>
</table>
</form>