var MousePointer = function(camera) {

    this.domElement = document.createElement('canvas');
    this.domElement.style.position = 'absolute';
    this.domElement.style.cssFloat = 'top-left';
    this.ctx = this.domElement.getContext('2d');
    this.size = 10;
    this.drawn = false;
    camera.mousePointer = this;
    this.style = MousePointer.NONE;
}

MousePointer.NONE = 0;
MousePointer.BLACK = 1;
MousePointer.RED = 2;

MousePointer.toColor = function(style) {

    switch (style) {

        case MousePointer.NONE:
            return null;
        case MousePointer.BLACK:
            return '#000000';
        case MousePointer.RED:
            return '#ff0000';

    }

}

MousePointer.prototype.render = function(style) {

    if (this.style !== style) {

        if (style === MousePointer.NONE) {

            // Clear canvas
            this.domElement.width = this.domElement.width;
            this.style = MousePointer.NONE;

        } else {

            this.domElement.width = this.domElement.width;

            var i = container_size.width() / 2;
            var imin = i - this.size;
            var imax = i + this.size;

            var j = container_size.height() / 2;
            var jmin = j - this.size;
            var jmax = j + this.size;

            this.ctx.beginPath();
            this.ctx.moveTo(imin, j);
            this.ctx.lineTo(imax, j);
            this.ctx.moveTo(i, jmin);
            this.ctx.lineTo(i, jmax);
            this.ctx.closePath();


            this.ctx.lineWidth = 5;
            this.ctx.strokeStyle = '#ffffff';
            this.ctx.stroke();

            this.ctx.lineWidth = 2;
            this.ctx.strokeStyle = MousePointer.toColor(style);
            this.ctx.stroke();

            this.style = style;

        }

    }

}

MousePointer.prototype.clear = function() {

    this.render(MousePointer.NONE);

}