function CanvasPainter(position) {

    this.fatNode = false;
    this.position = position;

    this.startPos = { x: -1, y: -1 };
    this.currentPosition = { x: -1, y: -1 };
    this.currentNodeIndex = -1;
    this.mdnCanvasPos = { x: -1, y: -1 };

    this.FillColorR = 100;
    this.FillColorG = 100;
    this.FillColorB = 100;

    this.LineColorR = 200;
    this.LineColorG = 200;
    this.LineColorB = 200;

    this.drawWidth = 3;
    this.erzWidth = 5;

    this.isFilled = 0;

    this.curDrawAction = 1;
    this.savedDrawAction = 1;    
    this.mouseMoveTrigger = false;

    this.mouseDownActionPerformed = function (eVent) {

        var target = eVent.target || eVent.srcElement;

        if (target.className != "") {
            return false;
        }

        if (this.mouseMoveTrigger) return false;

        if (!hasKey()) {
            return false;
        }

        if (!isInCanvase(eVent)) {
            return false;
        }

        this.mdnCanvasPos.x = $('#canvasContainer').position().left;
        this.mdnCanvasPos.y = $('#canvasContainer').position().top + textoutHeightDelts;


        if (this.curDrawAction != 0 || !canvasPainter.fatNode) {
            this.startPos = this.getCanvasMousePos(eVent);
        }

        this.mouseMoveTrigger = true;

        return false;
    };

    this.mouseMoveActionPerformed = function (eVent) {

        if (!this.mouseMoveTrigger) {
            //DrawCursorUtil(this.getCanvasMousePos(eVent), this.curDrawAction);
            return false;
        }

        this.currentPosition = this.getCanvasMousePos(eVent);
        this.currentPosition.x = this.currentPosition.x;
        this.currentPosition.y = this.currentPosition.y;

        switch (this.curDrawAction) {

            case 0:

                if (this.startPos.x != this.currentPosition.x || this.startPos.y != this.currentPosition.y) {
                    contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                    drawPolygonUtil(false, this.isFilled, this.startPos, this.currentPosition);
                }
                break;

            case 1:
                siteDB.recordAction();
                node = siteDB.drawing[canvasPainter.currentNodeIndex];
                drawLongPencilUtil(true, this.isFilled, node.p);
                break;

            case 2:
                contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                savedFillColor = contextI.fillStyle;
                savedLineColor = contextI.strokeStyle;
                savedLineWidth = contextI.lineWidth;
                contextI.lineWidth = 1;
                contextI.fillStyle = 'white';
                contextI.strokeStyle = 'black';

//                _pntFrom = { x: this.startPos.x - canvasPainter.erzWidth, y: this.startPos.y - canvasPainter.erzWidth };
//                _pntTo = { x: this.startPos.x + canvasPainter.erzWidth, y: this.startPos.y + canvasPainter.erzWidth };

//                if (this.startPos.x != this.currentPosition.x || this.startPos.y != this.currentPosition.y) {
                    _pntFrom = this.startPos
                    _pntTo = this.currentPosition;
      //          }

                drawRectUtil(false, false, _pntFrom, _pntTo);

                //contextI.fillRect(Center.x / (3 - canvasScale) - canvasPainter.erzWidth, Center.y / (3 - canvasScale) - canvasPainter.erzWidth, canvasPainter.erzWidth, canvasPainter.erzWidth);

                contextI.fillStyle = savedFillColor;
                contextI.lineWidth = savedLineWidth;
                contextI.strokeStyle = savedLineColor;
                break;


            case 3:
                contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                drawLineUtil(false, this.startPos, this.currentPosition);
                break;


            case 4:
                contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                drawArrowUtil(false, this.startPos, this.currentPosition);
                break;

            case 5:
                contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                drawRectUtil(false, this.isFilled, this.startPos, this.currentPosition);
                break;

            case 6:
                contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                drawRoundRectUtil(false, this.isFilled, this.startPos, this.currentPosition);
                break;

            case 7:
                contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
                drawCircleUtil(false, this.isFilled, this.startPos, this.currentPosition);
                break;
        }

        return false;
    };


    this.mouseUpActionPerformed = function (eVent) {

        this.currentPosition = this.getCanvasMousePos(eVent);

        if (!this.mouseMoveTrigger) return false;

        this.clearInterface();

        if (this.curDrawAction == 0) {
            if (siteDB.drawing.length>0 &&  canvasPainter.currentNodeIndex >= 0) {
                currentNode = siteDB.drawing[canvasPainter.currentNodeIndex];
                if (veryClose(currentNode.startPosX, currentNode.startPosY, this.currentPosition.x, this.currentPosition.y)) {
                    completePolygon();
                    this.mouseMoveTrigger = false;

                    return false;
                }
            }

            siteDB.recordAction();

            if (!document.getElementById("chkBodyColor").checked) {
                this.drawActions(this.isFilled, this.curDrawAction, this.startPos, this.currentPosition);
            }
            else {
                siteDB.paintDrawing();
            }

            this.startPos = this.currentPosition;

        }
        else if (this.curDrawAction >= 2) {

            this.drawActions(this.isFilled, this.curDrawAction, this.startPos, this.currentPosition);
            siteDB.recordAction();
        }
        else {
            if (this.startPos.x == this.currentPosition.x && this.startPos.y == this.currentPosition.y) {
                siteDB.recordAction();

            }

            SendDrawL(siteDB.drawing[canvasPainter.currentNodeIndex]);  
            siteDB.paintDrawing();
        }


        this.mouseMoveTrigger = false;
        //this.cpMouseDownState = false;

        return false;
    };


    this.clearInterface = function () {
        contextI.beginPath();
        contextI.clearRect(0, 0, canvasScale * canvasWith, canvasScale * canvasHeight);
        contextI.closePath();
    };

    this.getFillColor = function () {
        return 'rgb(' + this.FillColorR + ',' + this.FillColorG + ',' + this.FillColorB + ')';
    }

    this.getLineColor = function () {
        return 'rgb(' + this.LineColorR + ',' + this.LineColorG + ',' + this.LineColorB + ')';
    }

    this.setLineColor = function (r, g, b) {

        color = 'rgb(' + r + ',' + g + ',' + b + ')';
        context.strokeStyle = color;
        contextI.strokeStyle = color;

        this.LineColorR = r;
        this.LineColorB = b;
        this.LineColorG = g;

    };

    this.setFillColor = function (r, g, b) {

        color = 'rgb(' + r + ',' + g + ',' + b + ')';
        context.fillStyle = color;
        contextI.fillStyle = color;
        this.FillColorR = r;
        this.FillColorB = b;
        this.FillColorG = g;

    };

    this.getDistance = function (pntFrom, pntTo) {
        return Math.sqrt(Math.pow(pntFrom.x - pntTo.x, 2) + Math.pow(pntFrom.y - pntTo.y, 2));
    }

    cnt = 0;

    this.getCanvasMousePos = function (eVent) {

        try {


            this.mdnCanvasPos.x = $('#canvasContainer').offset().left;
            //this.mdnCanvasPos.x = $('#canvas').position().left;

            //document.title = "mdnCanvasPos.x:: " + this.mdnCanvasPos.x;

            this.mdnCanvasPos.y = $('#canvasContainer').offset().top + textoutHeightDelts;

            var posx = 0;
            var posy = 0;
            if (!eVent) var eVent = window.event;

            if (!isPadClient) {
                if (eVent.pageX || eVent.pageY) {
                    posx = eVent.pageX;
                    posy = eVent.pageY;
                }
                else if (eVent.clientX || eVent.clientY) {
                    posx = eVent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                    posy = eVent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                }
            }
            else {
                posx = eVent.targetTouches[0].pageX;
                posy = eVent.targetTouches[0].pageY;

//                if (location.href.indexOf("debug") > 0) {
//                    cnt++;
//                    $("#divMsgDebug").html("cnt " + cnt + ", x: posx :: " + parseInt((posx - this.mdnCanvasPos.x)) + " , y: posy :: " + (posy - this.mdnCanvasPos.y) + " ");
//                }

            }


            return { x: (3 - canvasScale) * (posx - this.mdnCanvasPos.x), y: (3 - canvasScale) * (posy - this.mdnCanvasPos.y) };
        }
        catch (err) {
            if (location.href.indexOf("debug") > 0) {
                alert('Error description :: ' + err.description);
            }
        }
    }



    this.drawActions = function (isFilled, action, startPos, currentPosition) {

        if ((action == 3 || action == 7 || action == 6 || action == 0 || action == 4) && 
                startPos.x == currentPosition.x && startPos.y == currentPosition.y) {
            savedFillColor = context.fillStyle;
            context.beginPath();
            context.fillStyle = context.strokeStyle;

//            drawEllipse(context, currentPosition.x / (3 - canvasScale) - canvasPainter.drawWidth * canvasScale / 2, 
//                currentPosition.y / (3 - canvasScale) - canvasPainter.drawWidth * canvasScale / 2,
//                canvasPainter.drawWidth, canvasPainter.drawWidth, true);


            var distance = canvasPainter.drawWidth / 2;
            context.arc(startPos.x / (3 - canvasScale), startPos.y / (3 - canvasScale), distance, 0, Math.PI * 2, true);
            context.fill();
                               
            context.closePath();
            context.fillStyle = savedFillColor;

            return;
        }


        switch (action) {

            case 0:
                drawPolygonUtil(true, isFilled, startPos, currentPosition);
                break;

            case 2:
                savedFillColor = context.fillStyle;
                savedLineColor = context.strokeStyle;
                savedLineWidth = context.lineWidth;
                context.lineWidth = 1;
                context.fillStyle = 'white';
                context.strokeStyle = 'white';


                //                _pntFrom = { x: this.startPos.x - canvasPainter.erzWidth, y: this.startPos.y - canvasPainter.erzWidth };
                //                _pntTo = { x: this.startPos.x + canvasPainter.erzWidth, y: this.startPos.y + canvasPainter.erzWidth };

                //                if (this.startPos.x != this.currentPosition.x || this.startPos.y != this.currentPosition.y) {
                _pntFrom = this.startPos
                _pntTo = this.currentPosition;
                //                }               

                drawRectUtil(true, true, _pntFrom, _pntTo);

                context.fillStyle = savedFillColor;
                context.lineWidth = savedLineWidth;
                context.strokeStyle = savedLineColor;
                break;

            case 3:
                drawLineUtil(true, startPos, currentPosition);
                break;


            case 4:
                drawArrowUtil(true, startPos, currentPosition);
                break;

            case 5:

                if (startPos.x == currentPosition.x && startPos.y == currentPosition.y) {
                    _pntFrom = { x: startPos.x - canvasPainter.drawWidth/2, y: startPos.y - canvasPainter.drawWidth/2 };
                   // _pntTo = { x: startPos.x + canvasPainter.drawWidth, y: startPos.y + canvasPainter.drawWidth };

                    savedFillColor = context.fillStyle;
                    context.beginPath();
                    context.fillStyle = context.strokeStyle;
                    context.fillRect(_pntFrom.x / (3 - canvasScale), _pntFrom.y / (3 - canvasScale),
                        parseInt(savedLineWidth), parseInt(savedLineWidth));
                    context.closePath();
                    context.fillStyle = savedFillColor;
                }
                else {
                    drawRectUtil(true, isFilled, startPos, currentPosition);
                }

                break;

            case 6:
                drawRoundRectUtil(true, isFilled, startPos, currentPosition);
                break;

            case 7:
                drawCircleUtil(true, isFilled, startPos, currentPosition);
                break;

        }
    }

};