/// コンテンツ閲覧画面_消しゴム書式オーバーレイ

//名前空間用のオブジェクトを用意する
var CONTENTVIEW_PAINT = {};

//未使用
// works out the X, Y position of the click inside the canvas from the X, Y position on the page
CONTENTVIEW_PAINT.getPosition = function(mouseEvent, sigCanvas) {
    var x, y;
    if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
        x = mouseEvent.pageX;
        y = mouseEvent.pageY;
    } else {
        x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
};


CONTENTVIEW_PAINT.initializeCanvas = function(targetCanvas) {
    // get references to the canvas element as well as the 2D drawing context
    var sigCanvas = targetCanvas;
    var context = sigCanvas.getContext("2d");
    context.strokeStyle = 'Black';

    // This will be defined on a TOUCH device such as iPad or Android, etc.
    var is_touch_device = 'ontouchstart' in document.documentElement;

    if (is_touch_device) {
        // create a drawer which tracks touch movements
        var drawer = {
        		isDrawing: false,
            //            touchstart: function (coors) {
            //                context.beginPath();
            //                context.moveTo(coors.x, coors.y);
            //                this.isDrawing = true;
            //            },
            //            touchmove: function (coors) {
            //                if (this.isDrawing) {
            //                    context.lineTo(coors.x, coors.y);
            //                    context.stroke();
            //                }
            //            },
            //            touchend: function (coors) {
            //                if (this.isDrawing) {
            //                    this.touchmove(coors);
            //                    this.isDrawing = false;
            //                }
            //            }
            touchstart: function (coors) {
                context.beginPath();
                context.moveTo(coors.x, coors.y);
                this.isDrawing = true;
                CONTENTVIEW_PAINT.drawPoint(coors, context);
            },
            touchmove: function (coors) {
                if (this.isDrawing) {
                	CONTENTVIEW_PAINT.drawMove(coors, context);
                }
            },
            touchend: function (coors) {
                if (this.isDrawing) {
                    //this.touchmove(coors);
                    this.isDrawing = false;
                    context.closePath();
                }
            }

        };

        // create a function to pass touch events and coordinates to drawer
        function draw(event) {
            if (event.type == "touchend") {
                drawer[event.type](null);
            }
            else {
                // get the touch coordinates.  Using the first touch in case of multi-touch
                var coors = {
                    x: event.targetTouches[0].pageX,
                    y: event.targetTouches[0].pageY
                };

                // Now we need to get the offset of the canvas location
                var obj = sigCanvas;

                if (obj.offsetParent) {
                    // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
                    do {
                        coors.x -= obj.offsetLeft;
                        coors.y -= obj.offsetTop;
                    }
                    // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
                    // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
                    while ((obj = obj.offsetParent) != null);
                }

                // pass the coordinates to the appropriate handler
                drawer[event.type](coors);
            }
        };


        // attach the touchstart, touchmove, touchend event listeners.
        sigCanvas.addEventListener('touchstart', draw, false);
        sigCanvas.addEventListener('touchmove', draw, false);
        sigCanvas.addEventListener('touchend', draw, false);

        // prevent elastic scrolling
        sigCanvas.addEventListener('touchmove', function (event) {
            event.preventDefault();
        }, false);
    }
    
};

