class MiniMap{

    constructor(htmlHolder, htmlCanvas, isMinimap){
        let w = $(htmlHolder).width();
        let h = $(htmlHolder).height();
        this.dim = {x: w, y: h};
        this.p = p.createGraphics(w, h);
        this.p.parent(htmlHolder.get(0));
        this.isMinimap = isMinimap;
        $(htmlCanvas).show();
    }

    get mouseX(){
        return p.winMouseX - $("#minimap > canvas").offset().left;
    }

    get mouseY(){
        return p.winMouseY - $("#minimap > canvas").offset().top;
    }

    draw(image, dim, vp){
        this.p.clear();

        this.p.image(image, 0, 0, this.dim.x, this.dim.y, 0, 0, dim.x, dim.y);

        if (this.isMinimap){
            let x = p.map(vp.x, 0, vp.maxX, 0, this.dim.x);
            let y = p.map(vp.y, 0, vp.maxY, 0, this.dim.y);
            let w = p.map(p.width * vp.zoom, 0, vp.maxX, 0, this.dim.x);
            let h = p.map(p.height * vp.zoom, 0, vp.maxY, 0, this.dim.y);
            let r = (w + h) / 2 * 0.02;
            this.p.noFill();
            this.p.rect(x, y, w, h, r);
        }
    }

    onMouseDown(){
        if (this.mouseX > 0 && this.mouseX < this.p.width &&
            this.mouseY > 0 && this.mouseY < this.p.height){
            this.isDrawing = true;
            this.moveViewport();
        } 
    }

    onMouseUp(){
        this.isDrawing = false;
    }

    onMouseDragged(){
        if (this.isDrawing)
            this.moveViewport();
    }

    moveViewport(){
        if (!this.isMinimap)
            return;
        
        let vp = drawer.viewport;
        let mapX = this.mouseX - p.map(p.width * vp.zoom / 2, 0, drawer.dim.x, 0, this.dim.x);
        let mapY = this.mouseY - p.map(p.height * vp.zoom / 2, 0, drawer.dim.y, 0, this.dim.y);
        let x = p.map(mapX, 0, this.dim.x, 0, vp.maxX);
        let y = p.map(mapY, 0, this.dim.y, 0, vp.maxY);
        drawer.viewport.x = x;
        drawer.viewport.y = y;
    }

}