<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:meta="http://xml.zope.org/namespaces/meta"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      i18n:domain="nuplone"
      meta:interpolation="true"
      tal:define="tools context/@@tools">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="all" href="${tools/portal/++resource++NuPlone.style}/form/base.css"/>
  </head>
  <body id="editBar">
    <div id="buttonBar">
      <div id="editorFunctions">
        <fieldset>
          <button type="button" class="inline strong">B</button>
          <button type="button" class="inline emphasised">I</button>
        </fieldset>

        <fieldset class="buttonGroup">
          <button type="button" class="icon unorderedList">Unordered List</button>
          <button type="button" class="icon orderedList">Ordered List</button>
        </fieldset>

        <fieldset class="buttonGroup">
          <button type="button" class="icon subscript">Subscript</button>
          <button type="button" class="icon superscript">Superscript</button>
        </fieldset>

        <fieldset class="buttonGroup">
          <button type="button" class="icon link" title="Hyperlink">Hyperlink</button>
          <button type="button" class="icon unlink" title="Unlink">Unlink</button>
        </fieldset>
      </div>
    </div>
    <script type="text/javascript" src="${tools/portal/++resource++NuPlone.libraries}/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${tools/portal/++resource++NuPlone.libraries}/jquery.browser.min.js"></script>
    <script type="text/javascript">
      var plone = { portal_url : '${tools/portal/absolute_url}',
                    context_url : '${context/absolute_url}' };
    </script>
    <script type="text/javascript" meta:interpolation="false">
      function getTiny() {
          var topDoc = window.frameElement.ownerDocument,
              topWindow = topDoc.defaultView!==undefined ? topDoc.defaultView : topDoc.parentWindow;
          return topWindow.tinyMCE;
      }

      function activate(ed) {
          $("button").show();
      }

      function deactivate(ed) {
          $("button").hide();
      }

      $("#editorFunctions .strong").on("click", function() {
          getTiny().execCommand("Bold"); return false; });
      $("#editorFunctions .emphasised").on("click", function() {
          getTiny().execCommand("italic"); return false; });

      $("#editorFunctions .unorderedList").on("click", function() {
          getTiny().execCommand("InsertUnorderedList"); return false; });
      $("#editorFunctions .orderedList").on("click", function() {
          getTiny().execCommand("InsertOrderedList"); return false; });

      $("#editorFunctions .subscript").on("click", function() {
          getTiny().execCommand("Subscript"); return false; });
      $("#editorFunctions .superscript").on("click", function() {
          getTiny().execCommand("Superscript"); return false; });

      $("#editorFunctions .link").on("click", function() {
          var topDoc = window.frameElement.ownerDocument,
              $linkFrame = $("#linkFrame", topDoc);

          $linkFrame.get(0).contentWindow.show();
      });
      $("#editorFunctions .unlink").on("click", function() {
          var topDoc = window.frameElement.ownerDocument,
              $linkFrame = $("#linkFrame", topDoc);

          $linkFrame.get(0).contentWindow.removeLink();
      });
    </script>
  </body>
</html>

