// ==UserScript==
// @name          Rich Text Blogger Comments
// @namespace     https://www.blogger.com/comment*
// @description   Replace textareas in Blogger comment pages with rich text field.
// @include       https://www.blogger.com/comment*
// @version       1.00
// ==/UserScript==
// Uses icons from the Tango Desktop Project icon library (http://tango.freedesktop.org/Tango_Desktop_Project)

(function() {
  function $(a) {
    return document.getElementById(a);
  }
  var p = $("comment-body").parentNode;
  $("comment-body").style.display = "none";
  
  // Build IFRAME
  var t = document.createElement("iframe");
  t.setAttribute("id", "comment-body-rich");
  t.style.width = "300px";
  t.style.height = "200px";
  t.style.border = "1px solid #aaa";
  t.addEventListener("load", function(e) {
    this.contentDocument.designMode = "on";
    this.contentDocument.execCommand("styleWithCSS", false, false); // Blogger doesn't accept spans.
    $("comment-body-rich").contentDocument.body.innerHTML = $("comment-body").value == "" ? "<br>" : $("comment-body").value;
    this.contentDocument.addEventListener("keyup", function(e) {
      $("comment-body").value = $("comment-body-rich").contentDocument.body.innerHTML;
      
      // Some browsers split block elements instead of inserting BR. Blogger doesn't accept paragraph tags.
      $("comment-body").value = $("comment-body").value.replace(/<\/p><p>/gi, "<br><br>");
      $("comment-body").value = $("comment-body").value.replace(/<\/?p>/gi, "");
      
      var canUndo = $("comment-body-rich").contentDocument.queryCommandEnabled("undo");
      var canRedo = $("comment-body-rich").contentDocument.queryCommandEnabled("redo");
      $("comment-rich-undo").style.opacity = canUndo ? 1 : 0.5;
      $("comment-rich-redo").style.opacity = canRedo ? 1 : 0.5;
    }, false);
    var canUndo = $("comment-body-rich").contentDocument.queryCommandEnabled("undo");
    var canRedo = $("comment-body-rich").contentDocument.queryCommandEnabled("redo");
    $("comment-rich-undo").style.opacity = canUndo ? 1 : 0.5;
    $("comment-rich-redo").style.opacity = canRedo ? 1 : 0.5;
  }, false);
  p.appendChild(t);
  
  // Create Buttons
  p = $("html-usage-msg");
  p.style.width = "300px";
  p.innerHTML = "";
  
  // Redo
  t = document.createElement("button");
  t.style.cssFloat = "right";
  t.setAttribute("id", "comment-rich-redo");
  t.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABZUlEQVR42mNgIAL4zWL7D8TGDOQCqAEg7Ey2Aes+58AMcSSkmB2I3YB4HhCfh9kOMoCgIUAJMyDe2D+b58jKe553133M+r/uU/b/zV+L/y97n/i/+JIYbkOAAl5AfGLNTde/69+n/1/4MuD/gtsqKBhkALIh5S0M1jDN2kC8a+UNt/8b36f+X3JP5f/0u1pwjeuvS8E1g3DpZQm4ITAD5s09ZPBq49uE/0vvq4E1gPCJC5z/yy+IoGgG4a5HJqjeCJ3Pc2vjy+T/ux4Y/j99Rfz/7GtK/xfeUkbBN+8pY9cMAkFzuT5uepPy/+w1lf+TF3L/Q4p3OD5zRQ67Zlg873vk9n/mMlaQ5EcgLgZiA2R5nJphCjbfNP8LVeCBJyUa40xpO+5afQXS/8jKC0DJg+uPKx+bOJf1HDYXEJPW46JW8LcduKYzbdZMph4gn4ccQxSAOAuIo4FYdvsKFpYdK1iYCekDACq5JXC6249rAAAAAElFTkSuQmCC' alt='Redo'>";
  t.addEventListener("click", function(e) {
    if ($("comment-body-rich").contentDocument.queryCommandEnabled("redo")) {
      $("comment-body-rich").contentDocument.execCommand("redo", false, null);
    }
    var canUndo = $("comment-body-rich").contentDocument.queryCommandEnabled("undo");
    var canRedo = $("comment-body-rich").contentDocument.queryCommandEnabled("redo");
    $("comment-rich-undo").style.opacity = canUndo ? 1 : 0.5;
    $("comment-rich-redo").style.opacity = canRedo ? 1 : 0.5;
    e.preventDefault();
    return false;
  }, false);
  p.appendChild(t);
  
  // Undo
  t = document.createElement("button");
  t.style.cssFloat = "right";
  t.style.marginRight = "0.5em";
  t.setAttribute("id", "comment-rich-undo");
  t.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABj0lEQVR42mNgwAGOLGD4z0AO2D+XQQSkmSwDaitZBUEaf39eS7oByJp/P1H9D3PFvoXCz3fPFz2/e6H0kpoqNm6Cmr89NPz/67HC/19viv//ep3///uLPCDO+bFnociVg4tFrgLVyqBr5oJrfqD///sjo/8fb2v+/wpkg+jHZ8X+v7lp9v/b88z/j885/ju4WPgJUI8RSmjDNP8Aav4OxTADXlyShWOQQQ/POvzfu1DsFMhisAF1MOe/rQQb8OW+zv9rB1jgGNmA+ye4/39+mvX/6GrpH3sWiJ7GDIO3Zf9vHWYB0z9fZaLg73dZgQZw/b9xiP3/6zv5//cvlv6CPSCBmkEYFgtwvJLx/7uHef/vn+T//+lJ5v8DS6R+4I4NqAFI4WSwcyZDAJA++fVZ7v/3j8r+H1wsiTud4EqJB+cxSJ1Yw/T/0/OOf4cWCeJPaLhS4ulVfP9e3or9d2CZ8nuSkzrQUKXbR5z/3DjqDDKgnhwDYl/dTtt0aJngOrJy6uFlEplHlktlAg2SgIkBANtzTyodfhmFAAAAAElFTkSuQmCC' alt='Redo'>";
  t.addEventListener("click", function(e) {
    if ($("comment-body-rich").contentDocument.queryCommandEnabled("undo")) {
      $("comment-body-rich").contentDocument.execCommand("undo", false, null);
    }
    var canUndo = $("comment-body-rich").contentDocument.queryCommandEnabled("undo");
    var canRedo = $("comment-body-rich").contentDocument.queryCommandEnabled("redo");
    $("comment-rich-undo").style.opacity = canUndo ? 1 : 0.5;
    $("comment-rich-redo").style.opacity = canRedo ? 1 : 0.5;
    e.preventDefault();
    return false;
  }, false);
  p.appendChild(t);
  
  // Bold
  t = document.createElement("button");
  t.innerHTML = "B";
  t.style.fontWeight = "bold";
  t.style.marginRight = "0.5em";
  t.addEventListener("click", function(e) {
    $("comment-body-rich").contentDocument.execCommand("bold", false, null);
    $("comment-body").value = $("comment-body-rich").contentDocument.body.innerHTML;
    e.preventDefault();
    return false;
  }, false);
  p.appendChild(t);
  
  // Italic
  t = document.createElement("button");
  t.innerHTML = "I";
  t.style.fontStyle = "italic";
  t.style.marginRight = "0.5em";
  t.addEventListener("click", function(e) {
    $("comment-body-rich").contentDocument.execCommand("italic", false, null);
    $("comment-body").value = $("comment-body-rich").contentDocument.body.innerHTML;
    e.preventDefault();
    return false;
  }, false);
  p.appendChild(t);
  
  // Link
  t = document.createElement("button");
  t.setAttribute("id", "form-link-ok");
  t.innerHTML = "Create Link";
  t.addEventListener("click", function(e) {
    var tmp = $("form-link-label");
    tmp.style.display = tmp.style.display == "none" ? "block" : "none";
    e.preventDefault();
    return false;
  }, false);
  p.appendChild(t);
  
  // Link form
  t = document.createElement("label");
  t.setAttribute("id", "form-link-label");
  t.innerHTML = "URL: ";
  t.style.display = "none";
  t.style.marginTop = "1.5em";
  var f = document.createElement("input");
  f.setAttribute("id", "form-link-uri");
  f.setAttribute("type", "url");
  f.style.width = "120px";
  t.appendChild(f);
  f = document.createElement("button");
  f.innerHTML = "OK";
  f.style.marginLeft = "0.5em";
  f.addEventListener("click", function(e) {
    var q = $("form-link-uri").value;
    $("form-link-label").style.display = "none";
    if (q.length == 0) {
      $("comment-body-rich").contentDocument.execCommand("unlink", false, null);
      e.preventDefault();
      return false;
    }
    
    // Make sure there's a protocol, some browsers don't show links without protocol.
    if (q.indexOf(":") == -1) {
      q = "http:\/\/" + q;
    }
    
    $("comment-body-rich").contentDocument.execCommand("createlink", false, q);
    $("comment-body").value = $("comment-body-rich").contentDocument.body.innerHTML;
    e.preventDefault();
    return false;
  }, false);
  t.appendChild(f);
  p.appendChild(t);
})();