<commit_before>$(function(){
  setUpEnvironment();
  var paint;
  mouseCoordinates = new Array();
});

function setUpEnvironment(){
  setTray();
  setCanvas();
  listenOnSelections();
  listenOnMouse();
  listenOnCanvasClearing();
  setModals();
  
  function setCanvas(){
    var canvasDiv = document.getElementById('canvasDiv');
    var imageHolder = document.createElement("canvas");
    imageHolder.setAttribute("id", "image-holder");
    var midLayer = document.createElement("canvas");
    midLayer.setAttribute("id", "mid-layer");

    var canvas = document.createElement("canvas");
    canvas.setAttribute("id", "canvas");
    canvas.setAttribute("width", "900px");
    canvas.setAttribute("height", "500px");

    canvasDiv.appendChild(imageHolder);
    canvasDiv.appendChild(midLayer);
    canvasDiv.appendChild(canvas);
    imageHolderContext = imageHolder.getContext("2d");
    midLayerContext = midLayer.getContext("2d");
    context = canvas.getContext("2d");
  }

  function setTray(){
    var canvasDiv = document.getElementById("canvasDiv");
    var tray = document.createElement("div");
    tray.setAttribute("id", "tray");

    var colorsDiv = document.createElement("div");
    colorsDiv.setAttribute("id", "colors");
    tray.appendChild(colorsDiv);

    var tipsDiv = document.createElement("div");
    tipsDiv.setAttribute("id", "tips");
    tray.appendChild(tipsDiv);

    var toolDiv = document.createElement("div");
    toolDiv.setAttribute("id", "eraser-div");

    var eraser = document.createElement("div");
    eraser.setAttribute("id", "eraser");
    eraser.setAttribute("style", "background: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-draw-eraser-icon.png) no-repeat center;height:50px;width:50px");

    toolDiv.appendChild(eraser);
    tray.appendChild(toolDiv);
    canvasDiv.appendChild(tray);

    colors();
    tips();

    function colors(){
      <% Drawing::COLORS.each do |color| %>
        var <%= color %> = document.createElement("button");
        <%= color %>.setAttribute("id", "<%= color %>");
        <%= color %>.setAttribute("class", "color");
        <%= color %>.setAttribute("style", "background-color:<%= color %>;border-radius:50%;height:50px;width:50px")
        colorsDiv.appendChild(<%= color %>);
      <% end %>
      var colorPicker = document.getElementById("html5DIV");
      colorsDiv.appendChild(colorPicker);
    }

    function tips(){
      <% Drawing::TIPS.each do |tip| %>
        var size<%= tip %> = document.createElement("div");
        size<%= tip %>.setAttribute("id", "size<%= tip %>");
        size<%= tip %>.setAttribute("class", "tip")
        size<%= tip %>.setAttribute("style", "background-color:black;border-radius:50%;height:<%= tip %>px;width:<%= tip %>px;display:inline-block;");
        tipsDiv.appendChild(size<%= tip %>);
      <% end %>
    }
  }
}

function listenOnSelections(){
  chooseColor();
  chooseTip();
  chooseCartoon();
  $("#html5colorpicker").on("change", pickColor);

  function chooseColor(){
    <% Drawing::COLORS.each do |color| %>
      $("#<%= color %>").on("click", <%= color %>);
     
      function <%= color %>(){
        var currentColorLetters = context.strokeStyle.split(
          '');
        currentColorLetters.shift();
        var currentColorClass = "." + currentColorLetters.join("");
        $(currentColorClass).attr("style", "background-color: colorName; border-radius:50%; height:50px; width:50px;".replace("colorName", $(currentColorClass).attr("id")
          ));
       
        context.globalCompositeOperation = "source-over";
        context.strokeStyle = "<%= color %>";
        $(this).attr("style", "background-color:<%= color %>;border-radius:50%;height:50px;width:50px;border:5px solid;");

        var newColorLetters = context.strokeStyle.split(
          '');
        newColorLetters.shift();
        var newColorClass = newColorLetters.join("");
        $(this).addClass(newColorClass);
      }
    <% end %>
  }

  function pickColor(){
    context.globalCompositeOperation = "source-over"
    context.strokeStyle = $(this).val();
  }

  function chooseTip(){
    <% Drawing::TIPS.each do |tip| %>
      $("#size<%= tip %>").on("click", chooseSize<%= tip %>);

      function chooseSize<%= tip %>(){
        context.lineWidth = <%= tip %>;
      }
    <% end %>
  }

  function chooseCartoon(){
  <% Cartoon.all.each do |cartoon| %>
    $(document).on("click", ".cartoon-<%= cartoon.id %>", chooseCartoon<%= cartoon.id %>);
    function chooseCartoon<%= cartoon.id %>(){
      imageHolderContext.globalAlpha = 0.3;
      var image = this;
      imageHolderContext.clearRect(0, 0, canvas.width, canvas.height);
      imageHolderContext.drawImage(image, canvas.width/25, 5, canvas.width/4, canvas.height/3.5);
      $(".modal-base").hide();
    }
  <% end %>
  }
}

