//pencil
on('click','pencil-button', function(){
    changeTool('pencil');
}, false);

//pencil bigger
on('click','pencil-bigger-button', function(){
    brushSize++;
    updateCursor();
}, false);

//pencil smaller
on('click','pencil-smaller-button', function(){
    if(brushSize > 1) brushSize--;
    updateCursor();
}, false);

//eraser
on('click','eraser-button', function(){
    changeTool('eraser');
}, false);

//eraser bigger
on('click','eraser-bigger-button', function(){
    eraserSize++;
    updateCursor();
}, false);

//eraser smaller
on('click','eraser-smaller-button', function(e){
    if(eraserSize > 1) eraserSize--;
    updateCursor();
}, false);

// rectangle
on('click','rectangle-button', function(){
    // If the user clicks twice on the button, they change the draw mode
    if (currentTool == 'rectangle') {
        if (drawMode == 'empty') {
            drawMode = 'fill';
            setRectToolSvg();
        }
        else {
            drawMode = 'empty';
            setRectToolSvg();
        }
    }
    else {
        changeTool('rectangle');
    }
}, false);

// rectangle bigger
on('click','rectangle-bigger-button', function(){
    rectangleSize++;
    updateCursor();
}, false);

// rectangle smaller
on('click','rectangle-smaller-button', function(e){
    if(rectangleSize > 1) rectangleSize--;
    updateCursor();
}, false);

//fill
on('click','fill-button', function(){
    changeTool('fill');
}, false);	

//pan
on('click','pan-button', function(){
    changeTool('pan');
}, false);	

//eyedropper
on('click','eyedropper-button', function(){
    changeTool('eyedropper');
}, false);		

//zoom tool button
on('click','zoom-button', function(){
    changeTool('zoom');
}, false);

//zoom in button
on('click','zoom-in-button', function(){
    //changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
    changeZoom(layers[0],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);

    for (let i=1; i<layers.length; i++) {
        layers[i].copyData(layers[0]);
    }
}, false);

//zoom out button
on('click','zoom-out-button', function(){
    changeZoom(layers[0],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);

    for (let i=1; i<layers.length; i++) {
        layers[i].copyData(layers[0]);
    }
}, false);

//rectangular selection button
on('click', 'rectselect-button', function(){
    changeTool('rectselect');
}, false);