From 54d8139f4f2d5a4219e0d15629e27dcb71ee00f1 Mon Sep 17 00:00:00 2001
From: Nathan Wilkins <nathan.wilkins@noaa.gov>
Date: Thu, 15 Jan 2015 16:08:34 -0800
Subject: [PATCH] mouse click/drag offset fix

---
 compass-rose-ui.js | 50 ++++++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/compass-rose-ui.js b/compass-rose-ui.js
index 6d61139..1f5e7c1 100644
--- a/compass-rose-ui.js
+++ b/compass-rose-ui.js
@@ -104,6 +104,25 @@
                 return coords;
             };
 
+            this.getMousePosition = function(ev){
+                // XXX: Do these values get used?
+                var coordinates;
+                var offset = $(this.frontcanv).offset();;
+                if (ev.originalEvent['layerX'] != undefined) {
+                     coordinates = {
+                        x: ev.originalEvent.pageX - offset.left,
+                        y: ev.originalEvent.pageY - offset.top
+                    };
+                } else {
+                    // in IE, we use this property
+                    coordinates = {
+                        x: ev.originalEvent.x,
+                        y: ev.originalEvent.y
+                    };
+                }
+                return coordinates;
+            };
+
             this.drawArrow = function(coords) {
                 var canvas = this.frontcanv;
                 var ctx = canvas.getContext('2d');
@@ -284,20 +303,8 @@
 
             $(frontcanv).mousedown(function (ev) {
                 this.pressed = true;
-                var coordinates;
-                // XXX: Do these values get used?
-                if (ev.originalEvent['layerX'] != undefined) {
-                     coordinates = {
-                        x: ev.originalEvent.layerX,
-                        y: ev.originalEvent.layerY
-                    };
-                } else {
-                    // in IE, we use this property
-                    coordinates = {
-                        x: ev.originalEvent.x,
-                        y: ev.originalEvent.y
-                    };
-                }
+                var coordinates = _this.getMousePosition(ev);
+                
                 _this.drawArrow(coordinates);
                 // pass our values to the configured move function
                 if (this.parentElement.settings &&
@@ -312,20 +319,7 @@
                     return;
                 }
                 this.moved = true;
-                var coordinates;
-
-                if (ev.originalEvent['layerX'] != undefined) {
-                    coordinates = {
-                        x: ev.originalEvent.layerX,
-                        y: ev.originalEvent.layerY
-                    };
-                } else {
-                    // in IE, we use this property
-                    coordinates = {
-                        x: ev.originalEvent.x,
-                        y: ev.originalEvent.y
-                    };
-                }
+                var coordinates = _this.getMousePosition(ev);
 
                 _this.drawArrow(coordinates);
                 // pass our values to the configured move function