function listenOnMouse(){
  $("#canvas").on("mousedown", mouseDown);

  function mouseDown(e){
    paint = true;
    mouseCoordinates.push([e.offsetX, e.offsetY]);
    $(this).on("mousemove", mouseMove);
  }

  function mouseMove(e){
    if(paint){
      mouseCoordinates.push([e.offsetX, e.offsetY]);
      $(this).on("mouseup", mouseUp);
      draw(e);
    }
  }

  function mouseUp(e){
    paint = false;
  }
}

function draw(e){
  if(paint){
    context.beginPath();
    context.lineJoin = "round";
    context.lineCap = "round";

    context.moveTo(mouseCoordinates[mouseCoordinates.length-2][0], mouseCoordinates[mouseCoordinates.length-2][1])
    context.lineTo(mouseCoordinates[mouseCoordinates.length-1][0], mouseCoordinates[mouseCoordinates.length-1][1])
    context.stroke();
  }
}

function listenOnCanvasClearing(){
  $("#eraser").on("click", erasing);
  $("#start-over").on("click", clearCanvas);
  $("#hide-image").on("click", hideImage);
  $("#remove-image").on("click", removeImage);

  function erasing(){
    context.globalCompositeOperation = "destination-out";
    $("#canvas").attr("class", "erasing");
  }
 
  function clearCanvas(){
    context.clearRect(0, 0, canvas.width, canvas.height);
  }

  function hideImage(){
    var response = confirm("Are you sure?");
    if(response){
      var image = document.getElementById("solid-white");
    midLayerContext.drawImage(image, 0, 0, canvas.width, canvas.height);
    }
  }

  function removeImage(){
    imageHolderContext.clearRect(0, 0, canvas.width, canvas.height);
  }
}

