(function () {
  /*
   * Utils
   */
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }


  /*
   * Class constructors
   */
  function Point(x, y) {
    this.x = x || 0;
    this.y = y || 0;

    this.setToRandomPosition = function (maxX, maxY) {
      this.x = getRandomInt(0, maxX);
      this.y = getRandomInt(0, maxY);
    };
  }

  function Rectangle(options) { //fini Exo1
    this.__proto__ = new Shape();

    this.generatePoints = function (options) {
      var pointA = new Point();
      pointA.setToRandomPosition(10, 10);
      this.points.push(pointA);
      var pointB = new Point();
      pointB.x = pointA.x+options.maxWidth;
      pointB.y = pointA.y;
      this.points.push(pointB);
      var pointD = new Point();
      pointD.x = pointA.x+options.maxWidth;
      pointD.y = pointA.y+options.maxHeight;
      this.points.push(pointD);
      var pointC = new Point();
      pointC.x = pointA.x-options.maxWidth;
      pointC.y = pointA.y+options.maxHeight;
      this.points.push(pointC);
    }
  }

  function Square(size) {
    return new Rectangle(size, size);
  }

  function Circle(radius) {
    this.__proto__ = new Shape();

    this.draw = function (context) {
      context.fillStyle = this.color;
      context.beginPath();
      context.arc(this.points[0].x, this.points[0].y, radius, 0, 2 * Math.PI, false);
      context.fill();
    };

    this.generatePoints = function () {
      var c = new Point();
      c.setToRandomPosition(1000, 1000);
      this.points.push(c)
    }

    // OLD METHOD WITH MULTIPLE POINTS
    /*this.generatePoints = function (width, height) {
      var step = 2*Math.PI/20;  // see note 1
      var h = 150;
      var k = 150;
      var r = 50;
      for(var theta=0;  theta < 2*Math.PI;  theta+=step){
         var x = h + r*Math.cos(theta);
         var y = k - r*Math.sin(theta);
         var point = new Point();
         point.x = x;
         point.y = y;
         this.points.push(point);
       }
    }*/
  }

  function Shape() {
    this.color = 'black';
    this.points = [];

    this.draw = function (context) {
      context.fillStyle = this.color;
      context.beginPath();

      //console.log(this.points);

      this.points.forEach(function (point, index, points) {
        if (index === 0) {
          context.moveTo(point.x, point.y);

        } else {
          context.lineTo(point.x, point.y);
        }

        if (index === points.length - 1) {
          context.fill();
        }
      });
    };

    this.generatePoints = function (options) {
      for (var i = 0; i < options.numberOfPoints; i++) {
        var point = new Point();
        point.setToRandomPosition(options.maxWidth, options.maxHeight);
        this.points.push(point);
      }

      if (options.shouldSort) {
        this.sortPoints();
      }
    };

    this.sortPoints = function () {
      function lineDistance(point1, point2) {
        var xs = point2.x - point1.x;
        var ys = point2.y - point1.y;

        xs = xs * xs;
        ys = ys * ys;
        return Math.sqrt(xs + ys);
      }

      // calculate max and min x and y
      var minX = this.points[0].x;
      var maxX = this.points[0].x;
      var minY = this.points[0].y;
      var maxY = this.points[0].y;

      for (var i = 1; i < this.points.length; i++) {
        if (this.points[i].x < minX) minX = this.points[i].x;
        if (this.points[i].x > maxX) maxX = this.points[i].x;
        if (this.points[i].y < minY) minY = this.points[i].y;
        if (this.points[i].y > maxY) maxY = this.points[i].y;
      }


      // choose a "central" point
      var center = {
        x: minX + (maxX - minX) / 2,
        y: minY + (maxY - minY) / 2
      };

      // precalculate the angles of each point to avoid multiple calculations on sort
      for (var j = 0; j < this.points.length; j++) {
        this.points[j].angle = Math.acos((this.points[j].x - center.x) / lineDistance(center, this.points[j]));

        if (this.points[j].y > center.y) {
          this.points[j].angle = Math.PI + Math.PI - this.points[j].angle;
        }
      }

      // sort by angle
      this.points = this.points.sort(function (a, b) {
        return a.angle - b.angle;
      });
    };
  }


  /*
   * Core of the app
   */
  function drawShapeHandler() {
    var canvasElement = document.getElementById('draw-area');

    if (!canvasElement.getContext) {
      return;
    }

    var colorInput = document.getElementById('color-input');
    var mode = document.querySelector('input[name="mode"]:checked').value;
    var ctx = canvasElement.getContext('2d');

    var shape = createShape(mode, canvasElement);
    shape.color = colorInput.value;
    shape.draw(ctx, true);
  }

  function createShape(mode, canvas) {
    var pointsInput = document.getElementById('points-input');
    var isRandomInput = document.getElementById('is-random-input');
    var numberOfPoints = parseInt(pointsInput.value);

    var options = {
      maxWidth: canvas.offsetWidth,
      maxHeight: canvas.offsetHeight,
      numberOfPoints: numberOfPoints,
      shouldSort: !isRandomInput.checked
    };

    var mode = document.querySelector('input[name="mode"]:checked').value;

    var shape;
    // Fonctionne mais pas dans le carré d'affichage il faut mettre en gros
    switch(mode){
      case "rectangle":
        options.maxWidth = document.getElementById('rect-width-input').value;
        options.maxHeight = document.getElementById('rect-height-input').value;
        shape = new Rectangle();
        break;
      case "square":
        shape = new Square();
        options.maxWidth = document.getElementById('rect-width-input').value;
        break;
      case "circle":
        shape = new Circle();
        break;
      default:
        shape = new Shape();
        break;
    }
    console.log(shape);
    shape.generatePoints(options);

    return shape;
  }

  document.getElementById('draw-button').addEventListener('click', drawShapeHandler);
})();

(function canvasUtils() {
  function redraw() {
    var canvas = document.getElementById('draw-area');
    canvas.width = canvas.parentElement.offsetWidth - 15;
    canvas.height = canvas.parentElement.offsetHeight - 15;
  }

  redraw();
  window.addEventListener('resize', redraw);

  function resetCanvas() {
    var canvasElement = document.getElementById('draw-area');

    if (!canvasElement.getContext) {
      return;
    }
    var context = canvasElement.getContext('2d');
    context.clearRect(0, 0, canvasElement.width, canvasElement.height);

  }

  document.getElementById('reset-button').addEventListener('click', resetCanvas);
})();