var isDragging = false;
var dragOffsetX = 0;
var dragOffsetY = 0;
var textParts = [];
var x = canvas.width / 2;
var y = textSizeTop + padding;
var lh = 1;
var textSize = 10;
var textSizeTop = 10;

// CANVAS.js plugin
(function (window, document) {
  /**
   * CANVAS Plugin - Adding line breaks to canvas
   * @arg {string} [str=Hello World] - text to be drawn
   * @arg {number} [x=0]             - top left x coordinate of the text
   * @arg {number} [y=textSize]      - top left y coordinate of the text
   * @arg {number} [w=canvasWidth]   - maximum width of drawn text
   * @arg {number} [lh=1]            - line height
   * @arg {number} [method=fill]     - text drawing method, if 'none', text will not be rendered
   */
  CanvasRenderingContext2D.prototype.drawBreakingText = function (
    str,
    x,
    y,
    w,
    lh,
    method
  ) {
    // local variables and defaults
    var textSize = parseInt(this.font.replace(/\D/gi, ''));
    var textParts = [];
    var textPartsNo = 0;
    var words = [];
    var currLine = '';
    var testLine = '';
    str = str || '';
    x = x || 0;
    y = y || 0;
    w = w || this.canvas.width;
    lh = lh || 1;
    method = method || 'fill';

    // manual linebreaks
    textParts = str.split('\n');
    textPartsNo = textParts.length;

    // split the words of the parts
    for (var i = 0; i < textParts.length; i++) {
      words[i] = textParts[i].split(' ');
    }

    // now that we have extracted the words
    // we reset the textParts
    textParts = [];

    // calculate recommended line breaks
    // split between the words
    for (var i = 0; i < textPartsNo; i++) {
      // clear the testline for the next manually broken line
      currLine = '';

      for (var j = 0; j < words[i].length; j++) {
        testLine = currLine + words[i][j] + ' ';

        // check if the testLine is of good width
        if (this.measureText(testLine).width > w && j > 0) {
          textParts.push(currLine);
          currLine = words[i][j] + ' ';
        } else {
          currLine = testLine;
        }
      }
      // replace is to remove trailing whitespace
      textParts.push(currLine);
    }

    // render the text on the canvas
    for (var i = 0; i < textParts.length; i++) {
      if (method === 'fill') {
        this.fillText(
          textParts[i].replace(/((\s*\S+)*)\s*/, '$1'),
          x,
          y + textSize * lh * i
        );
      } else if (method === 'stroke') {
        this.strokeText(
          textParts[i].replace(/((\s*\S+)*)\s*/, '$1'),
          x,
          y + textSize * lh * i
        );
      }
    }
  };
})(window, document);

// Initialize canvas and context
var canvas = document.createElement('canvas');
var canvasWrapper = document.getElementById('canvasWrapper');
canvasWrapper.appendChild(canvas);
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext('2d');

// Add event listeners
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseout', onMouseUp);

// Set initial values
var padding = 15;
var textTop = 'i don\'t always make a meme';
var textMiddle = 'but when i do, I use ninivert\'s generator';
var textBottom = 'but when i do, I use ninivert\'s generator';
var textSizeMiddle = 10;
var textSizeBottom = 10;
var image = document.createElement('img');

// Load image
image.src = 'https://imgflip.com/s/meme/The-Most-Interesting-Man-In-The-World.jpg';
image.onload = function () {
  drawMeme();
};

// Draw meme on canvas
function drawMeme() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw image
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  // Set text styles
  ctx.font = textSizeTop + 'px Impact';
  ctx.fillStyle = '#ffffff';
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 2;
  ctx.textAlign = 'center';

  // Draw top text
  ctx.drawBreakingText(
    textTop,
    canvas.width / 2,
    textSizeTop + padding,
    canvas.width - 2 * padding,
    lh,
    'fill'
  );

  // Set middle text styles
  ctx.font = textSizeMiddle + 'px Impact';

  // Draw middle text
  ctx.drawBreakingText(
    textMiddle,
    canvas.width / 2,
    canvas.height / 2,
    canvas.width - 2 * padding,
    lh,
    'fill'
  );

  // Set bottom text styles
  ctx.font = textSizeBottom + 'px Impact';

  // Draw bottom text
  ctx.drawBreakingText(
    textBottom,
    canvas.width / 2,
    canvas.height - padding,
    canvas.width - 2 * padding,
    lh,
    'fill'
  );
}

// Handle mouse down event
function onMouseDown(e) {
  var mouseX = e.clientX - canvas.getBoundingClientRect().left;
  var mouseY = e.clientY - canvas.getBoundingClientRect().top;

  if (
    mouseX > 0 &&
    mouseX < canvas.width &&
    mouseY > 0 &&
    mouseY < canvas.height
  ) {
    isDragging = true;
    dragOffsetX = mouseX - x;
    dragOffsetY = mouseY - y;
  }
}

// Handle mouse up event
function onMouseUp() {
  isDragging = false;
}

// Handle mouse move event
function onMouseMove(e) {
  if (isDragging) {
    x = e.clientX - canvas.getBoundingClientRect().left - dragOffsetX;
    y = e.clientY - canvas.getBoundingClientRect().top - dragOffsetY;
    drawMeme();
  }
}