function setModals(){<commit_msg>added alert for erasing drawing<commit_after>$(function(){
  setUpEnvironment();
  var paint;
  mouseCoordinates = new Array();
});

function setUpEnvironment(){
  setTray();
  setCanvas();
  listenOnSelections();
  listenOnMouse();
  listenOnCanvasClearing();
  setModals();
  
  function setCanvas(){
    var canvasDiv = document.getElementById('canvasDiv');
    var imageHolder = document.createElement("canvas");
    imageHolder.setAttribute("id", "image-holder");
    var midLayer = document.createElement("canvas");
    midLayer.setAttribute("id", "mid-layer");

    var canvas = document.createElement("canvas");
    canvas.setAttribute("id", "canvas");
    canvas.setAttribute("width", "900px");
    canvas.setAttribute("height", "500px");

    canvasDiv.appendChild(imageHolder);
    canvasDiv.appendChild(midLayer);
    canvasDiv.appendChild(canvas);
    imageHolderContext = imageHolder.getContext("2d");
    midLayerContext = midLayer.getContext("2d");
    context = canvas.getContext("2d");
  }

  function setTray(){
    var canvasDiv = document.getElementById("canvasDiv");
    var tray = document.createElement("div");
    tray.setAttribute("id", "tray");

    var colorsDiv = document.createElement("div");
    colorsDiv.setAttribute("id", "colors");
    tray.appendChild(colorsDiv);

    var tipsDiv = document.createElement("div");
    tipsDiv.setAttribute("id", "tips");
    tray.appendChild(tipsDiv);

    var toolDiv = document.createElement("div");
    toolDiv.setAttribute("id", "eraser-div");

    var eraser = document.createElement("div");
    eraser.setAttribute("id", "eraser");
    eraser.setAttribute("style", "background: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-draw-eraser-icon.png) no-repeat center;height:50px;width:50px");

    toolDiv.appendChild(eraser);
    tray.appendChild(toolDiv);
    canvasDiv.appendChild(tray);

    colors();
    tips();

    function colors(){
      <% Drawing::COLORS.each do |color| %>
        var <%= color %> = document.createElement("button");
        <%= color %>.setAttribute("id", "<%= color %>");
        <%= color %>.setAttribute("class", "color");
        <%= color %>.setAttribute("style", "background-color:<%= color %>;border-radius:50%;height:50px;width:50px")
        colorsDiv.appendChild(<%= color %>);
      <% end %>
      var colorPicker = document.getElementById("html5DIV");
      colorsDiv.appendChild(colorPicker);
    }

    function tips(){
      <% Drawing::TIPS.each do |tip| %>
        var size<%= tip %> = document.createElement("div");
        size<%= tip %>.setAttribute("id", "size<%= tip %>");
        size<%= tip %>.setAttribute("class", "tip")
        size<%= tip %>.setAttribute("style", "background-color:black;border-radius:50%;height:<%= tip %>px;width:<%= tip %>px;display:inline-block;");
        tipsDiv.appendChild(size<%= tip %>);
      <% end %>
    }
  }
}

function listenOnSelections(){
  chooseColor();
  chooseTip();
  chooseCartoon();
  $("#html5colorpicker").on("change", pickColor);

  function chooseColor(){
    <% Drawing::COLORS.each do |color| %>
      $("#<%= color %>").on("click", <%= color %>);
     
      function <%= color %>(){
        var currentColorLetters = context.strokeStyle.split(
          '');
        currentColorLetters.shift();
        var currentColorClass = "." + currentColorLetters.join("");
        $(currentColorClass).attr("style", "background-color: colorName; border-radius:50%; height:50px; width:50px;".replace("colorName", $(currentColorClass).attr("id")
          ));
       
        context.globalCompositeOperation = "source-over";
        context.strokeStyle = "<%= color %>";
        $(this).attr("style", "background-color:<%= color %>;border-radius:50%;height:50px;width:50px;box-shadow: inset 0 0 0 3px #27496d;");

        var newColorLetters = context.strokeStyle.split(
          '');
        newColorLetters.shift();
        var newColorClass = newColorLetters.join("");
        $(this).addClass(newColorClass);
      }
    <% end %>
  }

  function pickColor(){
    context.globalCompositeOperation = "source-over"
    context.strokeStyle = $(this).val();
  }

  function chooseTip(){
    <% Drawing::TIPS.each do |tip| %>
      $("#size<%= tip %>").on("click", chooseSize<%= tip %>);

      function chooseSize<%= tip %>(){
        context.lineWidth = <%= tip %>;
      }
    <% end %>
  }

  function chooseCartoon(){
  <% Cartoon.all.each do |cartoon| %>
    $(document).on("click", ".cartoon-<%= cartoon.id %>", chooseCartoon<%= cartoon.id %>);
    function chooseCartoon<%= cartoon.id %>(){
      imageHolderContext.globalAlpha = 0.3;
      var image = this;
      imageHolderContext.clearRect(0, 0, canvas.width, canvas.height);
      imageHolderContext.drawImage(image, canvas.width/25, 5, canvas.width/4, canvas.height/3.5);
      $(".modal-base").hide();
    }
  <% end %>
  }
}

function listenOnMouse(){
  $("#canvas").on("mousedown", mouseDown);

  function mouseDown(e){
    paint = true;
    mouseCoordinates.push([e.offsetX, e.offsetY]);
    $(this).on("mousemove", mouseMove);
  }

  function mouseMove(e){
    if(paint){
      mouseCoordinates.push([e.offsetX, e.offsetY]);
      $(this).on("mouseup", mouseUp);
      draw(e);
    }
  }

  function mouseUp(e){
    paint = false;
  }
}

function draw(e){
  if(paint){
    context.beginPath();
    context.lineJoin = "round";
    context.lineCap = "round";

    context.moveTo(mouseCoordinates[mouseCoordinates.length-2][0], mouseCoordinates[mouseCoordinates.length-2][1])
    context.lineTo(mouseCoordinates[mouseCoordinates.length-1][0], mouseCoordinates[mouseCoordinates.length-1][1])
    context.stroke();
  }
}

function listenOnCanvasClearing(){
  $("#eraser").on("click", erasing);
  $("#start-over").on("click", clearCanvas);
  $("#hide-image").on("click", hideImage);
  $("#remove-image").on("click", removeImage);

  function erasing(){
    context.globalCompositeOperation = "destination-out";
    $("#canvas").attr("class", "erasing");
  }
 
  function clearCanvas(){
    if(confirm("We're about to erase your picture!")){
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
  }

  function hideImage(){
    var response = confirm("Are you sure?");
    if(response){
      var image = document.getElementById("solid-white");
    midLayerContext.drawImage(image, 0, 0, canvas.width, canvas.height);
    }
  }

  function removeImage(){
    imageHolderContext.clearRect(0, 0, canvas.width, canvas.height);
  }
}

function setModals(){
{'fraction_non_alphanumeric': 0.1830811979005866, 'fraction_numerical': 0.01018832973139858, 'mean_word_length': 3.7392099487929773, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4026252', 'n_tokens_mistral': 4109, 'n_tokens_neox': 3922, 'n_words': 670}