'use strict';

/* Directives */

angular.module('myApp.directives', [])

    .directive('canvas', ['drawing','pathDrawing','toolState', function (drawing, pathDrawing, toolState) {
        return {
            restrict: 'A',
            link: function (scope, elements, attrs) {
                var w = attrs.canvasWidth;
                var h = attrs.canvasHeight;
                var canvasElement = elements[0];

                drawing.paper = Raphael(canvasElement, w, h);
                var paper = drawing.paper;

                //background
                
                var background = paper.rect(0, 0, w, h);
                drawing.backgroundElementId = background.id;
                
                background.attr("fill", "#FFF")
                    .attr("stroke", "#000");
                
                

                //foreground for pen drawing
                
                var drawingSurface = paper.rect(0, 0, w, h);                
                drawing.drawingSurfaceElementId = drawingSurface.id;
                
                drawingSurface
                    .attr("fill", "#000")
                    .attr("fill-opacity", 0)
                    .drag(
                    function onMove(dx, dy, x, y, e) {
                        switch (toolState.selectedTool.id) {
                            case "pen":                                            
                                //keep within the bounds of the drawing surface
                                if (e.target == drawingSurface.node) {                                    
                                    pathDrawing.continuePath(e.offsetX, e.offsetY);
                                } else {
                                    pathDrawing.endPath();
                                }
                                break;
                        }
                    }
                    ,
                    function onStart(x, y, e) {
                        switch(toolState.selectedTool.id) {
                            case "pen":
                                pathDrawing.startPath(e.offsetX, e.offsetY);
                                break;
                        }
                    },
                    function onEnd() {
                        switch(toolState.selectedTool.id) {
                            case "pen":
                                pathDrawing.endPath();
                                drawingSurface.toFront();
                                break;
                        }
                    }
                );
                
            }
        }
    }]);
@@ -260,17 +260,16 @@
  element
-s
 , attrs)
@@ -267,24 +267,24 @@
 t, attrs) %7B%0A
+
             
@@ -401,17 +401,16 @@
  element
-s
 %5B0%5D;%0A%0A  
@@ -511,17 +511,48 @@
 g.paper;
-%0A
+               %0A                
 %0A       
@@ -1573,16 +1573,110 @@
 .node) %7B
+%0A                  %0A                                    mouseEventPolyfillOffset(e, element);%0A
         
@@ -1767,33 +1767,31 @@
 ePath(e.
-offsetX, e.offset
+layerX, e.layer
 Y);%0A    
@@ -2168,32 +2168,136 @@
      case %22pen%22:
+%0A%0A                                mouseEventPolyfillOffset(e, element);%0A                                
 %0A               
@@ -2341,25 +2341,23 @@
 h(e.
-offsetX, e.offset
+layerX, e.layer
 Y);%0A
@@ -2775,32 +2775,32 @@
               %7D%0A
-
                 
@@ -2801,16 +2801,583 @@
       );
+%0A%0A                //For reasons I don't currently understand, this polyfill does not produce the desired effect if%0A                //its declaration is tidied away into the drawing service%0A                var mouseEventPolyfillOffset = function(event, angularElement) %7B%0A                    if(!event.offsetX) %7B%0A%0A                        event.offsetX = (event.pageX - angularElement.prop('offsetLeft'));%0A                        event.offsetY = (event.pageY - angularElement.prop('offsetTop'));%0A                    %7D%0A                    return event;%0A                %7D;
 %0A       

Fixed for Firefox