function init() {
  window.c = document.createElement('canvas');
  c.width = c.height = 500;
  document.getElementById('container').appendChild(c);
  window.ctx = c.getContext('2d');
  ctx.translate(c.width/2, c.height/2); // center around the center of the circle
  
  // Options
  window.opts = {
    modulo: 1000, // modulo
    coef: 2, // multiplier
    autoAlpha: true, // adjust the alpha depending on the number of points
    drawCircle: true,
    drawPoints: false,
    drawLines: true,
    drawText: false,
    drawTitle: true,
    res: Math.min(c.width, c.height), // resolution
    export: null, // export button placeholder
    ENDOFOPTIONS: null, // Placeholder
    radius: Math.min(c.width/2, c.height/2)-80, // radius of the big circle
    pointRadius: 4, // radius of the points
    circleColor: '#cccccc',
    pointColor: '#16a085',
    lineColor: '#222222',
    textColor: '#1abc9c',
    titleColor: '#2c3e50',
    bgColor: '#ffffff',
    elmts: {},
    handlers: {
      modulo: function() {
        let val = Math.max(this.value, 1);
        opts.modulo = val;
        this.value = val;
        draw();
      },
      coef: function() {
        let val = this.value;
        opts.coef = val;
        this.value = val;
        draw();
      },
      autoAlpha: function() {
        opts.autoAlpha = this.checked;
        draw();
      },
      drawCircle: function() {
        opts.drawCircle = this.checked;
        draw();
      },
      drawPoints: function() {
        opts.drawPoints = this.checked;
        draw();
      },
      drawLines: function() {
        opts.drawLines = this.checked;
        draw();
      },
      drawText: function() {
        opts.drawText = this.checked;
        draw();
      },
      drawTitle: function() {
        opts.drawTitle = this.checked;
        draw();
      },
      res: function() {
        // Retranslate the canvas back to (0, 0)
        ctx.translate(-c.width/2, -c.height/2);
        // Adjust the variables that depend on resolution
        let val = Math.max(this.value, 200);
        c.width = c.height = val;
        opts.res = val;
        opts.radius = val/2-80;
        // Apply new translation
        ctx.translate(val/2, val/2);
        // Update and render
        this.value = val;
        draw();
      },
      export: function() {
        let link = document.createElement('a');
        link.download = `Modular multiplication of ${opts.coef} modulo ${opts.modulo}`;
        link.href = c.toDataURL('image/png');
        // Need to add the link to the body for Firefox
        document.body.appendChild(link);
        link.setAttribute("type", "hidden");
        link.click();
      }
    },
    init: function() {
      let keys = Object.keys(this),
          elmt, type;

      for (let i of keys) {
        // Stop when you arrive at the end of the option list
        if (i === 'ENDOFOPTIONS') break;

        this.elmts[i] = document.getElementById(i);
        
        elmt = this.elmts[i];
        type = elmt.type;

        if (type === 'checkbox' || type === 'button') {
          elmt.checked = this[i];
          elmt.onclick = this.handlers[i];
        }
        if (type === 'number') {
          elmt.value = this[i];
          elmt.onchange = this.handlers[i];
        }
      }
    }
  };
  
  opts.init();
  
  draw();
}


function draw() {
  /**
   * Utility functions
   * Get the index of the point to bind to
   * Get an angle from a point relative to the center of the circle
     -Math.PI/2 to have point 0 facing up
   * Get the of a point from said angle and radius
   */
  let getBindingPoint = n => n*opts.coef%opts.modulo;
  let getAngle = ratio => ratio*2*Math.PI-Math.PI/2;
  let getCoords = (a, r) => ({x: Math.cos(a)*r, y: Math.sin(a)*r});
  
  // Clear the canvas
  ctx.globalAlpha = 1;
  ctx.fillStyle = opts.bgColor;
  ctx.fillRect(-c.width/2, -c.height/2, c.width, c.height);
  
  // Draw external circle
  if (opts.drawCircle) {
    ctx.beginPath();
    ctx.arc(0, 0, opts.radius, 2*Math.PI, 0);
    ctx.strokeStyle = opts.circleColor;
    ctx.stroke();
  }
  
  // Draw title
  if (opts.drawTitle) {
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.font = 'italic 16pt Arial';
    ctx.fillStyle = opts.titleColor;
    ctx.fillText(`Modular multiplication of ${opts.coef} modulo ${opts.modulo}`, -c.width/2+20, -c.height/2+20, c.width-40);
  }
  
  let point, bindingPoint, textPoint;

  // Draw points, lines and text
  for (let i=0; i<opts.modulo; i++) {
    
    // Draw the point
    point = getCoords( getAngle(i/opts.modulo), opts.radius );
    if (opts.drawPoints) {
      ctx.beginPath();
      ctx.arc(point.x, point.y, opts.pointRadius, 2*Math.PI, 0);
      ctx.fillStyle = opts.pointColor;
      ctx.fill();
    }
  
    // Draw the line
    if (opts.drawLines) {
      bindingPoint = getCoords( getAngle(getBindingPoint(i)/opts.modulo), opts.radius );
      if (opts.autoAlpha) ctx.globalAlpha = Math.min(opts.res*.2/opts.modulo, 1);
      ctx.beginPath();
      ctx.moveTo(point.x, point.y);
      ctx.lineTo(bindingPoint.x, bindingPoint.y);
      ctx.strokeStyle = opts.lineColor;
      ctx.stroke();
      ctx.globalAlpha = 1;
    }
  
    // Draw the text
    if (opts.drawText) {
      textPoint = getCoords( getAngle(i/opts.modulo), opts.radius*1.08 );
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.font = '12pt Arial'
      ctx.fillStyle = opts.textColor;
      ctx.fillText(i, textPoint.x, textPoint.y);
    }
  }
}


init();