/// コンテンツ閲覧画面_消しゴム書式オーバーレイ
/// <reference path="../common/js/avweb.js" />

/// <reference path="../common/js/screenLock.js" />

/// <reference path="../common/js/common.js" />

/// <reference path="../common/js/i18n.js" />

/// <reference path="../common/js/jquery-1.8.1.min.js" />

/// <reference path="../common/js/jquery-ui-1.8.23.custom.min.js" />

/// <reference path="../common/js/jquery.toastmessage.js" />

/// <reference path="../common/js/pageViewer.js" />

// works out the X, Y position of the click inside the canvas from the X, Y position on the page
function getPosition(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 };
};


function initializeCanvas(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;
                drawPoint(coors, context);
            },
            touchmove: function (coors) {
                if (this.isDrawing) {
                    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);
    }
    
};
function drawMove(coors, context_draw) {
    if (isAddingMarking == true) {

        
            if (markingType == 'eraser') {
                //context.clearRect(coors.x, coors.y, ClientData.erase_size(), ClientData.erase_size());
                context_draw.globalCompositeOperation = 'destination-out';
                context_draw.lineWidth = eraseSize;
                context_draw.lineJoin = 'round';
                context_draw.lineCap = 'round';
                context_draw.lineTo(sx, sy);
                context_draw.stroke();
                context_draw.globalCompositeOperation = 'source-over';
            }
            else if (markingType == 'pen') {
                context_draw.lineCap = "round";
                context_draw.lineJoin = "bevel";
                context_draw.lineWidth = penSize;
                context_draw.strokeStyle = "#" + penColor;
                //context_draw.globalAlpha = 1;                 
                context_draw.lineTo(coors.x, coors.y);
                context_draw.stroke();
            }
            else if (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 = makerSize / 2;
                var quotSize = makerSize / 4;

                var ptStart = [
                                    { x: sx - quotSize, y: sy - halfSize },
                                    { x: sx + quotSize, y: sy - halfSize },
                                    { x: sx + quotSize, y: sy + halfSize },
                                    { x: sx - quotSize, y: 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 (sx > coors.x) {
                    if (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 = "#" + 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 (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 = "#" + 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 = "#" + 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 (sx < coors.x) {
                    if (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 = "#" + 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 (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 = "#" + 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 = "#" + 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 (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 = "#" + 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 (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 = "#" + 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 = "#" + 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 = "#" + makerColor;
                context_draw.fill();

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


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

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


        
    }
};

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

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

        if (markingType == 'eraser') {
            context_draw.globalCompositeOperation = 'destination-out';
            context_draw.lineWidth = 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 (markingType == 'pen') {
            /* set flag */
            isDrawing = true;

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

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

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

        
    }
};