Add safety net so image does not dissapear outside of preview box.

static/js/directives/buddypictureupload.js

@@ -281,8 +281,35 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			var startY = null;
 			var movementX = null;
 			var movementY = null;
+			// Check for out of bounds values so image stays inside preview block.
+			var imageMoveabled = function(deltaY) {
+				var move = true;
+				var img = {width: getNumFromPx($scope.prevImage.style.width), height: getNumFromPx($scope.prevImage.style.height), left: getNumFromPx($scope.prevImage.style.left), top: getNumFromPx($scope.prevImage.style.top)};
+				if (deltaY > 0) {
+					if (img.width < 50 || img.height < 50) {
+						move = false;
+					} else if (img.height - Math.abs(img.top) < 50) {
+						move = false;
+					} else if (img.width - Math.abs(img.left) < 50) {
+						move = false;
+					}
+				}
+				if (img.top < 0 && img.height - Math.abs(img.top) < 50 && movementY > 0) {
+					move = false;
+				} else if (img.left > 150 && movementX < 0) {
+					move = false;
+				} else if (img.top > 150 && movementY < 0) {
+					move = false;
+				} else if (img.left < 0 && img.width - Math.abs(img.left) < 50 && movementX > 0) {
+					move = false;
+				}
+				return move;
+			};
 			var zoomImage = function(event) {
 				var deltaY = event.originalEvent.deltaY;
+				if (!imageMoveabled(deltaY)) {
+					return;
+				}
 				// zoom in
 				if (deltaY < 0) {
 					makeImageLarger(Math.abs(deltaY));
@@ -298,6 +325,9 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			var moveImage = function(event) {
 				movementX = startX - event.originalEvent.clientX;
 				movementY = startY - event.originalEvent.clientY;
+				if (!imageMoveabled()) {
+					return;
+				}
 				if (movementX < 0) {
 					moveImageRight(Math.abs(movementX));
 				} else {