small bugs and allow transform

.jshintrc

@@ -0,0 +1,17 @@
+{
+    "boss": true,
+    "browser": true,
+    "curly": true,
+    "eqeqeq": true,
+    "eqnull": true,
+    "expr": true,
+    "immed": true,
+    "jquery": true,
+    "noarg": true,
+    "onevar": true,
+    "quotmark": "double",
+    "smarttabs": true,
+    "trailing": true,
+    "undef": true,
+    "unused": true
+}

css/focuspoint.css

@@ -4,6 +4,7 @@
 	position: relative; /*Any position but static should work*/
 	overflow: hidden;
 }
+.focuspoint video,
 .focuspoint img {
 	position: absolute;
 	left: 0;
@@ -14,4 +15,9 @@
 	width: auto; height: auto;
 	min-width: 100%; min-height: 100%;
 	max-height: none; max-width: none;
-}
+}
+.focus3d video,
+.focus3d img {
+	width: auto; height: auto;
+	min-width: 0; min-height: 0;
+	max-height: none; max-width: none;

demos/test/index.html

@@ -41,11 +41,11 @@
 						return false;
 					});
 					$('#NoResize a.start').click(function(){
-						$('#NoResize').focusPoint('start');
+						$('#NoResize').focusPoint('windowOn');
 						return false;
 					});
 					$('#NoResize a.stop').click(function(){
-						$('#NoResize').focusPoint('stop');
+						$('#NoResize').focusPoint('windowOff');
 						return false;
 					});
 

js/jquery.focuspoint.js

@@ -10,6 +10,7 @@
 
 	var defaults = {
 		reCalcOnWindowResize: true,
+		transform: true, // false, true.
 		throttleDuration: 17 //ms - set to 0 to disable throttling
 	};
 
@@ -65,10 +66,10 @@
 	};
 
 	//Calculate the new left/top values of an image
-	var calcShift = function(conToImageRatio, containerSize, imageSize, focusSize, toMinus) {
+	var calcShiftNoTransform = function(scale, containerSize, imageSize, focusSize, toMinus) {
 		var containerCenter = Math.floor(containerSize / 2); //Container center in px
 		var focusFactor = (focusSize + 1) / 2; //Focus point of resize image in px
-		var scaledImage = Math.floor(imageSize / conToImageRatio); //Can't use width() as images may be display:none
+		var scaledImage = Math.floor(imageSize * scale); //Can't use width() as images may be display:none
 		var focus =  Math.floor(focusFactor * scaledImage);
 		if (toMinus) focus = scaledImage - focus;
 		var focusOffset = focus - containerCenter; //Calculate difference between focus point and center
@@ -79,6 +80,21 @@
 
 		return (focusOffset * -100 / containerSize)  + '%';
 	};
+
+	var calcShiftTransform = function(scale, containerSize, imageSize, focusSize, toMinus) {
+		var scaledImage = Math.floor(imageSize * scale),
+			contFocus = containerSize / scaledImage,
+			maxf = 1 - contFocus,
+			focusOffset;
+
+		if (toMinus) focusSize = - focusSize;
+		focusOfset = (focusSize + maxf) / 2 ;
+		if (focusOfset < 0) focusOfset = 0;
+		if (focusOfset > maxf) focusOfset = maxf;
+		return -100 * focusOfset + '%';
+	};
+
+	var calcShift;
 
 	//Re-adjust the focus
 	var adjustFocus = function($el) {
@@ -100,35 +116,58 @@
 		var hShift = 0;
 		var vShift = 0;
 
-		//Which is over by more?
-		var wR = imageW / containerW;
-		var hR = imageH / containerH;
 
+		//Scaling of the image in case of transform
+		var scale = 1;
+		//Do we use transform?
+		var transform = ($el.data('transform') === 'true');
+		//Is it a video?
+		if ( $image.length == 0 ) {
+			$image = $el.find('video').first();
+			transform = false;
+		}
+
 		if (!(containerW > 0 && containerH > 0 && imageW > 0 && imageH > 0)) {
 			return false; //Need dimensions to proceed
 		}
 
-		//Reset max-width and -height
-		$image.css({
-			'max-width': '',
-			'max-height': ''
-		});
+		//Which is over by more?
+		var wR = containerW / imageW;
+		var hR = containerH / imageH;
+
+		if (transform) {
+			calcShift = calcShiftTransform;
+		} else {
+			//Reset max-width and -height
+			$image.css({
+				'max-width': '',
+				'max-height': ''
+			});
 
-		//Minimize image while still filling space
-		if (imageW > containerW && imageH > containerH) {
-			$image.css((wR > hR) ? 'max-height' : 'max-width', '100%');
+			//Minimize image while still filling space
+			if (imageW > containerW && imageH > containerH) {
+				$image.css((wR < hR) ? 'max-height' : 'max-width', '100%');
+			}
+			calcShift = calcShiftNoTransform
 		}
 
-		if (wR > hR) {
+		if (wR < hR) {
+			scale = hR;
 			hShift = calcShift(hR, containerW, imageW, focusX);
-		} else if (wR < hR) {
+		} else if (wR > hR) {
+			scale = wR;
 			vShift = calcShift(wR, containerH, imageH, focusY, true);
 		}
-
-		$image.css({
-			top: vShift,
-			left: hShift
-		});
+		if (transform) {
+			$image.css('transform-origin', '0 0');
+			$image.css('transform', 'scale(' + scale + ') translate(' + hShift + ',' + vShift + ') translate3d(0,0,0)');
+		} else {
+			$image.css({
+				top: vShift,
+				left: hShift
+			});
+		}
+
 	};
 
 	var $window = $(window);
@@ -140,6 +179,10 @@
 		var isListening = false;
 
 		$el.removeClass(focusCssClasses.join(' ')); //Replace basic css positioning with more accurate version
+		if (settings.transform ) {
+			$el.addClass( 'focus3d' );
+			$el.data( 'transform', 'true' );
+		}
 		adjustFocus($el); //Focus image in container
 
 		//Expose a public API