HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>Starter Template for Web Design App</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
</head>
<body>
  <div id="design-area">
    <div id="canvas"></div>
  </div>

<div id="draw-wrapper">
    <div id="tools">
      <a id="new-doc" href="javascript:void(0)">New</a>
      <a id="select-tool" href="javascript:void(0)">Select</a>
      <a id="draw-tool" href="javascript:void(0)">Draw</a>
    </div>
    
    <div id="start-props">
      <header>
        &nbsp; starter
      </header>
      <div class="drop-section" align="center">
        Basic starter template for web design applications.
        
        <p>
          Designed & Built by.<br />
          <a id="author" href="http://michaelsdelivery.tk/" target="_blank">Michael Schwartz</a>
        </p>
      </div>
    </div>
    <div id="style-props">
      <header>
        &nbsp; styles
      </header>
      <div class="drop-section" align="center">
        <input class="grab-classname" placeholder="class name" type="text">
        <div class="styleinputs">
          <span class="main-inputs">
            <input class="grab-color" placeholder="color: ?;" type="text">
            <input class="grab-background" placeholder="background: ?;" type="text">
          </span>

<p>
            <font size="2">
              Press [Del] to remove a selected element.
            </font>
          </p>
        </div>
      </div>
    </div>
    <div id="edit-props">
      <header>
        heading
      </header>
      <div class="drop-section" align="center">
        <div id="edit-heading" class="horizontal-bar">
          <a class="grab-p" href="javascript:void(0)">p</a>
          <a class="grab-h1" href="javascript:void(0)">h1</a>
          <a class="grab-h2" href="javascript:void(0)">h2</a>
          <a class="grab-h3" href="javascript:void(0)">h3</a>
          <a class="grab-h4" href="javascript:void(0)">h4</a>
          <a class="grab-h5" href="javascript:void(0)">h5</a>
          <a class="grab-h6" href="javascript:void(0)">h6</a>
          <a class="grab-pre" href="javascript:void(0)">pre</a>
          <a class="grab-blockquote" href="javascript:void(0)">blockquote</a>
        </div>
      </div>
      
      
      <header>
        typography
      </header>
      <div class="drop-section" align="center">
        <div id="edit-font" class="horizontal-bar">
          <a style="font-family: andale mono;" class="grab-andale-mono" href="javascript:void(0)">andale mono</a>
          <a style="font-family: arial;" class="grab-arial" href="javascript:void(0)">arial</a>
          <a style="font-family: arial black;" class="grab-arial-black" href="javascript:void(0)">arial black</a>
          <a style="font-family: courier;" class="grab-courier" href="javascript:void(0)">courier</a>
          <a style="font-family: comic sans ms;" class="grab-comic-sans-ms" href="javascript:void(0)">comic sans ms</a>
          <a style="font-family: garamond;" class="grab-garamond" href="javascript:void(0)">garamond</a>
          <a style="font-family: helvetica;" class="grab-helvetica" href="javascript:void(0)">helvetica</a>
          <a style="font-family: impact;" class="grab-impact" href="javascript:void(0)">impact</a>
          <a style="font-family: palatino;" class="grab-palatino" href="javascript:void(0)">palatino</a>
          <a style="font-family: papyrus;" class="grab-papyrus" href="javascript:void(0)">papyrus</a>
          <a style="font-family: serif;" class="grab-serif" href="javascript:void(0)">serif</a>
          <a style="font-family: sans;" class="grab-sans" href="javascript:void(0)">sans</a>
          <a style="font-family: tahoma;" class="grab-tahoma" href="javascript:void(0)">tahoma</a>
          <a style="font-family: times new roman;" class="grab-times-new-roman" href="javascript:void(0)">times new roman
          </a>
          <a style="font-family: verdana;" class="grab-verdana" href="javascript:void(0)">verdana</a>
        </div>
        
        <p>
          <a href="javascript:void(0)" title="justifyLeft"><span class="fa fa-align-left"></span></a>
          <a href="javascript:void(0)" title="justifyCenter"><span class="fa fa-align-center"></span></a>
          <a href="javascript:void(0)" title="justifyRight"><span class="fa fa-align-right"></span></a>
        </p>
        <p>
          <a title="Bold" href="javascript:void(0)" onclick="document.execCommand(&quot;bold&quot;, false, null);"><span class="fa fa-bold"></span></a>
          <a title="Italic" href="javascript:void(0)" onclick="document.execCommand(&quot;italic&quot;, false, null);"><span class="fa fa-italic"></span></a>
          <a title="Underline" href="javascript:void(0)" onclick="document.execCommand(&quot;underline&quot;, false, null);"><span class="fa fa-underline"></span></a>
          <a title="Strikethrough" href="javascript:void(0)" onclick="document.execCommand(&quot;strikeThrough&quot;, false, null);"><span class="fa fa-strikethrough"></span></a>
          <a title="SubScript" href="javascript:void(0)" onclick="document.execCommand(&quot;subscript&quot;, false, null);"><span class="fa fa-subscript"></span></a>
          <a title="SuperScript" href="javascript:void(0)" onclick="document.execCommand(&quot;superscript&quot;, false, null);"><span class="fa fa-superscript"></span></a>
        </p>

