ss_new_ui_skin_and_page/ss/picZoom/e-smart-zoom-jquery.min.js

/*	
 *	jQuery zoom plugin
 *	Demo and documentation:
 *	http://e-smartdev.com/#!jsPluginList/panAndZoomJQuery
 *	
 *	Copyright (c) 2012 Damien Corzani
 *	http://e-smartdev.com/
 *
 *	Dual licensed under the MIT and GPL licenses.
 *	http://en.wikipedia.org/wiki/MIT_License
 *	http://en.wikipedia.org/wiki/GNU_General_Public_License
 */
(function( $ ){

  $.fn.smartZoom = function(method) {
    // define global vars
	var targetElement = this; // the element target of the plugin
    
	/**
	 * ESmartZoomEvent Class 
	 * define const use to dispatch zoom events
	 */
	function ESmartZoomEvent(type){}
	ESmartZoomEvent.ZOOM = "SmartZoom_ZOOM";
	ESmartZoomEvent.PAN = "SmartZoom_PAN";
	ESmartZoomEvent.START = "START";
	ESmartZoomEvent.END = "END";
	ESmartZoomEvent.DESTROYED = "SmartZoom_DESTROYED";   	

	/**
	 * define public methods that user user could call 
	 */
    var publicMethods = {
    	/**
		  * initialize zoom component
		  * @param {Object} options = {'top': '0' zoom target container top position in pixel
		  * 						   'left': '0' zoom target container left position in pixel
		  * 						   'width' : '100%' zoom target container width in pixel or in percent
		  * 						   'height' : '100%' zoom target container height in pixel or in percent 
		  *                            'easing' : 'smartZoomEasing' jquery easing function used when the browser doesn't support css transitions
		  * 						   'initCallback' : null a callback function to call after plugin initilization
		  * 						   'maxScale' : 3 the max scale that will be applied on the zoom target
		  *							   'dblClickMaxScale' : 1.8 the max scale that will be applied on the zoom target on double click
		  *  				     	   'mouseEnabled' : true enable plugin mouse interaction 
		  *					           'scrollEnabled' : true enable plugin mouse wheel behviour
		  *					           'dblClickEnabled' : true enable plugin mouse doubleClick behviour
		  *					           'mouseMoveEnabled' : true enable plugin target drag behviour
		  * 					       'moveCursorEnabled' : true show moveCursor for drag
		  * 					       'touchEnabled' : true enable plugin touch interaction 
		  *						       'dblTapEnabled' : true enable plugin double tap behaviour
		  *							   'zoomOnSimpleClick': false enable zoom on simple click (if set to true dbl lick is disabled)
		  *						       'pinchEnabled' : true enable zoom when user pinch on target
		  *						       'touchMoveEnabled' : true enable target move via touch
		  *                            'containerBackground' : '#FFFFFF' zoom target container background color (if containerClass is not set)
		  *                            'containerClass' : '' class to apply to zoom target container if you whant to change background or borders (don't change size or position via the class)
		  * 						  } 
		  */
	    init : function(options) {
	    	// is smartZoomData exists on the targetElement, we have already initialize it
	    	if(targetElement.data('smartZoomData'))
	    		return; 
	    		
	    	// Create some defaults, extending them with any options that were provided
			var settings = $.extend( {
		      'top' : "0",
		      'left' : "0",
		      'width' : "100%",
		      'height' : "100%",
		      'easing' : "smartZoomEasing",
		      'initCallback' : null,
		      'maxScale' : 3,
		      'dblClickMaxScale' : 1.8,
		      'mouseEnabled' : true,
		      'scrollEnabled' : true,
		      'dblClickEnabled' : true,
		      'mouseMoveEnabled' : true,
		      'moveCursorEnabled' : true,
		      'adjustOnResize' : true, 
		      'touchEnabled' : true,
		      'dblTapEnabled' : true,
		      'zoomOnSimpleClick': false,
		      'pinchEnabled' : true,
		      'touchMoveEnabled' : true,
		      'containerBackground' : "#FFFFFF",
		      'containerClass' : ""
		    }, options);
		    
			var targetElementInitialStyles = targetElement.attr('style'); // save target element initial styles

		    // create the container that will contain the zoom target
		    var zoomContainerId = "smartZoomContainer"+new Date().getTime();
		    var containerDiv = $('<div id="'+zoomContainerId+'" class="'+settings.containerClass+'"></div>');
		    targetElement.before(containerDiv);
		    targetElement.remove();
		    //containerDiv = $('#'+zoomContainerId);
		    containerDiv.css({'overflow':'hidden'});
		    if(settings.containerClass == "")
		   		containerDiv.css({'background-color':settings.containerBackground});
		    containerDiv.append(targetElement);
			
			// create touchInfos object that will be use to manage zoom with touch events
			var touchInfos = new Object();
			touchInfos.lastTouchEndTime = 0; // this var is use to know if user had doubleTap or not 
			touchInfos.lastTouchPositionArr = null; // list of touch point used for pinch
			touchInfos.touchMove = false; // is the user is in move mode?
			touchInfos.touchPinch = false; // or is the user is in pinch mode?
			
			// smartZoomData is used to saved every plugin vars
		    targetElement.data('smartZoomData', {
               settings : settings, // given settings
               containerDiv : containerDiv, // target container
               originalSize: {width:targetElement.width(), height:targetElement.height()}, // plugin target size at the beginning
               originalPosition: targetElement.offset(), // plugin target position at the beginning 
               transitionObject:getBrowserTransitionObject(), // use to know if the browser is compatible with css transition
               touch:touchInfos, // save touchInfos
               mouseWheelDeltaFactor:0.15, // enable to slow down the zoom via mouse wheel
               currentWheelDelta:0, // the current mouse wheel delta used to calculate scale to apply
               adjustedPosInfos:null, // use to save the adjust information in "adjustToContainer" method (so we can access the normal target size in plugin when we whant)
               moveCurrentPosition:null, // save the current mouse/touch position use in "moveOnMotion" method   
               moveLastPosition:null, // save the last mouse/touch position use in "moveOnMotion" method  
               mouseMoveForPan:false, // use to know if the user pan or not
               currentActionType:'', // use to save the current user action type (equal to 'ZOOM' or 'PAN')
               initialStyles:targetElementInitialStyles, // use in destroy method to reset initial styles
               currentActionStep:'' // equal to 'START' or 'END'
            });
            
			// adjust the contain and target size into the page            
		    adjustToContainer();

			// listening mouse and touch events
			if(settings.touchEnabled == true)
	        	targetElement.bind('touchstart.smartZoom', touchStartHandler);
	        if(settings.mouseEnabled == true){
	        	if(settings.mouseMoveEnabled == true)
		        	targetElement.bind('mousedown.smartZoom', mouseDownHandler);
		        if(settings.scrollEnabled == true){
		        	containerDiv.bind('mousewheel.smartZoom', mouseWheelHandler);
			        containerDiv.bind( 'mousewheel.smartZoom DOMMouseScroll.smartZoom', containerMouseWheelHander);
		        }
		        if(settings.dblClickEnabled == true && settings.zoomOnSimpleClick == false)
		        	containerDiv.bind('dblclick.smartZoom', mouseDblClickHandler);
	        }
	       	targetElement.context.ondragstart = function () { return false; }; // allow to remove browser default drag behaviour
	        if(settings.adjustOnResize == true)
		    	$(window).bind('resize.smartZoom', windowResizeEventHandler); // call "adjustToContainer" on resize

		    if(settings.initCallback != null) // call callback function after plugin initialization
		    	settings.initCallback.apply(this, targetElement);
	    },
	   /**
		  * zoom function used into the plugin and accessible via direct call (ex : $('#zoomImage').smartZoom('zoom', 0.2);)
		  * @param {Number} scaleToAdd : the scale to add to the plugin target current scale (often < 1) 
		  * @param {Point} globalRequestedPosition {'x': global requested position in x
		  * 						                'y': global requested position in y
		  * 	   						           }  if this parameter is missing the zoom will target the object center
		  * @param {Number} duration : zoom effect duration 700ms by default
		  */
	    zoom : function(scaleToAdd, globalRequestedPosition, duration){
	    	
	    	var smartData = targetElement.data('smartZoomData');
	    	var globaRequestedX;
	    	var globaRequestedY;
	    	if(!globalRequestedPosition){ // use target center if globalRequestedPosition is not set
	    		var containerRect = getRect(smartData.containerDiv);
		    	globaRequestedX = containerRect.x + containerRect.width/2;
		    	globaRequestedY = containerRect.y + containerRect.height/2;
		    }else{
		    	globaRequestedX = globalRequestedPosition.x;
		    	globaRequestedY = globalRequestedPosition.y;
		    }
		    
	    	// stop previous effect before make calculation
	    	stopAnim(ESmartZoomEvent.ZOOM); 
	    	
	  		var targetRect = getTargetRect(true); // the target rectangle in global position
	 		var originalSize = smartData.originalSize;
	    	var newScale = (targetRect.width / originalSize.width) + scaleToAdd; // calculate new scale to apply

	    	// manage scale min, max
	  		newScale = Math.max(smartData.adjustedPosInfos.scale, newScale); // the scale couldn't be lowest than the initial scale
	  		newScale = Math.min(smartData.settings.maxScale, newScale); // the scale couldn't be highest than the max setted by user
	  		
	        var newWidth = originalSize.width * newScale; // new size to apply according to new scale
		  	var newHeight = originalSize.height * newScale;
		  
		  	var positionGlobalXDiff = globaRequestedX - targetRect.x; // the position difference between with the target position
		  	var positionGlobalYDiff = globaRequestedY - targetRect.y;
		  	var sizeRatio =  newWidth / targetRect.width;
		
		  	var newGlobalX = targetRect.x - ((positionGlobalXDiff * sizeRatio) - positionGlobalXDiff); // apply the ratio to positionGlobalDiff and then find the final target point
		  	var newGlobalY = targetRect.y - ((positionGlobalYDiff * sizeRatio) - positionGlobalYDiff);
		    var validPosition = getValidTargetElementPosition(newGlobalX, newGlobalY, newWidth, newHeight); // return a valid position from the calculated position 
		
			if(duration == null) // default effect duration is 700ms
				duration = 700;

			dispatchSmartZoomEvent(ESmartZoomEvent.ZOOM, ESmartZoomEvent.START, false); 
			
			animate(targetElement, validPosition.x, validPosition.y, newWidth, newHeight, duration, function(){ // set the new position and size via the animation function
				smartData.currentWheelDelta = 0; // reset the weelDelta when zoom end
			 	updateMouseMoveCursor(); // remove "move" cursor when zoom end
			 	dispatchSmartZoomEvent(ESmartZoomEvent.ZOOM, ESmartZoomEvent.END, false); 
			});
			
	    },
	     /**
		  * pan function accessible via direct call (ex : $('#zoomImage').smartZoom('pan', 5, 0);)
		  * @param {Number} xToAdd : a number to add to the object current position in X
		  * @param {Point} yToAdd : a number to add to the object current position in Y
		  * @param {Number} duration : move effect duration 700ms by default
		  */
	    pan : function(xToAdd, yToAdd, duration){
	    	if(xToAdd == null || yToAdd == null) // check params
	    		return;
	    		
	    	if(duration == null) // default pan duration is 700ms
				duration = 700;
	    	var currentPosition = targetElement.offset();
	    	
	    	var targetRect = getTargetRect();
	    	var validPosition = getValidTargetElementPosition(currentPosition.left+xToAdd, currentPosition.top+yToAdd, targetRect.width, targetRect.height); // add the given numbers to the current coordinates and valid the result
	    	
	    	if(validPosition.x != currentPosition.left || validPosition.y != currentPosition.top){
	    		// stop previous effect before make calculation
	    		stopAnim(ESmartZoomEvent.PAN);
	    		dispatchSmartZoomEvent(ESmartZoomEvent.PAN, ESmartZoomEvent.START, false); 
				animate(targetElement, validPosition.x, validPosition.y, targetRect.width, targetRect.height, duration, function(){ // set the new position and size via the animation function
				 	dispatchSmartZoomEvent(ESmartZoomEvent.PAN, ESmartZoomEvent.END, false); 
				});
			}
	    },
	     /**
		  * destroy function accessible via direct call (ex : $('#zoomImage').smartZoom('destroy');)
		  * use this function to clean and remove smartZoom plugin 
		  */
	    destroy : function() {
	    	var smartData = targetElement.data('smartZoomData');
	    	if(!smartData)
	    		return;
	    	stopAnim(); // stop current animation
	    	var containerDiv = smartData.containerDiv;
	    	// remove all listenerns 
	        targetElement.unbind('mousedown.smartZoom');
	        targetElement.unbind('touchstart.smartZoom');
	    	containerDiv.unbind('mousewheel.smartZoom');
	        containerDiv.unbind('dblclick.smartZoom');
	    	containerDiv.unbind( 'mousewheel.smartZoom DOMMouseScroll.smartZoom');
		    $(window).unbind('resize.smartZoom');
			$(targetElement.context).unbind('mousemove.smartZoom');
			$(targetElement.context).unbind('mouseup.smartZoom');
			$(targetElement.context).unbind('touchmove.smartZoom');
	    	$(targetElement.context).unbind('touchend.smartZoom');
		
			targetElement.css({"cursor":"default"}); // reset default cursor
		    containerDiv.before(targetElement); // move target element to original container 
	   		animate(targetElement, smartData.originalPosition.left, smartData.originalPosition.top,  smartData.originalSize.width, smartData.originalSize.height, 5); // reset initial position
	   		targetElement.removeData('smartZoomData');// clean saved data
		    containerDiv.remove(); // remove zoom container
		    targetElement.attr('style', smartData.initialStyles); // reset initial styles
		    targetElement.trigger(ESmartZoomEvent.DESTROYED); // dispatch event after plugin destruction
	    },
	    /**
	     * call this funcion to know if the plugin is used 
	     */
	    isPluginActive : function(){
	    	return targetElement.data('smartZoomData') != undefined;
	    }
    };

    if (publicMethods[method] ) { // if the parameter is an existing method, then we call this method
    	return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if (typeof method === 'object' || ! method ) { // else if it's an object we initilize the plugin
    	if(targetElement[0].tagName.toLowerCase() == "img" && !targetElement[0].complete){ // if the target is an image when wait for image loading before initialization
    		targetElement.bind('load.smartZoom',{arguments:arguments[0]},  imgLoadedHandler);
   	  	}else{
    		publicMethods.init.apply( targetElement, [arguments[0]]);
    	} 
    } else {
    	$.error( 'Method ' +  method + ' does not exist on e-smartzoom jquery plugin' );
    }    
    
    /**
     * call zoom function on mouse wheel event
 	 * @param {Object} e : mouse event
 	 * @param {Object} delta : wheel direction 1 or -1
     */
    function mouseWheelHandler(e, delta){
    	var smartData = targetElement.data('smartZoomData');
		if(smartData.currentWheelDelta*delta < 0) // if current and delta have != sign we set 0 to go to other direction
			smartData.currentWheelDelta = 0;
		smartData.currentWheelDelta += delta; // increment delta zoom faster when the user use wheel again
    	publicMethods.zoom(smartData.mouseWheelDeltaFactor*smartData.currentWheelDelta, {"x":e.pageX, "y":e.pageY}); // 0.15
    }
	  
	/**
     * prevent page scroll when scrolling on zoomableContainer
 	 * @param {Object} e : mouse event
     */  
    function containerMouseWheelHander(e){
   		e.preventDefault();
    }
    
    /**
     * update mouse cursor (move or default) if the zoom target is draggable 
     */
    function updateMouseMoveCursor(){
		var smartData = targetElement.data('smartZoomData');
    	if(smartData.settings.mouseMoveEnabled != true || smartData.settings.moveCursorEnabled != true)
    		return;
		var targetRect = getTargetRect();
    	var currentScale = (targetRect.width / smartData.originalSize.width);
    	if(parseInt(currentScale*100)>parseInt(smartData.adjustedPosInfos.scale*100)) // multiply by 100 to resolve precision problem
    		targetElement.css({"cursor":"move"});     
    	else	
    		targetElement.css({"cursor":"default"});
    }
    
    /**
     * 鼠标双击
     * @param {Object} e : mouse event
     */
    function mouseDblClickHandler(e){
    	 zoomOnDblClick(e.pageX, e.pageY);
    }
    
    /**
     * save mouse position on mouse down (positions will be used in moveOnMotion function)
     * @param {Object} e : mouse event 
     */
    function mouseDownHandler(e){
    	e.preventDefault(); // prevent default browser drag
		$(targetElement.context).on('mousemove.smartZoom', mouseMoveHandler); // add mouse move and mouseup listeners to enable drag
		$(targetElement.context).bind('mouseup.smartZoom', mouseUpHandler);
		var smartData = targetElement.data('smartZoomData'); // save mouse position on mouse down
		smartData.moveCurrentPosition = new Point(e.pageX, e.pageY);
		smartData.moveLastPosition =  new Point(e.pageX, e.pageY);
    }
    
    /**
     * call "moveOnMotion" when the mouse move after mouseDown
     * @param {Object} e : mouse event
     */
    function mouseMoveHandler(e){

    	var smartData = targetElement.data('smartZoomData');
    	if(smartData.mouseMoveForPan || (!smartData.mouseMoveForPan && smartData.moveCurrentPosition.x != e.pageX && smartData.moveCurrentPosition.y != e.pageY)){
    		smartData.mouseMoveForPan = true;
    		moveOnMotion(e.pageX, e.pageY, 0, false);
    	}
	}
    
    /**
     *  stop the drag on mouseup
     * @param {Object} e : mouse event
     */
    function mouseUpHandler(e){
    	
    	var smartData = targetElement.data('smartZoomData');
    	if(smartData.mouseMoveForPan){
    		smartData.mouseMoveForPan = false;
	    	if(smartData.moveLastPosition.distance(smartData.moveCurrentPosition) > 4){ // smooth the drag end when user move the mouse fast
				var interpolateP = smartData.moveLastPosition.interpolate(smartData.moveCurrentPosition, -4);
				moveOnMotion(interpolateP.x, interpolateP.y, 500, true);
			}else{
				moveOnMotion(smartData.moveLastPosition.x, smartData.moveLastPosition.y, 0, true);
			}
		}else if(smartData.settings.zoomOnSimpleClick){
			zoomOnDblClick(e.pageX, e.pageY);
		}
		
		$(targetElement.context).unbind('mousemove.smartZoom'); // remove listeners when drag is done
		$(targetElement.context).unbind('mouseup.smartZoom');    	
    }
    
    /**
     * save touch position and init vars on touch start (information will be use in touchMoveHandler function and touch end)
     * @param {Object} e : touch event  
     */
    function touchStartHandler(e){
    	e.preventDefault(); // prevent default browser drag
    	
    	$(targetElement.context).unbind('touchmove.smartZoom'); // unbind if we already listen touch events
	    $(targetElement.context).unbind('touchend.smartZoom');
    	
	    $(targetElement.context).bind('touchmove.smartZoom', touchMoveHandler); // listen move and touch end events to manage drag on touch
    	$(targetElement.context).bind('touchend.smartZoom', touchEndHandler);
    	
		var touchList = e.originalEvent.touches; // get touch infos from event 
		var firstTouch = touchList[0];
		     
		var smartData = targetElement.data('smartZoomData'); 
		smartData.touch.touchMove = false; // will be set to true if the user start drag
		smartData.touch.touchPinch = false; // will be set to true if the user whant to pinch (zoom)
    	smartData.moveCurrentPosition = new Point(firstTouch.pageX, firstTouch.pageY); // save the finger position on screen on touch start
    	smartData.moveLastPosition = new Point(firstTouch.pageX, firstTouch.pageY);
    	smartData.touch.lastTouchPositionArr = new Array(); // save touch position off all fingers to manage pinch
    	var currentTouch;
    	var nbTouch = touchList.length;
    	for(var i = 0;i<nbTouch;++i){
    		currentTouch = touchList[i];
    		smartData.touch.lastTouchPositionArr.push(new Point(currentTouch.pageX, currentTouch.pageY));
    	}
    }
    
    /**
     *  manage pinch or drag when touch move
     * @param {Object} e : touch event
     */
    function touchMoveHandler(e){ 

 		e.preventDefault(); // prevent default browser behaviour

    	var smartData = targetElement.data('smartZoomData');
    	
		var touchListEv = e.originalEvent.touches; // get touch information on event
    	var nbTouch = touchListEv.length;
		var currentFirstTouchEv = touchListEv[0];
		
		if(nbTouch == 1 && !smartData.touch.touchPinch && smartData.settings.touchMoveEnabled == true){ // if the user use only one finger and touchPinch==false => we manage drag
			if(!smartData.touch.touchMove){ 
				var downLastPoint = smartData.touch.lastTouchPositionArr[0];
				if(downLastPoint.distance(new Point(currentFirstTouchEv.pageX, currentFirstTouchEv.pageY))<3){ // check if user really had moved
					return;
				}
				else
					smartData.touch.touchMove = true;
			}
			moveOnMotion(currentFirstTouchEv.pageX, currentFirstTouchEv.pageY, 0, false);
		}else if(nbTouch == 2 && !smartData.touch.touchMove && smartData.settings.pinchEnabled == true){ // if the user use two fingers and touchMove==false => we manage pinch 
			smartData.touch.touchPinch = true;
			
			var currentSecondTouchEv = touchListEv[1]; // get current fingers position and last fingers positions
			var lastP1 = smartData.touch.lastTouchPositionArr[0];
			var lastP2 = smartData.touch.lastTouchPositionArr[1];
			var currentP1 = new Point(currentFirstTouchEv.pageX, currentFirstTouchEv.pageY);
			var currentP2 = new Point(currentSecondTouchEv.pageX, currentSecondTouchEv.pageY);
			
			var currentP1P2Distance = currentP1.distance(currentP2); // distance between current two fingers positions
			var lastP1P2Distance = lastP1.distance(lastP2); // distance between the last two fingers positions registered 
			var currentDistance = currentP1P2Distance - lastP1P2Distance; // distance between last move and current move
			
			if(Math.abs(currentDistance)<3) // finger pixel error (jump between in and out mode sometimes if i don't do this check)  
				return;
			
			var middle =  new Point((currentP1.x + currentP2.x) /2, (currentP1.y + currentP2.y) /2); // get the point between the two fingers
			var targetRect = getTargetRect(); // the current plugin target size
			var originSize = smartData.originalSize; // original plugin target size
			var currentScale = (targetRect.width / originSize.width); // current scale base on original size
			var newZoomValueToAdd = currentP1P2Distance/lastP1P2Distance; // scale between current distance and last fingers distance
			var newZoomScale = ((targetRect.width * newZoomValueToAdd) / originSize.width); // the new zoom scale
			
			publicMethods.zoom(newZoomScale - currentScale, middle, 0); // call zoom fonction with the scale to add (newZoomScale - currentScale)
			
			smartData.touch.lastTouchPositionArr[0] = currentP1; //update last touch position points for next function iteration 
			smartData.touch.lastTouchPositionArr[1] = currentP2;
		}
    }
    
    /**
     * manage touch move end or double tap at touch end
     * @param {Object} e : touch event
     */
    function touchEndHandler(e){
 		e.preventDefault(); // prevent default browser behaviour
 		
 		var nbTouchAtEnd = e.originalEvent.touches.length;
    	if(nbTouchAtEnd == 0){ // unbind listeners if the user take off all his fingers
	    	$(targetElement.context).unbind('touchmove.smartZoom');
		    $(targetElement.context).unbind('touchend.smartZoom');
    	}
    	var smartData = targetElement.data('smartZoomData');
    	
    	if(smartData.touch.touchPinch) // nothing to do for pinch behaviour in this function
    		return;
    		
    	if(smartData.touch.touchMove){ // smooth motion at end if we are in drag mode
    		if(smartData.moveLastPosition.distance(smartData.moveCurrentPosition) > 2){ // smooth only if the user drag fast
				var interpolateP = smartData.moveLastPosition.interpolate(smartData.moveCurrentPosition, -4); // the end smooth motion is calculate according to last finger motion 
				moveOnMotion(interpolateP.x, interpolateP.y, 500, true);
			}
    	}else{
    		if(smartData.settings.dblTapEnabled == true && smartData.touch.lastTouchEndTime != 0 && new Date().getTime() - smartData.touch.lastTouchEndTime < 400){ // if the user double tap (double tap if there is less than 300 ms between first and second tap)
				var lastStartPos = smartData.touch.lastTouchPositionArr[0];
			    zoomOnDblClick(lastStartPos.x, lastStartPos.y);  
	    	}
	    	smartData.touch.lastTouchEndTime = new Date().getTime();
    	}
    }
    
    /**
     *  manage plugin target move after mouse or finger motion
     * @param {Number} xPos : new x position to set
     * @param {Number} yPos : new y position to set 
     * @param {Number} duration : move effect duration
     */
    function moveOnMotion(xPos, yPos, duration, motionEnd){
    	
    	stopAnim(ESmartZoomEvent.PAN);// stop previous effect before make calculation
    	
    	var smartData = targetElement.data('smartZoomData');
    	smartData.moveLastPosition.x = smartData.moveCurrentPosition.x; // save the current position in "moveLastPosition" before moving the plugin target
    	smartData.moveLastPosition.y = smartData.moveCurrentPosition.y; // (moveLastPosition will be use to smooth last motion in "touchEndHandler" and "mouseUpHandler")
    	
    	var currentPosition = targetElement.offset(); // the target current position
    	var targetRect = getTargetRect(); // current target size
    	
    	var newMarginLeft = currentPosition.left + (xPos - smartData.moveCurrentPosition.x); // add current mouseX (orTouchX) position difference to the target position
    	var newMarginTop = currentPosition.top + (yPos - smartData.moveCurrentPosition.y);
    	
    	var validPosition = getValidTargetElementPosition(newMarginLeft, newMarginTop, targetRect.width, targetRect.height); // check if the new position is valid
	   	
		dispatchSmartZoomEvent(ESmartZoomEvent.PAN, ESmartZoomEvent.START, false); 
		
        console.log("--------------------------------");
        console.log(currentPosition);
        console.log(targetRect);
        console.log(validPosition);
        
	   	animate(targetElement, validPosition.x, validPosition.y, targetRect.width, targetRect.height, duration, motionEnd == true ? function(){
		 	dispatchSmartZoomEvent(ESmartZoomEvent.PAN, ESmartZoomEvent.END, false); 
	   	}: null); // move to the right position
	   	
	 	smartData.moveCurrentPosition.x = xPos; // save the new position
		smartData.moveCurrentPosition.y = yPos;
	}
    
    /**
     * manage zoom when user double click or double tap 
     * @param {Number} pageX : double click (or tap) x position in page
     * @param {Number} pageY : double click (or tap) y position in page
     */
    function zoomOnDblClick(pageX, pageY){
    	var smartData = targetElement.data('smartZoomData');
 		var originalSize = smartData.originalSize; // original target size
 		var targetRect = getTargetRect(); // current target size
    	var currentScale = (targetRect.width / originalSize.width); // the current target scale
    	var originalScale = smartData.adjustedPosInfos.scale; // original scale
    	var dblClickMaxScale = parseFloat(smartData.settings.dblClickMaxScale); // the doucble click or double tap max scale
    	
    	var scaleDiff; // if the current scale is close from "dblClickMaxScale" go to "originalScale" else go to "dblClickMaxScale" 
    	if(currentScale.toFixed(2)>dblClickMaxScale.toFixed(2) || Math.abs(dblClickMaxScale - currentScale)>Math.abs(currentScale-originalScale)){
    		scaleDiff = dblClickMaxScale - currentScale;
    	}else{
    		scaleDiff = originalScale - currentScale;
    	}

    	publicMethods.zoom(scaleDiff, {"x":pageX, "y":pageY});	 
    }
    
    /**
     * stop the animation
     */
    function stopAnim(userActionType){

    	var smartData = targetElement.data('smartZoomData');
    	if(smartData.transitionObject){ // if css transformation is surpported
    		if(smartData.transitionObject.cssAnimHandler) // stop the transformation end handler if it exists
    		  targetElement.off($.support.transition, smartData.transitionObject.cssAnimTimer); 
			var originalSize = smartData.originalSize; // get the original target size   			
	   		var targetRect = getTargetRect(); // the target current size
	   	
		   	var cssObject = new Object(); // set the current current target size and the target scale to css transformation so it stop previous transformation
		  	cssObject[smartData.transitionObject.transition] = 'all 0s'; // apply transformation now
		  	if(smartData.transitionObject.css3dSupported){
			  	cssObject[smartData.transitionObject.transform] = 'translate3d('+targetRect.x+'px, '+targetRect.y+'px, 0) scale3d('+targetRect.width/originalSize.width+','+targetRect.height/originalSize.height+', 1)';
			}else{
		  		cssObject[smartData.transitionObject.transform] = 'translateX('+targetRect.x+'px) translateY('+targetRect.y+'px) scale('+targetRect.width/originalSize.width+','+targetRect.height/originalSize.height+')';
		    }
		  	targetElement.css(cssObject);	
    			
    	}else{
    		targetElement.stop(); // if we use a jquery transformation, just call stop function
    	}
    	updateMouseMoveCursor(); // update mouse move cursor after animation stop (set the cross cursor or not)

    	if(userActionType != null)
    		dispatchSmartZoomEvent(userActionType, '', true); 
    }
    
    /**
     * manage position validation
     * @param {Number} marginLeft : global x position
     * @param {Number} marginTop : global y position
     * @param {Number} width : element width
     * @param {Number} height : element height
     */
    function getValidTargetElementPosition(xPosition, yPosition, width, height){
    	var smartData = targetElement.data('smartZoomData');
    	 // adjusting if the content is out of the initial content box from "adjustedPosInfos"
	    var newMarginTop = Math.min(smartData.adjustedPosInfos.top, yPosition); // adjust in top 
	    newMarginTop += Math.max(0, (smartData.adjustedPosInfos.top + smartData.adjustedPosInfos.height) - (newMarginTop + height)) // adjust in bottom
	    var newMarginLeft = Math.min(smartData.adjustedPosInfos.left, xPosition); // adjust in left
	    newMarginLeft += Math.max(0, (smartData.adjustedPosInfos.left + smartData.adjustedPosInfos.width) - (newMarginLeft + width)); // adjust in right
	    return new Point(newMarginLeft.toFixed(2), newMarginTop.toFixed(2));
    }
    
    /**
     * when the plugin target is an image we wait for image loading before initilization 
     * @param {Object} e : load event
     */
    function imgLoadedHandler(e){
    	targetElement.unbind('load.smartZoom');
    	publicMethods.init.apply( targetElement, [e.data.arguments]); 
    }
    
	/**
	 * this function fit the plugin target to the zoom container at initialization and when the window is resized
	 */    
    function adjustToContainer(){
    	
 		var smartData = targetElement.data('smartZoomData');
 		var containerDiv = smartData.containerDiv; // the zoom container 
 		var originalSize = smartData.originalSize; // target original size
 		
 		// get the zoomable container position from settings
 		var parentOffset = containerDiv.parent().offset(); 
 		var containerDivNewLeft = getContainerDivPositionFromSettings(smartData.settings.left, parentOffset.left, containerDiv.parent().width());
 		var containerDivNewTop = getContainerDivPositionFromSettings(smartData.settings.top, parentOffset.top, containerDiv.parent().height());
 		
 		containerDiv.offset({left: containerDivNewLeft, top: containerDivNewTop}); // apply position find
  		containerDiv.width(getContainerDivSizeFromSettings(smartData.settings.width, containerDiv.parent().width(), containerDivNewLeft - parentOffset.left)); // apply size found to zoomablecontainer 
		containerDiv.height(getContainerDivSizeFromSettings(smartData.settings.height, containerDiv.parent().height(), containerDivNewTop - parentOffset.top));
		
	  	var containerRect = getRect(containerDiv); // get the rectangle from the new containerDiv position and size
	  	var scaleToFit = Math.min(Math.min(containerRect.width/originalSize.width, containerRect.height/originalSize.height), 1).toFixed(2); // scale to use to include the target into containerRect
	  	var newWidth = originalSize.width * scaleToFit; // we could now find the new size
	  	var newHeight = originalSize.height * scaleToFit;
	  
	    // store the position and size information in adjustedPosInfos object
	  	smartData.adjustedPosInfos = {"left":(containerRect.width - newWidth)/2 + parentOffset.left, "top": (containerRect.height - newHeight)/2 + parentOffset.top, "width": newWidth, "height" : newHeight, "scale":scaleToFit};
	  	stopAnim();
	  	// call animate method with 10 ms duration to apply new target position and size
	  	animate(targetElement,  smartData.adjustedPosInfos.left , smartData.adjustedPosInfos.top, newWidth, newHeight, 0, function() {
	  		targetElement.css('visibility','visible'); // set target visibility to visible if developper whant to hide it before the plugin resize
	  	});
	  	updateMouseMoveCursor(); 
    }
    
    /**
     * animate the plugin target  
     * @param {Object} target : the element to animate
     * @param {Number} globalLeft : the global x target position 
     * @param {Number} globalTop : the global y target position 
     * @param {Number} width : targeted width
     * @param {Number} width : targeted height
     * @param {Number} duration : effect duration
     * @param {Function} callback : function to call when effect end
     * 
     */
    function animate(target, globalLeft, globalTop, width, height, duration, callback){
    	
    	var smartData = targetElement.data('smartZoomData');
 		var parentOffset = smartData.containerDiv.offset();
   		var left = globalLeft - parentOffset.left; // get the relative position from parent 
   		var top = globalTop - parentOffset.top;
   		
    	if (smartData.transitionObject != null) { // use css transition if supported
    		var originalSize = smartData.originalSize;
		  	var cssObject = new Object();
		  	cssObject[smartData.transitionObject.transform+'-origin'] = '0 0';
		  	cssObject[smartData.transitionObject.transition] = 'all '+duration / 1000+'s ease-out'; // set effect duration
		  	
		  	if(smartData.transitionObject.css3dSupported) // use css 3d translate if supported
		  		cssObject[smartData.transitionObject.transform] = 'translate3d('+left+'px, '+top+'px, 0) scale3d('+width/originalSize.width+','+height/originalSize.height+', 1)';
		  	else
		  		cssObject[smartData.transitionObject.transform] = 'translateX('+left+'px) translateY('+top+'px) scale('+width/originalSize.width+','+height/originalSize.height+')';
		  	if(callback != null){
		  		smartData.transitionObject.cssAnimHandler = callback;
          target.one($.support.transition.end, smartData.transitionObject.cssAnimHandler);
        }
		  	target.css(cssObject); // apply css transformation
		}else{ // use JQuery animate if css transition is not supported
	    	
	    	target.animate({"margin-left": left, "margin-top": top, "width": width, "height" : height}, {duration:duration, easing:smartData.settings.easing, complete:function() {
			 	if(callback != null)
			 		callback();
			}});
		}
    }
    
	/**
	 * get the plugin target rectangle on screen 
	 * @param {Boolean} globalPosition : if true return global position else return relative position
	 * @return {Object} {'x':'x Position', 'y':'y Position', 'width':' element width', 'height': 'element height'}
	 */	    
    function getTargetRect(globalPosition){
    	var smartData = targetElement.data('smartZoomData');
		var width = targetElement.width(); // get the current object size
		var height = targetElement.height();
		var position = targetElement.offset(); // global position
		var x = parseInt(position.left); // save global position in vars
		var y = parseInt(position.top);
		
		var parentOffset = smartData.containerDiv.offset(); // get zoomable container global position
		
		if(globalPosition != true){ // set local position
			x = parseInt(x) - parentOffset.left;    		
			y = parseInt(y) - parentOffset.top;  
		}
		
    	if (smartData.transitionObject != null) { // if CSS3 transition is enabled
    		var transformMatrix = targetElement.css(smartData.transitionObject.transform);
    		if(transformMatrix && transformMatrix != "" && transformMatrix.search('matrix') != -1){ // get the target css matrix tranform 
    			var scale;
    			var arrValues;
    			if(transformMatrix.search('matrix3d') != -1){ // check the matrix type
    				arrValues = transformMatrix.replace('matrix3d(','').replace(')','').split(',');
    				scale = arrValues[0]; // get target current scale
    			}else{
    				arrValues = transformMatrix.replace('matrix(','').replace(')','').split(',');
    				scale = arrValues[3];// get target current scale
    				x = parseFloat(arrValues[4]);// get target current position
    				y = parseFloat(arrValues[5]);
					if(globalPosition){ // adjust for global
						x = parseFloat(x) + parentOffset.left;    		
						y = parseFloat(y) + parentOffset.top;
			    	}
    			}
    			width = scale * width; // find the actual object size thanks to current scale
    			height = scale * height;
    		}
    	}
    	return {'x' : x,'y' : y, 'width' : width, 'height' : height};
    }

    /**
     * dispatch zoom or pan event 
     * @param {Boolean} fromZoom : set to true if the function is call from zoom action
     * 
     **/
    function dispatchSmartZoomEvent(actionType, actionStep, stop){
		var smartData = targetElement.data('smartZoomData');
		var eventTypeToDispatch = '';

		if(stop == true && smartData.currentActionType != actionType){ // if the action type has changed and that the function is called from "stopAnim" dispatch END event
			eventTypeToDispatch = smartData.currentActionType+'_'+ESmartZoomEvent.END;
			smartData.currentActionType = '';
			smartData.currentActionStep = '';
		}else{ 
			if(smartData.currentActionType != actionType || smartData.currentActionStep == ESmartZoomEvent.END){ // if the current action had changed (MOVE to ZOOM for exemple) and the last action step was END we whant to dispatch START
				smartData.currentActionType = actionType;
				smartData.currentActionStep = ESmartZoomEvent.START;
				eventTypeToDispatch = smartData.currentActionType+'_'+smartData.currentActionStep;
			}else if(smartData.currentActionType == actionType && actionStep == ESmartZoomEvent.END){ // dispatch END if actionstep ask is END and action type don't change
				smartData.currentActionStep = ESmartZoomEvent.END;
				eventTypeToDispatch = smartData.currentActionType+'_'+smartData.currentActionStep;
				smartData.currentActionType = '';
				smartData.currentActionStep = '';
			}
		}

		if(eventTypeToDispatch != ''){ // dispatch event if we have to
			var ev = jQuery.Event(eventTypeToDispatch);
			ev.targetRect = getTargetRect(true);
			ev.scale = ev.targetRect.width / smartData.originalSize.width;
      //console.log(targetElement, eventTypeToDispatch);
			targetElement.trigger(ev);
		}
    }

    /**
	 * return an object that contains the kind of CSS3 supported transition
	 *  @return {Object} {'transition':'-webkit-transition', 'transform':'-webkit-transform', 'css3dSupported':'true'}
	 */	 
    function getBrowserTransitionObject(){
    	
	   var pageBody = targetElement.context.body || targetElement.context.documentElement;
	   var bodyStyle = pageBody.style;
	   
	   var transitionTestArr = ['transition', 'WebkitTransition', 'MozTransition', 'MsTransition', 'OTransition']; // all type all transitions to test
	   var transitionArr = ['transition', '-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition'];
	   var transformArr = ['transform', '-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform'];
		
	   var length = transitionTestArr.length;
	   var transformObject;
	   for(var i=0; i<length; i++){ // for all kind of css transition we make a test
	   		if(bodyStyle[transitionTestArr[i]] != null){
   				transformStr = transformArr[i];
	   			var div = $('<div style="position:absolute;">Translate3d Test</div>');
			    $('body').append(div); // try a transformation on a new div each time
			    transformObject = new Object();
			    transformObject[transformArr[i]] = "translate3d(20px,0,0)";
			    div.css(transformObject);
			    css3dSupported = ((div.offset().left - $('body').offset().left) == 20); // if translate3d(20px,0,0) via transformArr[i] == 20px the transformation is valid for this browser
			    div.empty().remove();
	   			if(css3dSupported){ // return the kind of transformation supported
					return {transition:transitionArr[i], transform:transformArr[i], css3dSupported:css3dSupported};
				}	   			
	   		}
	   }
	   return null; 
    }
    
    /**
	 * get the plugin target rectangle on screen 
	 * @param {Object} settingsValue : a number or a string value given in plugin params
	 * @param {Number} zoomableContainerParentValue : zoomable container parent width or height
	 * @param {Number} divPosDiff : zoomable container parent and zoomable container position difference
	 * @return {Number} return the zoomable container size (in pixel) from setting value (pixel or percent)
	 */	 
    function getContainerDivSizeFromSettings(settingsValue, zoomableContainerParentValue, divPosDiff){
    	if(settingsValue.search && settingsValue.search("%") != -1)
	  		return (zoomableContainerParentValue - divPosDiff)* (parseInt(settingsValue)/100);
	  	else
	  		return parseInt(settingsValue);
    }
    
     /**
	 * get the plugin target rectangle on screen 
	 * @param {Object} settingsValue : a number or a string value given in plugin params
	 * @param {Number} zoomableContainerParentPosValue : zoomable container parent global x  or y
	 * @param {Number} zoomableContainerParentSizeValue : zoomable container parent width or height
	 * @return {Number} return the zoomable container position (in pixel) from setting value (pixel or percent) 
	 */	 
    function getContainerDivPositionFromSettings(settingsValue, zoomableContainerParentPosValue, zoomableContainerParentSizeValue){
    	if(settingsValue.search && settingsValue.search("%") != -1)
	  		return zoomableContainerParentPosValue + zoomableContainerParentSizeValue * (parseInt(settingsValue)/100);
	  	else
	  		return zoomableContainerParentPosValue + parseInt(settingsValue);
    }
    
    /**
     * reinit the component when the user resize the window 
     */
   	function windowResizeEventHandler(){
   		adjustToContainer();
   	}

 	/**
	 * return a retangle from a JQuery object 
	 * @param {Object} jqObject : a JQuery object like $('#myObject')
	 * @return {Object} return {'x':objectX, 'y':objectY, 'width':objectWidth, 'height':objectHeight} 
	 */	 
   	function getRect(jqObject) {
  		var offset = jqObject.offset();
	  	if(!offset)
	  		return null;
		var formX = offset.left;
		var formY = offset.top; 
	    return {'x':formX, 'y':formY, 'width':jqObject.outerWidth(), 'height':jqObject.outerHeight()};
	}
	 
	/**
	 * Point Class
	 * @param {Number} x : point position on X axis
	 * @param {Number} y : point position on Y axis
	 */
	function Point(x, y) {
	    this.x = x;
	    this.y = y;
	     /**
	     * return point informations into a string
	     * @return {String} return (x=5, y=5) 
	     */
	    this.toString = function() {
		    return '(x=' + this.x + ', y=' + this.y + ')';
		};
	    /**
	     * return a new point who is the interpolation of this and the given point 
	     * the new point position is calculate thanks to percentInterpolate (the distance between this and pointToInterpolate in percent)
	     * @return {Point} return {'x':interpolateX, 'y':interpolateY}  
	     */
	    this.interpolate = function(pointToInterpolate, percentInterpolate) {
		    var x = percentInterpolate * this.x + (1 - percentInterpolate) * pointToInterpolate.x;
		    var y = percentInterpolate * this.y + (1 - percentInterpolate) * pointToInterpolate.y;
			return new Point(x, y);
		};
		/**
		 * return the distance between "this" point and the given point  
		 * @return {Number} distance between this and "point"    
		 */
		this.distance = function(point) {
		    return Math.sqrt(Math.pow((point.y - this.y) ,2) + Math.pow((point.x - this.x),2));
		} 
	}


  };
})( jQuery );

/*
 * add smartZoomEasing and smartZoomOutQuad to jQuery easing function 
 */
(function($){
    $.extend($.easing,
    {
        smartZoomEasing: function (x, t, b, c, d) {
            return $.easing['smartZoomOutQuad'](x, t, b, c, d);
        },
        smartZoomOutQuad: function (x, t, b, c, d) {
            return -c *(t/=d)*(t-2) + b;
        }
    });
})(jQuery);

/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.6
 * 
 * Requires: 1.2.2+
 */
(function(e){function r(t){var n=t||window.event,r=[].slice.call(arguments,1),i=0,s=true,o=0,u=0;t=e.event.fix(n);t.type="mousewheel";if(n.wheelDelta){i=n.wheelDelta/120}if(n.detail){i=-n.detail/3}u=i;if(n.axis!==undefined&&n.axis===n.HORIZONTAL_AXIS){u=0;o=-1*i}if(n.wheelDeltaY!==undefined){u=n.wheelDeltaY/120}if(n.wheelDeltaX!==undefined){o=-1*n.wheelDeltaX/120}r.unshift(t,i,o,u);return(e.event.dispatch||e.event.handle).apply(this,r)}var t=["DOMMouseScroll","mousewheel"];if(e.event.fixHooks){for(var n=t.length;n;){e.event.fixHooks[t[--n]]=e.event.mouseHooks}}e.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var e=t.length;e;){this.addEventListener(t[--e],r,false)}}else{this.onmousewheel=r}},teardown:function(){if(this.removeEventListener){for(var e=t.length;e;){this.removeEventListener(t[--e],r,false)}}else{this.onmousewheel=null}}};e.fn.extend({mousewheel:function(e){return e?this.bind("mousewheel",e):this.trigger("mousewheel")},unmousewheel:function(e){return this.unbind("mousewheel",e)}})})(jQuery)

// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================

function transitionEnd() {
  var el = document.createElement('bootstrap');

  var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'transition'       : 'transitionend'
  };

  for (var name in transEndEventNames) {
    if (el.style[name] !== undefined) {
      return { end: transEndEventNames[name] };
    }
  }

  return false; // explicit for ie8 (  ._.)
}

// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
  var called = false, $el = this;
  $(this).one($.support.transition.end, function () { called = true; })
  var callback = function () { if (!called) $($el).trigger($.support.transition.end); }
  setTimeout(callback, duration);
  return this;
};

$(function () {
  $.support.transition = transitionEnd();
});