docs: function() {
        var editor = $('<div></div>').addClass('kelmu-editor').css('z-order', '60000');
        editor.css('position', 'absolute').css('top', '10px').css('left', (container.children('div').last().outerWidth() + 100) + 'px');
        editor.css('border-radius', '5px').css('box-shadow', '3px 3px 5px #888888').css('background-color', '#FFFAE5');
        editor.css('padding', '10').css('cursor', 'move').draggable();
        editor.appendTo(container);
  
        editor.append($('<h3>Annotation editor</h3>').css('margin', '5px 0px'));
  
        // *********************************************************************************************************
  
        var statusView = $('<div></div>').text('Step 1, substep 1 of 1').addClass('kelmu-editor-status');
        statusView.appendTo(editor);
  
        // *********************************************************************************************************
  
        var generalButtons = $('<div></div>').addClass('kelmu-editor-general-buttons');
        generalButtons.appendTo(editor);
  
        $('<button></button>').text('Settings').addClass('btn').appendTo(generalButtons).click(function(e) {
          e.preventDefault();
          container.find('.kelmu-editor-pane').remove();
          editor.css('height', '');
          editor.css('width', '');
          window.kelmu.data[id].selectedElementNumber = -1;
          window.kelmu.data[id].previousSelectedElementNumber = -1;
  
          var settingsPanel = $('<div></div>').addClass('kelmu-editor-pane').appendTo(editor);
  
          addComponent('Length (ms)', settingsPanel, 'kelmu-editor-animation-length', window.kelmu.data[id].settings.animationLength, 'text');
  
          var helpShown = false;
  
          var pickerFunction = function() {
  
            if (!helpShown) {
              alert('Move the mouse cursor on top of the button and\nkeep moving the cursor until it gets a green border.');
              helpShown = true;
            }
  
            buttonPickerEnabled = true;
            element.find('a, button').css('border', '');
            if (!buttonPickerCreated) {
              createButtonPicker();
            }
          };
  
          addComponent('Begin button', settingsPanel, 'kelmu-editor-begin-button', window.kelmu.data[id].settings.begin, 'text');
          $('<br>').appendTo(settingsPanel);
          $('<button></button>').text('Point Begin button').appendTo(settingsPanel).click(function(e) {
            e.preventDefault();
            buttonToPick = 'begin';
            pickerFunction();
          });
          $('<br>').appendTo(settingsPanel);
  
          addComponent('Undo button', settingsPanel, 'kelmu-editor-undo-button', window.kelmu.data[id].settings.undo, 'text');
          $('<br>').appendTo(settingsPanel);
          $('<button></button>').text('Point Undo button').appendTo(settingsPanel).click(function(e) {
            e.preventDefault();
            buttonToPick = 'undo';
            pickerFunction();
          });
          $('<br>').appendTo(settingsPanel);
  
          addComponent('Step button', settingsPanel, 'kelmu-editor-step-button', window.kelmu.data[id].settings.step, 'text');
          $('<br>').appendTo(settingsPanel);
          $('<button></button>').text('Point Step button').appendTo(settingsPanel).click(function(e) {
            e.preventDefault();
            buttonToPick = 'step';
            pickerFunction();
          });
          $('<br>').appendTo(settingsPanel);
  
          addComponent('Redo button', settingsPanel, 'kelmu-editor-redo-button', window.kelmu.data[id].settings.redo, 'text');
          $('<br>').appendTo(settingsPanel);
          $('<button></button>').text('Point Redo button').appendTo(settingsPanel).click(function(e) {
            e.preventDefault();
            buttonToPick = 'redo';
            pickerFunction();
          });
          $('<br>').appendTo(settingsPanel);
  
          $('<button></button>').text('Save settings').appendTo($('<p></p>').appendTo(settingsPanel)).click(function(e) {
            e.preventDefault();
  
            window.kelmu.data[id].settings.animationLength = parseInt(settingsPanel.find('.kelmu-editor-animation-length').val(), 10);
            window.kelmu.data[id].settings.undo = settingsPanel.find('.kelmu-editor-undo-button').val();
            window.kelmu.data[id].settings.step = settingsPanel.find('.kelmu-editor-step-button').val();
            window.kelmu.data[id].settings.redo = settingsPanel.find('.kelmu-editor-redo-button').val();
            window.kelmu.data[id].settings.begin = settingsPanel.find('.kelmu-editor-begin-button').val();
  
            buttonPickerEnabled = false;
  
            window.kelmu.data[id].actions.update();
            updateView(true, true);
            window.kelmu.data[id].actions.initButtons();
  
            alert('Settings saved.');
  
          });
  
        });
  
        $('<button></button>').text('Import').addClass('btn').appendTo(generalButtons).click(function(e) {
          e.preventDefault();
          container.find('.kelmu-editor-pane').remove();
          editor.css('height', '');
          editor.css('width', '');
          window.kelmu.data[id].selectedElementNumber = -1;
          window.kelmu.data[id].previousSelectedElementNumber = -1;
  
          var importPanel = $('<div></div>').addClass('kelmu-editor-pane').appendTo(editor);
          var helpLabel = $('<p></p>').css('font-size', '11px').appendTo(importPanel);
          helpLabel.text('Copy and paste the definition below.');
          var textarea = $('<textarea></textarea>').appendTo(importPanel);
          textarea.css('font-size', '10px').css('min-height', '200px');
          $('<button></button>').text('Import').appendTo($('<p></p>').appendTo(importPanel)).click(function(e) {
            e.preventDefault();
  
            var text = textarea.val().trim();
            if (text.indexOf('kelmuCb(') >= 0) {
              text = text.substring(8, text.length - 1);
            }
  
            try {
              var parsed = JSON.parse(text);
              if (parsed[id] && parsed[id].settings && parsed[id].definitions) {
                window.kelmu.data[id].settings = parsed[id].settings;
                window.kelmu.data[id].definitions = parsed[id].definitions;
                alert('Definitions succesfully imported.');
                window.kelmu.data[id].actions.update();
                updateView(true, true);
                window.kelmu.data[id].actions.initButtons();
              } else {
                alert('Definition for ' + id + ' was not found or it is incomplete!');
              }
            } catch (error) {
              alert('Malformed definition!');
            }
  
          });
        });
  
        $('<button></button>').text('Export').addClass('btn').appendTo(generalButtons).click(function(e) {
          e.preventDefault();
          container.find('.kelmu-editor-pane').remove();
          editor.css('height', '');
          editor.css('width', '');
          window.kelmu.data[id].selectedElementNumber = -1;
          window.kelmu.data[id].previousSelectedElementNumber = -1;
  
          var exportedData = {};
          exportedData[id] = { definitions: window.kelmu.data[id].definitions, settings: window.kelmu.data[id].settings };
  
          var exportPanel = $('<div></div>').addClass('kelmu-editor-pane').appendTo(editor);
          var helpLabel = $('<p></p>').css('font-size', '11px').appendTo(exportPanel);
          helpLabel.text('Copy and paste the following definition in a file with extension .jsonp');
          var textarea = $('<textarea></textarea>').appendTo(exportPanel);
          textarea.css('font-size', '10px').css('min-height', '200px');
          textarea.val('kelmuCb(' + JSON.stringify(exportedData) + ')');
        });
  
        // *********************************************************************************************************
  
        var buttons = $('<div></div>').addClass('kelmu-editor-move-buttons');
        buttons.appendTo(editor);
  
        // Previous substep
        $('<button></button>').text('<').addClass('btn').appendTo(buttons).click(function(e) {
          e.preventDefault();
          if (window.kelmu.data[id].subStepNumber > 0) {
            window.kelmu.data[id].actions.setSubstep(window.kelmu.data[id].subStepNumber - 1);
          }
          window.kelmu.data[id].selectedElementNumber = -1;
          updateView(true, false);
        });
  
        // Next substep
        $('<button></button>').text('>').addClass('btn').appendTo(buttons).click(function(e) {
          e.preventDefault();
          if (window.kelmu.data[id].subStepNumber < (window.kelmu.data[id].definitions['step' + window.kelmu.data[id].stepNumber] || []).length - 1) {
            window.kelmu.data[id].actions.setSubstep(window.kelmu.data[id].subStepNumber + 1);
          }
          window.kelmu.data[id].selectedElementNumber = -1;
          updateView(true, false);
        });
  
        // New substep
        $('<button></button>').text('+Substep').addClass('btn').appendTo(buttons).click(function(e) {
          e.preventDefault();
  
          if (!window.kelmu.data[id].definitions['step' + window.kelmu.data[id].stepNumber]) {
            // Create new definition block for the substep
            window.kelmu.data[id].definitions['step' + window.kelmu.data[id].stepNumber] = [[]];
          }
  
          window.kelmu.data[id].definitions['step' + window.kelmu.data[id].stepNumber].splice(window.kelmu.data[id].subStepNumber + 1, 0, []);
          window.kelmu.data[id].actions.setSubstep(window.kelmu.data[id].subStepNumber + 1);
          window.kelmu.data[id].selectedElementNumber = -1;
          updateView(true, false);
          notifyModifications();
        });
  
        // Remove substep
        $('<button></button>').text('-Substep').addClass('btn').appendTo(buttons).click(function(e) {
          e.preventDefault();
          if ((window.kelmu.data[id].definitions['step' + window.kelmu.data[id].stepNumber] || []).length > 1) {
            if (confirm('Do you really want to remove this substep?')) {
              // Remove the definition block and make sure that the substep in the editor exists
              window.kelmu.data[id].definitions['step' + window.kelmu.data[id].stepNumber].splice(window.kelmu.data[id].subStepNumber, 1);
              window.kelmu.data[id].actions.setSubstep(Math.max(window.kelmu.data[id].subStepNumber - 1, 0));
            }
  
            window.kelmu.data[id].selectedElementNumber = -1;
            updateView(true, false);
            notifyModifications();
          } else {
            alert('You cannot remove the only substep!');
          }
        });
  
        // *********************************************************************************************************
  
        var newButtons = $('<div></div>').addClass('kelmu-editor-new-buttons');
        newButtons.appendTo(editor);
  
        var createNewButton = function(name, defaults, values) {
          return $('<button></button>').text(name).addClass('btn').appendTo(newButtons).click(function(e) {
            e.preventDefault();
            var data = window.kelmu.data[id];
  
            // Create new definition array for this step if it doesn't exist
            if (!data.definitions['step' + data.stepNumber]) {
              data.definitions['step' + data.stepNumber] = [[]];
            }
  
            data.definitions['step' + data.stepNumber][data.subStepNumber].push($.extend({}, values, defaults));
            data.selectedElementNumber = data.definitions['step' + data.stepNumber][data.subStepNumber].length - 1;
            data.actions.update();
            updateView(true, true);
            notifyModifications();
          });
        };
  
        // New text annotation
        createNewButton('+Text', window.kelmu.defaults.text, {
          text: 'New text',
          width: 400,
          height: 80,
          left: 10,
          top: 10
        }).appendTo(newButtons);
  
        // New arrow
        createNewButton('+Arrow', window.kelmu.defaults.arrow, {
          y1: 10,
          x1: 10,
          y2: 60,
          x2: 60
        }).appendTo(newButtons);
  
        // New line annotation
        createNewButton('+Line', window.kelmu.defaults.line, {
          y1: 10,
          x1: 10,
          y2: 60,
          x2: 60
        }).appendTo(newButtons);
  
        // New button
        createNewButton('+Button', window.kelmu.defaults.button, {}).appendTo(newButtons);
  
        // New action event
        createNewButton('+Action', window.kelmu.defaults.action, {}).appendTo(newButtons);
  
        // New sound
        createNewButton('+Sound', window.kelmu.defaults.sound, {}).click(function(e) {
          e.preventDefault();
          container.find('.kelmu-sound-control').show();
        }).appendTo(newButtons);
  
        // *********************************************************************************************************
        var componentPanel = $('<div></div>').addClass('kelmu-editor-components');
        componentPanel.appendTo(editor);
  
        // *********************************************************************************************************
  
        return editor;
  
      }