<table>
          <tr>
            <td>
              <input id="edit-font-size" value="3" min="1" max="10" step="1" onchange="fsize.value=value" type="range">
            </td>
            <td>
              <output id="fsize">3</output>
            </td>
          </tr>
        </table>
      </div>
      
      <header>
        heading
      </header>
      <div class="drop-section" align="center">
        <div id="edit-extras" class="horizontal-bar">
          <a title="Indent" href="javascript:void(0)" onclick="document.execCommand(&quot;indent&quot;, false, null);"><span class="fa fa-indent"></span></a>
          <a title="Outdent" href="javascript:void(0)" onclick="document.execCommand(&quot;outdent&quot;, false, null);"><span class="fa fa-outdent"></span></a>
          <a title="Unordered List" href="javascript:void(0)" onclick="document.execCommand(&quot;insertUnorderedList&quot;, false, null);"><span class="fa fa-list-ul"></span></a>
          <a title="Ordered List" href="javascript:void(0)" onclick="document.execCommand(&quot;insertOrderedList&quot;, false, null);"><span class="fa fa-list-ol"></span></a>
          <a title="Horizontal Rule" href="javascript:void(0)" onclick="document.execCommand('insertHorizontalRule',false,null);"><span class="fa fa-minus-square-o"></span></a>
          <a title="Link" href="javascript:void(0)" onclick="var linkURL = prompt(&quot;Enter the URL for this link:&quot;, &quot;http://&quot;); document.execCommand(&quot;CreateLink&quot;, false, linkURL);"><span class="fa fa-link"></span></a>
          <a title="Unlink" href="javascript:void(0)" onclick="document.execCommand(&quot;Unlink&quot;, false, null);"><span class="fa fa-unlink"></span></a>
          <a title="Image" href="javascript:void(0)" onclick="var imgSrc = prompt('Enter image location', ''); if(imgSrc != null) {document.execCommand('insertimage', false, imgSrc);}"><span class="fa fa-picture-o"></span></a>
        </div>
      </div>
    </div>
    <div id="draw-props">
      <header>
        &nbsp; elements
      </header>
      <div class="drop-section">
        <form class="draw-elements" name='draw-elements'>
          <input type="radio" value="div" id="div" name="elms" checked="true">
           <label for="div"> Div</label><br />
          <input type="radio" value="span" id="span" name="elms">
           <label for="span"> Span</label><br />
          <input type="radio" value="a" id="a" name="elms">
           <label for="a"> Anchor</label><br />
          <input type="radio" value="button" id="button" name="elms">
           <label for="button"> Button</label><br />
        </form>
      </div>
      
      <header title=" options">
        &nbsp; options<br>
      </header>
      <div class="drop-section draw-opt-props" align="center">
        <div id="div-opts">
          <input id="center-align-div" type="checkbox" checked="true" />
            <label for="center-align-div"> Align inner elements to center?</label>
        </div>
        <div id="span-opts">
          <input id="center-align-span" type="checkbox" />
            <label for="center-align-span"> Align inner elements to center?</label>
        </div>
        <div id="anchor-opts">
          <input id="apply-href" type="text" placeholder="Url to website?" /><br />
          <input id="apply-name" type="text" placeholder="name?" /><br />
          <span id="apply-target">
            <input id="apply-targetblank" type="checkbox" checked="true" /> 
              <label for="apply-targetblank">target="_blank"?</label>
          </span>
        </div>
        <div id="button-opts">
          Sorry this element has no options
        </div>
      </div>
    </div>
    <textarea id="code" style="display:none;"></textarea>
  </div>
