﻿(function (angular, $) {

    'use strict';

    /**
     * @ngdoc directive
     * @description
     */
    var moduleName = 'screenShot';
    angular.module(moduleName).directive('screenShot',
        ['platformsDeviceService', 'screenShotService',
            function (platformsDeviceService, screenShotService) {

                //still refactor
                return {
                    restrict: 'AE',
                    scope: {},
                    link: linkFn
                };

                function linkFn($scope, element) {
                    var options = screenShotService.getOptions();
                    var canvas;

                    function onInitialize() {

                        var container = $(options.selector),
                            h = container.height() - options.marginBottom,
                            w = container.width(),
                            top = parseInt(options.marginTop) + 'px';

                        var canvasBox = createCanvasBox(w, h, top);
                        canvas = createCanvas(w, h);
                        canvasBox.appendChild(canvas);
                        element.append(canvasBox);

                    }

                    function createCanvasBox(width, height, top) {
                        var canvasBox = document.createElement('div');
                        canvasBox.setAttribute('style', 'top:' + top);
                        canvasBox.width = width;
                        canvasBox.height = height;
                        canvasBox.className = 'screen-shot-canvas-box';
                        return canvasBox;
                    }

                    function createCanvas(width, height) {
                        var canvas = document.createElement('canvas');
                        canvas.id = options.canvasId;
                        canvas.className = 'pen-canvas';
                        if (platformsDeviceService.statusBar) {
                            top = '75px';
                        }

                        canvas.width = width;
                        canvas.height = height;

                        setTimeout(function () {
                            canvas.addEventListener("touchstart", onPanelDragStart, false);
                            canvas.addEventListener("touchend", onPanelDragEnd, false);
                            canvas.addEventListener("mousedown", onPanelDragStart, false);
                            canvas.addEventListener("mouseup", onPanelDragEnd, false);
                        }, 200);
                        return canvas;
                    }

                    function onPanelDragStart(e) {
                        var ctx = canvas.getContext('2d'),
                            x = e.pageX + canvas.offsetLeft,
                            y = e.pageY + canvas.offsetTop - options.offsetTop;

                        options.preX = x;
                        options.preY = y;
                        beginNewDraw();
                        if (!options.canDrag) {
                            ctx.moveTo(x, y);
                        }
                        options.canDrag = true;
                        canvas.onmousemove = onPanelMove;
                        canvas.ontouchmove = onPanelMove;
                    }

                    function onPanelMove(e) {
                        var ctx = canvas.getContext('2d'),
                            x = e.pageX + canvas.offsetLeft,
                            y = e.pageY + canvas.offsetTop - options.offsetTop;
                        if (options.canDrag) {
                            if (options.penStatus === 'eraser') {
                                //use eraser
                                canvasEraser(x, y);
                            } else {
                                ctx.beginPath();
                                if (options.preX == 0 && options.preY == 0) {
                                    ctx.moveTo(x, y);
                                    ctx.lineTo(x, y);
                                    ctx.stroke();
                                    ctx.closePath();
                                    options.preX = x;
                                    options.preY = y;
                                } else {
                                    if (options.preX > 0 && options.preY > 0 && x > 0 && y > 0) {
                                        ctx.moveTo(options.preX, options.preY);
                                        ctx.lineTo(x, y);
                                        ctx.stroke();
                                        ctx.closePath();
                                        options.preX = x;
                                        options.preY = y;
                                    }

                                }
                            }
                        }
                    }

                    function onPanelDragEnd(e) {
                        options.canDrag = false;
                        canvas.onmousemove = null;
                        options.preX = 0;
                        options.preY = 0;
                    }

                    function beginNewDraw(penStyle) {
                        var context = canvas.getContext('2d');
                        penStyle = (penStyle != undefined) ? penStyle : options.config.penStyle;
                        var penWidth = options.config.penWidth;
                        context.strokeStyle = penStyle;
                        context.lineWidth = penWidth;
                    }

                    function canvasEraser(x, y) {
                        var ctx = canvas.getContext('2d');
                        ctx.globalCompositeOperation = 'destination-out';
                        ctx.beginPath();
                        ctx.arc(x, y, 15, 0, Math.PI * 2);
                        ctx.strokeStyle = 'rgba(250,250,250,0)';
                        ctx.fill();
                        ctx.globalCompositeOperation = 'source-over';
                    }

                    onInitialize();
                }
            }
        ])
    ;
})(angular, $);
@@ -202,34 +202,8 @@
    %5B
-'platformsDeviceService', 
 'scr
@@ -245,32 +245,8 @@
 on (
-platformsDeviceService, 
 scre
@@ -1838,141 +1838,8 @@
 s';%0A
-                        if (platformsDeviceService.statusBar) %7B%0A                            top = '75px';%0A                        %7D%0A%0A
     
@@ -2026,25 +2026,25 @@
 entListener(
-%22
+'
 touchstart%22,
@@ -2041,17 +2041,17 @@
 uchstart
-%22
+'
 , onPane
@@ -2126,17 +2126,17 @@
 ner(
-%22
+'
 touchend
 %22, o
@@ -2131,17 +2131,17 @@
 touchend
-%22
+'
 , onPane
@@ -2206,25 +2206,25 @@
 entListener(
-%22
+'
 mousedown%22, 
@@ -2220,17 +2220,17 @@
 ousedown
-%22
+'
 , onPane
@@ -2305,17 +2305,17 @@
 ner(
-%22
+'
 mouseup
-%22
+'
 , on
@@ -3707,16 +3707,17 @@
 .preX ==
+=
  0 && op
@@ -3729,16 +3729,17 @@
 .preY ==
+=
  0) %7B%0A  
@@ -4755,17 +4755,16 @@
 DragEnd(
-e
 ) %7B%0A    
@@ -5075,32 +5075,32 @@
 tContext('2d');%0A
-
                 
@@ -5130,16 +5130,17 @@
 Style !=
+=
  undefin

remove warning