var Canvas = function() {

    this.initCanvas = function() {
        this.painting = false;
        this.canvasWidth = 350;
        this.canvasHeight = 100;
        this.confirmButton = document.getElementById('confirm-button');
        this.clearButton = document.getElementById('reset-button');
        this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        this.canvasEventListener();
        this.canvasTouchEventListener();
    }

    this.canvasEventListener = function() {
        this.canvas.addEventListener('mousedown', this.mouseDown.bind(this));
        this.canvas.addEventListener('mouseup', this.mouseUp.bind(this));
        this.clearButton.addEventListener('click', this.clearSignature.bind(this));
        this.canvas.addEventListener('mousemove', function(evt) {
            var mousePos = this.getMousePos(canvas, evt); // cf function getMousePos
            var posx = mousePos.x;
            var posy = mousePos.y;
            this.draw(canvas, posx, posy);
        }.bind(this));
    }

    this.mouseDown = function() {       // TOUCHSTART   // Fonction qui detecte que la souris est cliquee sur le canvas
        this.painting = true;
        this.context.beginPath();
    }

    this.mouseUp = function() {         // TOUCHEND // Fonction qui detecte que la souris est relachee
        this.painting = false;
        this.canvas.style.cursor = "default";
        this.confirmButton.style.display = "block";
    }

    this.getMousePos = function(canvas, evt) {      // Fonction obtenir les corrodnnées de la souris (son postionnement x et y sur le canvas)
        var rect = this.canvas.getBoundingClientRect(); // retourne la position de la souris par rapport à la zone d'affichge (element canvas)
        return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
        }
    }

    this.draw = function(canvas, posx, posy) {      // Fonction dessiner la signature
        if(this.painting) {
        this.context.fillRect(posx, posy, 1, 1);
        this.context.lineTo(posx, posy);
        this.canvas.style.cursor = "pointer";
        this.context.stroke();
        }
    }

    this.clearSignature = function() {
        this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
        this.context.beginPath();
        this.confirmButton.style.display = "none";
    }

    // Responsive design

    this.getTouchPos = function(canvas, touchEvent) {
    var rect = this.canvas.getBoundingClientRect();
    return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top
        }
    }

    this.canvasTouchEventListener = function() {
        this.canvas.addEventListener('touchstart', function(e) {
        var mousePos = this.getTouchPos(canvas, e);
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent('mousedown', {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        this.canvas.dispatchEvent(mouseEvent);
        }.bind(this));

        this.canvas.addEventListener('touchend', function(e) {
            var mouseEvent = new MouseEvent('mouseup', {});
            this.canvas.dispatchEvent(mouseEvent);
        }.bind(this));

        this.canvas.addEventListener('touchmove', function(e) {
            var mousePos = this.getTouchPos(canvas, e);
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent('mousemove', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            this.canvas.dispatchEvent(mouseEvent);
        }.bind(this));
    }

    this.resizeCanvas = function(newWidth) {
        this.canvasHeight = this.canvasHeight * newWidth / this.canvasWidth;
        this.canvasWidth = newWidth;
        this.canvas.width = this.canvasWidth;
        this.canvas.height = this.canvasHeight;
    }
};


var canvas1 = new Canvas();
canvas1.initCanvas();

function adaptCanvasToScreen() {
    // 480
    // 481 > 767
    // 768 > 979
    // 980 > 1199
    // > 1200
    var screenWidth = window.innerWidth;
    if (screenWidth <= 480) {
        canvas1.resizeCanvas(280);
    }
    else if (screenWidth <= 767) {
        canvas1.resizeCanvas(400);
    }
    else if (screenWidth <= 979) {
        canvas1.resizeCanvas(250);
    }
    else {
        canvas1.resizeCanvas(350);
    }
    /*canvas1.resizeCanvas(
        screenWidth <= 480 ? 280
        : screenWidth <= 767 ? 400
        : screenWidth <= 979 ? 250
        : 350
    );*/
}

window.addEventListener("load", function() {
    adaptCanvasToScreen();
});

window.onresize = function() {
    adaptCanvasToScreen();
}