</body>
</html>

*:active, *:focus {
  outline: 0;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font: 14px arial;
  color: #000;
  background: #333;
}

/* Right Panel */
#draw-wrapper {
  cursor: default;
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  color: #ccc;
  background: #333;
  overflow: auto;
}

/* Toolbox */
#tools {
  padding-top: .5em;
  text-align: center;
}

#tools a {
  text-decoration: none;
  color: #09a;
  margin: 0 .5em;
  padding: 0 .5em;
  font: 16px arial;
}

#tools a:hover {
  color: #3bf;
}

#tools .activetool {
  border-bottom: 1px solid #3df;
}

/* Property Containers */
#author {
  text-decoration: none;
  padding: 1em 2em;
  background: #69f;
  color: #edf;
  border-radius: 1em;
  position: relative;
  top: 1.5em;
}

#author:hover {
  color: #fff;
  background: #6af;
}

#author:active {
  background: #66f;
}

#draw-wrapper header {
  cursor: pointer;
  padding: 0 5px;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #151515;
  background: #252525;
  color: #999;
  font: 14px times;
  text-transform: uppercase;
}

#draw-wrapper .activedrop {
  color: #666;
}

.drop-section {
  padding: 5px;
  font: 14px arial;
}

.styleinputs input[type=text], .styleinputs input[type=number] {
  width: 45%;
  background: #444;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #1a1a1a #272729 #272729 #272729;
  font: 15px arial;
  -webkit-font-smoothing: antialiased;
  color: #ced;
}

#draw-props input[type=text] {
  width: 90%;
  background: #444;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #1a1a1a #272729 #272729 #272729;
  font: 15px arial;
  -webkit-font-smoothing: antialiased;
  color: #ced;
}

.styleinputs ::-webkit-input-placeholder, 
#anchor-opts ::-webkit-input-placeholder { /* WebKit browsers */
    color: #888;
}
.styleinputs :-moz-placeholder, 
#anchor-opts :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #888;
}
.styleinputs ::-moz-placeholder, 
#anchor-opts ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #888;
}
.styleinputs :-ms-input-placeholder, 
#anchor-opts :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #888;
}

.grab-classname {
  width: 70%;
  color: #fff;
  font: 16px arial;
  background-color: #09a;
  border: 0; margin: 1em;
  padding: 1em 2em;
  margin: .25em 0 1em 0;
  border-radius: 1em;
}

/* Edit Properties */
#edit-props a {
  padding: 5px 10px;
  margin: 0px 2px;
  border-style: none;
  border-width: 0px;
  font-family: sans;
  color: #ccc;
  background: #444;
  text-decoration: none;
  font-size: 12px;
  font-weight: normal;
}

#edit-props a:hover {
  color: #fff;
}

#edit-props .horizontal-bar {
  display: inline-block;
  padding: 1em 0;
  margin: 0;
  width: 90%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/* Drawing Area */
#design-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 300px;
  bottom: 0;
  overflow: hidden;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  overflow: auto;
}

/* Resize Constructs */
.drag {
  position: absolute;
  border: 1px solid #89B;
  background: #BCE;
  width: 58px;
  height: 58px;
  top: 120px;
  cursor: move;
}

.handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #89B;
  background: #9AC; 
}

.NW, .NN, .NE { top: -4px; }
.NE, .EE, .SE { right: -4px; }
.SW, .SS, .SE { bottom: -4px; }
.NW, .WW, .SW { left: -4px; }
.SE, .NW { cursor: nw-resize; }
.SW, .NE { cursor: ne-resize; }
.NN, .SS { cursor: n-resize; left: 50%; margin-left: -4px; }
.EE, .WW { cursor: e-resize; top: 50%; margin-top: -4px; }
.selected { background-color: #ECB; border-color: #B98; }
.selected .handle { background-color: #CA9; border-color: #B98; }

$(document).ready(function() {
  // Setup our variables
  var counter = 1,
      elmstyle = false,
      drawable = false,
      drawing  = false,
      mS = {},
      dBox,
      editableElm;
  
  // Global Function Callbacks
  function CheckDrawOptions() {
    if ($("#div").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#div-opts").show();
    } else if ($("#span").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#span-opts").show();
    } else if ($("#a").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#anchor-opts").show();
    } else if ($("#button").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#button-opts").show();
    }
  }
  var BoxOptions =  function() {
    if ($("#div").is(":checked")) {
      if ($("#center-align-div").is(":checked")) {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' align='center' />")
                 .html("<h1>GISEMENT</h1>\nJe ne sais pas quoi mettre ici, donc je suppose que je vais mettre ce texte ici.");
      } 
      else {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />")
                 .html("<h1>GISEMENT</h1>\nJe ne sais pas quoi mettre ici, donc je suppose que je vais mettre ce texte ici.");
      }
    }
    if ($("#span").is(":checked")) {
      if ($("#center-align-span").is(":checked")) {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' align='center' />")
                 .html("Certains textes");
      } 
      else {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />")
                 .html("Certains textes");
      }
    }
    if ($("#a").is(":checked")) {
      if (($("#apply-href").val() === "") && ($("#apply-name").val() === "")) {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />")
                 .html("Je suis un lien");
      }
      else if ($("#apply-href").val() === "") {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' name='" + $("#apply-name").val() + "' />")
                 .html("Je suis un lien");
      }
      else if ($("#apply-targetblank").is(":checked")) {
        if ($("#apply-name").val() === "") {
          dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' href='" + $("#apply-href").val() + "' target='_blank' />")
                  .html("Je suis un lien");
        } else {
          dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' href='" + $("#apply-href").val() + "' name='" + $("#apply-name").val() + "' target='_blank' />")
                  .html("Je suis un lien");
        }
      }
      else if ($("#apply-name").val() === "") {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' href='" + $("#apply-href").val() + "' />")
                 .html("Je suis un lien");
      }
      else {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' href='" + $("#apply-href").val() + "' name='" + $("#apply-name").val() + "' />")
                 .html("Je suis un lien");
      }
    }
    if ($("#button").is(":checked")) {
      if ($(".draw-elements #button").is(":checked")) {
        dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />")
                 .html("Certains textes");
      }
    }
  };
  var HandleSelectedElement = function() {
    if ($("#select-tool.activetool").is(":visible")) {
      // Selects Element
      $('#canvas').children().on('mousedown touchstart', function(e) {
        if(elmstyle) {
          // Remove previously added handles
          $('.handle').remove();

// Grab selected elements class
          $(".grab-classname").val($(this).attr('class'));

// Remove all ids from previously selected elements
          $("#canvas *").removeAttr('id');

// Make element styleable
          $(this).attr('id', 'stylethis').append('<div class="handle NE"></div><div class="handle NN"></div><div class="handle NW"></div><div class="handle WW"></div><div class="handle EE"></div><div class="handle SW"></div><div class="handle SS"></div><div class="handle SE"></div>');

// Remove style values and focus
          $(".main-inputs input").val("").blur();
        }
      })
      .drag("start",function( ev, dd ){
        dd.attrc = $( ev.target ).prop("className");
        dd.attrd = $( ev.target ).prop("id");
        dd.width = $( this ).width();
        dd.height = $( this ).height();
      }).drag(function( ev, dd ){
        var props = {};
        if ( dd.attrc.indexOf("E") > -1 ){
          props.width = Math.max( 32, dd.width + dd.deltaX );
        }
        if ( dd.attrc.indexOf("S") > -1 ){
          props.height = Math.max( 32, dd.height + dd.deltaY );
        }
        if ( dd.attrc.indexOf("W") > -1 ){
          props.width = Math.max( 32, dd.width - dd.deltaX );
          props.left = dd.originalX + dd.width - props.width;
        }
        if ( dd.attrc.indexOf("N") > -1 ){
          props.height = Math.max( 32, dd.height - dd.deltaY );
          props.top = dd.originalY + dd.height - props.height;
        }
        if ( dd.attrd.indexOf("stylethis") > -1 ){
          props.top = dd.offsetY;
          props.left = dd.offsetX;
        }
        $('#stylethis').css( props );
      }, {relative:true})
      .on('dblclick', function() {
        EditableStylez();
        return false;
      })
      .filter("a").on('click mousedown touchstart', function() {
        return false;
      }).on('mouseup touchend', function() {
        return true;
      });
    }
  };
  var EditableStylez = function() {
    $("#canvas *").prop('contenteditable', true);
    window.getSelection().removeAllRanges();
    $("#style-props").hide();
    $("#edit-props").show();
    // Deactivates interactive design and right click menu when tool is active
    $("div.handle").remove();
    $("#code").val($("#canvas").html());
    $("#canvas").html($("#code").val());
    $('[contenteditable]').on('focus',function(){
      editableElm = this;
    });
    $("#canvas").find("#stylethis").trigger('focus');
    $("#canvas *").removeAttr("id");
  };
  
  // Toggle Property Dropdown
  $("#draw-wrapper header").on('click', function() {
    $(this).toggleClass("activedrop").next().toggle();
  });
  
  // Handles Select Tool
  $("#select-tool").on('click', function() {
    $("#draw-tool").removeClass("activetool");
    $(this).toggleClass("activetool");
    $("#code").val($("#canvas").html());
    $("#canvas").html($("#code").val());
    
    if ($("#select-tool.activetool").is(":visible")) {
      $("#draw-props, #start-props").hide();
      $("#style-props").show();
      drawable = false;
      elmstyle = 1;
      
      // Prevent anchor leave
      if ($("#canvas").find("a").prop("target") === "_blank") {
        $("#canvas").find("a").prop("target", "_self");
      } window.onbeforeunload = function() {
        return false;
      };
      
      if(elmstyle) {
        HandleSelectedElement();
        $(".grab-classname").on("keyup", function() {
          $("#stylethis").attr('class', $(this).val());
        });
        $(".grab-color").on("keyup", function() {
          $("."+ $(".grab-classname").val()).css({
            "color": $(this).val()
          });
        });
        $(".grab-background").on("keyup", function() {
          $("."+ $(".grab-classname").val()).css({
            "background": $(this).val()
          });
        });
        
        // Press Del to remove selected element
        $(document).keydown(function(e) {
          // See if element is visible first
          if ($("#stylethis").is(":visible")) {
            // If element is visible remove
            if (e.which === 46) {
              if ($(".main-inputs input").is(":focus")) {
                // Do nothing if an input is focused
              } else {
                $("#stylethis").remove();
              }
            }
          }
        });
      }
    }
    else {
      elmstyle = false;
      // Remove all ids from previously selected elements
      $("#canvas *").removeAttr('id');
      $(".handle").remove();
      
      // Remove style values
      $(".main-inputs input").val("");
      
      $("#style-props, #edit-props").hide();
      if (($("#style-props").is(":hidden")) && ($("#draw-props").is(":hidden"))) {
        $("#start-props").show();
        if ($("#canvas").find("a").prop("target") === "_self") {
          $("#canvas").find("a").prop("target", "_blank");
        }
      }
    }
  });
  
  // Handles Draw Tool
  $("#draw-tool").on('click', function() {
    $("#select-tool").removeClass("activetool");
    $(this).toggleClass("activetool");
    $("#code").val($("#canvas").html());
    $("#canvas").html($("#code").val());
    if ($("#draw-tool.activetool").is(":visible")) {
      elmstyle = false;
      drawable = 1;
      $("#draw-props").show();
      $("#style-props, #edit-props, #start-props").hide();
      
      // Prevent anchor leave
      if ($("#canvas").find("a").prop("target") === "_blank") {
        $("#canvas").find("a").prop("target", "_self");
      } window.onbeforeunload = function() {
        return false;
      };
      
      // Remove all ids from previously selected elements
      $("#canvas *").removeAttr('id');
      $(".handle").remove();
      
      $("#apply-href").on('keyup', function() {
        if ($(this).val() === "") {
          $("#apply-target").hide();
        } else {
          $("#apply-target").show();
        }
      });
      
      // Handles Draw Options
      $(".draw-elements input[type=radio]").on('change', function() {
        CheckDrawOptions();
      });
      $(".draw-opt-props > div input").on('change', function() {
        BoxOptions();
      });
    }
    else {
      drawable = false;
      $("#draw-props").hide();
      if (($("#style-props").is(":hidden")) && ($("#draw-props").is(":hidden"))) {
        $("#start-props").show();
        if ($("#canvas").find("a").prop("target") === "_self") {
          $("#canvas").find("a").prop("target", "_blank");
        }
      }
    }
  });

// Handles Drawable Elements
  $("#canvas").on('mousedown touchstart', function(e) {
    if(drawable) {
      drawing = true;
      mS.x = e.pageX;
      mS.y = e.pageY;
      BoxOptions();
      $(this).append(dBox);
      
      // Do not select text when drawing
      return false;
    }
  });
  $(document).on('mousemove touchmove', function(e) {
    if(drawing && drawable){
      var mPos = {x:e.pageX, y:e.pageY};
      var css = {};
        css.position   = 'absolute';
        css.left       = (mPos.x > mS.x) ? mS.x : mPos.x;
        css.top        = (mPos.y > mS.y) ? mS.y : mPos.y;
        css.width      = Math.abs(mPos.x - mS.x);
        css.height     = Math.abs(mPos.y - mS.y);
        css.border = '1px dotted rgb(0, 34, 102)';
        dBox.css(css);
      
      // Do not select text when drawing
      return false;
    }
  }).on('mouseup touchend', function(e) {
    drawing  = false;
    if ($("#select-tool.activetool").is(":visible")) {
      // Prevent anchor leave
      if ($("#canvas").find("a").prop("target") === "_blank") {
        $("#canvas").find("a").prop("target", "_self");
      } window.onbeforeunload = function() {
        return false;
      };
    } else if ($("#draw-tool.activetool").is(":visible")) {
      // Prevent anchor leave
      if ($("#canvas").find("a").prop("target") === "_blank") {
        $("#canvas").find("a").prop("target", "_self");
      } window.onbeforeunload = function() {
        return false;
      };
    }
  });
  
  // New Document
  $("#new-doc").on('click', function() {
    var x = window.confirm("Did you save your changes?");
    if (x) {
      $("#canvas").html("");
      $("#code").val("");
      if ($("#select-tool.activetool").is(":visible")) {
        $("#select-tool").trigger("click");
      }
      if ($("#edit-tool.activetool").is(":visible")) {
        $("#edit-tool").trigger("click");
      }
    } else {
      // The user decided not to create a new doc. Therefore do nothing
    }
  });
  
  CheckDrawOptions();
  
  // Remove style values
  $(".main-inputs input").val("");

// Hide style properties onload
  $("#style-props, #edit-props, #draw-props").hide();
  if ($("#apply-href").val() === "") {
    $("#apply-target").hide();
  } else {
    $("#apply-target").show();
  }
});