CONTENTVIEW_PAINT.drawMove = function(coors, context_draw) {
    if (CONTENTVIEW_GENERAL.isAddingMarking == true) {

        
            if (CONTENTVIEW_GENERAL.markingType == 'eraser') {
                //context.clearRect(coors.x, coors.y, ClientData.erase_size(), ClientData.erase_size());
                context_draw.globalCompositeOperation = 'destination-out';
                context_draw.lineWidth = CONTENTVIEW_GENERAL.eraseSize;
                context_draw.lineJoin = 'round';
                context_draw.lineCap = 'round';
                context_draw.lineTo(CONTENTVIEW_GENERAL.sx, CONTENTVIEW_GENERAL.sy);
                context_draw.stroke();
                context_draw.globalCompositeOperation = 'source-over';
            }
            else if (CONTENTVIEW_GENERAL.markingType == 'pen') {
                context_draw.lineCap = "round";
                context_draw.lineJoin = "bevel";
                context_draw.lineWidth = CONTENTVIEW_GENERAL.penSize;
                context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.penColor;
                //context_draw.globalAlpha = 1;                 
                context_draw.lineTo(coors.x, coors.y);
                context_draw.stroke();
            }
            else if (CONTENTVIEW_GENERAL.markingType == 'maker') {
                /*context_draw.clearRect(coors.x , coors.y,makerSize, coors.y - sy);*/
                /*context_draw.globalCompositeOperation = 'destination-out';
                context_draw.lineWidth = makerSize/10;
                context_draw.lineHeight = makerSize/10;
                context_draw.lineJoin = 'bevel';
                context_draw.lineCap = 'butt';
                context_draw.lineTo(coors.x, coors.y);
                context_draw.stroke();
                context_draw.globalCompositeOperation = 'source-over';*/
                //context_draw.globalCompositeOperation = 'destination-out'                                                     
                context_draw.beginPath();

                var halfSize = CONTENTVIEW_GENERAL.makerSize / 2;
                var quotSize = CONTENTVIEW_GENERAL.makerSize / 4;

                var ptStart = [
                                    { x: CONTENTVIEW_GENERAL.sx - quotSize, y: CONTENTVIEW_GENERAL.sy - halfSize },
                                    { x: CONTENTVIEW_GENERAL.sx + quotSize, y: CONTENTVIEW_GENERAL.sy - halfSize },
                                    { x: CONTENTVIEW_GENERAL.sx + quotSize, y: CONTENTVIEW_GENERAL.sy + halfSize },
                                    { x: CONTENTVIEW_GENERAL.sx - quotSize, y: CONTENTVIEW_GENERAL.sy + halfSize }
                              ];
                var ptEnd = [
                                            { x: coors.x - quotSize, y: coors.y - halfSize },
                                            { x: coors.x + quotSize, y: coors.y - halfSize },
                                            { x: coors.x + quotSize, y: coors.y + halfSize },
                                            { x: coors.x - quotSize, y: coors.y + halfSize }
                            ];
                if (CONTENTVIEW_GENERAL.sx > coors.x) {
                    if (CONTENTVIEW_GENERAL.sy > coors.y) {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();
                        // 左上に描画する場合
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.closePath();
                    } else if (CONTENTVIEW_GENERAL.sy < coors.y) {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);    
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 左下に描画する場合
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.closePath();
                    } else {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 左に描画する場合
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.closePath();
                    }
                } else if (CONTENTVIEW_GENERAL.sx < coors.x) {
                    if (CONTENTVIEW_GENERAL.sy > coors.y) {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';                              
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 右上に描画する場合
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.closePath();
                    } else if (CONTENTVIEW_GENERAL.sy < coors.y) {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 右下に描画する場合
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.closePath();
                    } else {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 右に描画する場合
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.closePath();
                    }
                } else {
                    if (CONTENTVIEW_GENERAL.sy > coors.y) {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 上に描画する場合
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.closePath();
                    } else if (CONTENTVIEW_GENERAL.sy < coors.y) {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 下に描画する場合
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.closePath();
                    } else {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 移動なしの場合
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.closePath();
                    }
                }
                context_draw.lineJoin = 'bevel';
                context_draw.lineCap = 'butt';
                context_draw.globalAlpha = 0.4;   // Opacity 20%
                context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
                context_draw.fill();

                context_draw.globalAlpha = 1;   // Opacity 100%
            }


            /*
            * 描画モードを戻す
            */
            context_draw.globalCompositeOperation = 'source-over';

            // 終点を保存
            CONTENTVIEW_GENERAL.sx = coors.x;
            CONTENTVIEW_GENERAL.sy = coors.y;
        
    }
};

CONTENTVIEW_PAINT.drawPoint = function(coors, context_draw) {
    /* set value sx,sy */
	CONTENTVIEW_GENERAL.sx = coors.x;
	CONTENTVIEW_GENERAL.sy = coors.y;

    if (CONTENTVIEW_GENERAL.isAddingMarking == true) {
        /* begin draw*/
    	CONTENTVIEW_GENERAL.isClearDrawing = false;

        if (CONTENTVIEW_GENERAL.markingType == 'eraser') {
            context_draw.globalCompositeOperation = 'destination-out';
            context_draw.lineWidth = CONTENTVIEW_GENERAL.eraseSize;
            context_draw.lineJoin = 'round';
            context_draw.lineCap = 'round';
            context_draw.lineTo(coors.x + 0.001, coors.y + 0.001);
            context_draw.stroke();
            context_draw.globalCompositeOperation = 'source-over';
        }
        else if (CONTENTVIEW_GENERAL.markingType == 'pen') {
            /* set flag */
        	CONTENTVIEW_GENERAL.isDrawing = true;

            context_draw.lineCap = "round";
            context_draw.lineWidth = CONTENTVIEW_GENERAL.penSize;
            context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.penColor;
            context_draw.lineTo(coors.x + 0.001, coors.y + 0.001);
            context_draw.stroke();
        }
        else if (CONTENTVIEW_GENERAL.markingType == 'maker') {
            /* set flag */
        	CONTENTVIEW_GENERAL.isDrawing = true;

            context_draw.globalCompositeOperation = 'destination-out';
            context_draw.lineWidth = CONTENTVIEW_GENERAL.makerSize ;
            context_draw.lineHeight = CONTENTVIEW_GENERAL.makerSize;
            context_draw.lineTo(coors.x , coors.y + 0.001);     
            context_draw.lineCap = 'square';
            context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
            context_draw.stroke();              
            context_draw.globalCompositeOperation = 'lighter';

            context_draw.lineCap = "square";
            context_draw.lineWidth = CONTENTVIEW_GENERAL.makerSize;
            context_draw.lineHeight = CONTENTVIEW_GENERAL.makerSize;
            context_draw.globalAlpha = 0.4;
            context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
            context_draw.lineTo(coors.x, coors.y + 0.001);
            context_draw.stroke();
            context_draw.globalAlpha = 1;
        }

        
    }
};

CONTENTVIEW_PAINT.ready = function(){
};

