(function () {
  function preview() {
    var previewDiv = document.getElementById('preview');
    var previewFrame = document.getElementById('previewFrame');
    if (! previewFrame) {
      previewFrame = document.createElement('iframe');
      previewFrame.id = 'previewFrame';
      previewFrame.name = 'previewFrame';
      previewFrame.width = '100%';
      previewFrame.height = '200';
      previewDiv.appendChild(previewFrame);
    }

    var oldForm = document.forms[0];
    var newForm = oldForm.cloneNode(true);
    newForm.elements.text.value = oldForm.elements.text.value;
    newForm.action = 'preview';
    newForm.target = 'previewFrame';
    var attachment = newForm.elements.attachment;
    attachment.parentNode.removeChild(attachment);
    previewDiv.appendChild(newForm);
    newForm.submit();
    previewDiv.removeChild(newForm);
    window.location = '#preview';
  };

  window.onload = function () {
    var submitDiv = document.getElementById('submitDiv');
    if (! submitDiv) {
      return;
    }
    var button = document.createElement('button');
    button.type = 'button';
    button.appendChild(document.createTextNode('Preview'));
    button.onclick = function () {
      preview();
    };
    submitDiv.insertBefore(button, submitDiv.firstChild);
    button = null;
    submitDiv = null;
  }
})();