552 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
		
		
			
		
	
	
			552 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								 * transform: A jQuery cssHooks adding cross-browser 2d transform capabilities to $.fn.css() and $.fn.animate()
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * limitations:
							 | 
						||
| 
								 | 
							
								 * - requires jQuery 1.4.3+
							 | 
						||
| 
								 | 
							
								 * - Should you use the *translate* property, then your elements need to be absolutely positionned in a relatively positionned wrapper **or it will fail in IE678**.
							 | 
						||
| 
								 | 
							
								 * - transformOrigin is not accessible
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * latest version and complete README available on Github:
							 | 
						||
| 
								 | 
							
								 * https://github.com/louisremi/jquery.transform.js
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * Copyright 2011 @louis_remi
							 | 
						||
| 
								 | 
							
								 * Licensed under the MIT license.
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * This saved you an hour of work?
							 | 
						||
| 
								 | 
							
								 * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								(function( $, window, document, Math, undefined ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								 * Feature tests and global variables
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								var div = document.createElement("div"),
							 | 
						||
| 
								 | 
							
									divStyle = div.style,
							 | 
						||
| 
								 | 
							
									suffix = "Transform",
							 | 
						||
| 
								 | 
							
									testProperties = [
							 | 
						||
| 
								 | 
							
										"O" + suffix,
							 | 
						||
| 
								 | 
							
										"ms" + suffix,
							 | 
						||
| 
								 | 
							
										"Webkit" + suffix,
							 | 
						||
| 
								 | 
							
										"Moz" + suffix
							 | 
						||
| 
								 | 
							
									],
							 | 
						||
| 
								 | 
							
									i = testProperties.length,
							 | 
						||
| 
								 | 
							
									supportProperty,
							 | 
						||
| 
								 | 
							
									supportMatrixFilter,
							 | 
						||
| 
								 | 
							
									supportFloat32Array = "Float32Array" in window,
							 | 
						||
| 
								 | 
							
									propertyHook,
							 | 
						||
| 
								 | 
							
									propertyGet,
							 | 
						||
| 
								 | 
							
									rMatrix = /Matrix([^)]*)/,
							 | 
						||
| 
								 | 
							
									rAffine = /^\s*matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*(?:,\s*0(?:px)?\s*){2}\)\s*$/,
							 | 
						||
| 
								 | 
							
									_transform = "transform",
							 | 
						||
| 
								 | 
							
									_transformOrigin = "transformOrigin",
							 | 
						||
| 
								 | 
							
									_translate = "translate",
							 | 
						||
| 
								 | 
							
									_rotate = "rotate",
							 | 
						||
| 
								 | 
							
									_scale = "scale",
							 | 
						||
| 
								 | 
							
									_skew = "skew",
							 | 
						||
| 
								 | 
							
									_matrix = "matrix";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// test different vendor prefixes of these properties
							 | 
						||
| 
								 | 
							
								while ( i-- ) {
							 | 
						||
| 
								 | 
							
									if ( testProperties[i] in divStyle ) {
							 | 
						||
| 
								 | 
							
										$.support[_transform] = supportProperty = testProperties[i];
							 | 
						||
| 
								 | 
							
										$.support[_transformOrigin] = supportProperty + "Origin";
							 | 
						||
| 
								 | 
							
										continue;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								// IE678 alternative
							 | 
						||
| 
								 | 
							
								if ( !supportProperty ) {
							 | 
						||
| 
								 | 
							
									$.support.matrixFilter = supportMatrixFilter = divStyle.filter === "";
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// px isn't the default unit of these properties
							 | 
						||
| 
								 | 
							
								$.cssNumber[_transform] = $.cssNumber[_transformOrigin] = true;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								 * fn.css() hooks
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								if ( supportProperty && supportProperty != _transform ) {
							 | 
						||
| 
								 | 
							
									// Modern browsers can use jQuery.cssProps as a basic hook
							 | 
						||
| 
								 | 
							
									$.cssProps[_transform] = supportProperty;
							 | 
						||
| 
								 | 
							
									$.cssProps[_transformOrigin] = supportProperty + "Origin";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// Firefox needs a complete hook because it stuffs matrix with "px"
							 | 
						||
| 
								 | 
							
									if ( supportProperty == "Moz" + suffix ) {
							 | 
						||
| 
								 | 
							
										propertyHook = {
							 | 
						||
| 
								 | 
							
											get: function( elem, computed ) {
							 | 
						||
| 
								 | 
							
												return (computed ?
							 | 
						||
| 
								 | 
							
													// remove "px" from the computed matrix
							 | 
						||
| 
								 | 
							
													$.css( elem, supportProperty ).split("px").join(""):
							 | 
						||
| 
								 | 
							
													elem.style[supportProperty]
							 | 
						||
| 
								 | 
							
												);
							 | 
						||
| 
								 | 
							
											},
							 | 
						||
| 
								 | 
							
											set: function( elem, value ) {
							 | 
						||
| 
								 | 
							
												// add "px" to matrices
							 | 
						||
| 
								 | 
							
												elem.style[supportProperty] = /matrix\([^)p]*\)/.test(value) ?
							 | 
						||
| 
								 | 
							
													value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, _matrix+"$1$2px,$3px"):
							 | 
						||
| 
								 | 
							
													value;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										};
							 | 
						||
| 
								 | 
							
									/* Fix two jQuery bugs still present in 1.5.1
							 | 
						||
| 
								 | 
							
									 * - rupper is incompatible with IE9, see http://jqbug.com/8346
							 | 
						||
| 
								 | 
							
									 * - jQuery.css is not really jQuery.cssProps aware, see http://jqbug.com/8402
							 | 
						||
| 
								 | 
							
									 */
							 | 
						||
| 
								 | 
							
									} else if ( /^1\.[0-5](?:\.|$)/.test($.fn.jquery) ) {
							 | 
						||
| 
								 | 
							
										propertyHook = {
							 | 
						||
| 
								 | 
							
											get: function( elem, computed ) {
							 | 
						||
| 
								 | 
							
												return (computed ?
							 | 
						||
| 
								 | 
							
													$.css( elem, supportProperty.replace(/^ms/, "Ms") ):
							 | 
						||
| 
								 | 
							
													elem.style[supportProperty]
							 | 
						||
| 
								 | 
							
												);
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										};
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
									/* TODO: leverage hardware acceleration of 3d transform in Webkit only
							 | 
						||
| 
								 | 
							
									else if ( supportProperty == "Webkit" + suffix && support3dTransform ) {
							 | 
						||
| 
								 | 
							
										propertyHook = {
							 | 
						||
| 
								 | 
							
											set: function( elem, value ) {
							 | 
						||
| 
								 | 
							
												elem.style[supportProperty] = 
							 | 
						||
| 
								 | 
							
													value.replace();
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}*/
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								} else if ( supportMatrixFilter ) {
							 | 
						||
| 
								 | 
							
									propertyHook = {
							 | 
						||
| 
								 | 
							
										get: function( elem, computed, asArray ) {
							 | 
						||
| 
								 | 
							
											var elemStyle = ( computed && elem.currentStyle ? elem.currentStyle : elem.style ),
							 | 
						||
| 
								 | 
							
												matrix, data;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											if ( elemStyle && rMatrix.test( elemStyle.filter ) ) {
							 | 
						||
| 
								 | 
							
												matrix = RegExp.$1.split(",");
							 | 
						||
| 
								 | 
							
												matrix = [
							 | 
						||
| 
								 | 
							
													matrix[0].split("=")[1],
							 | 
						||
| 
								 | 
							
													matrix[2].split("=")[1],
							 | 
						||
| 
								 | 
							
													matrix[1].split("=")[1],
							 | 
						||
| 
								 | 
							
													matrix[3].split("=")[1]
							 | 
						||
| 
								 | 
							
												];
							 | 
						||
| 
								 | 
							
											} else {
							 | 
						||
| 
								 | 
							
												matrix = [1,0,0,1];
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											if ( ! $.cssHooks[_transformOrigin] ) {
							 | 
						||
| 
								 | 
							
												matrix[4] = elemStyle ? parseInt(elemStyle.left, 10) || 0 : 0;
							 | 
						||
| 
								 | 
							
												matrix[5] = elemStyle ? parseInt(elemStyle.top, 10) || 0 : 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											} else {
							 | 
						||
| 
								 | 
							
												data = $._data( elem, "transformTranslate", undefined );
							 | 
						||
| 
								 | 
							
												matrix[4] = data ? data[0] : 0;
							 | 
						||
| 
								 | 
							
												matrix[5] = data ? data[1] : 0;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											return asArray ? matrix : _matrix+"(" + matrix + ")";
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
										set: function( elem, value, animate ) {
							 | 
						||
| 
								 | 
							
											var elemStyle = elem.style,
							 | 
						||
| 
								 | 
							
												currentStyle,
							 | 
						||
| 
								 | 
							
												Matrix,
							 | 
						||
| 
								 | 
							
												filter,
							 | 
						||
| 
								 | 
							
												centerOrigin;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											if ( !animate ) {
							 | 
						||
| 
								 | 
							
												elemStyle.zoom = 1;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											value = matrix(value);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											// rotate, scale and skew
							 | 
						||
| 
								 | 
							
											Matrix = [
							 | 
						||
| 
								 | 
							
												"Matrix("+
							 | 
						||
| 
								 | 
							
													"M11="+value[0],
							 | 
						||
| 
								 | 
							
													"M12="+value[2],
							 | 
						||
| 
								 | 
							
													"M21="+value[1],
							 | 
						||
| 
								 | 
							
													"M22="+value[3],
							 | 
						||
| 
								 | 
							
													"SizingMethod='auto expand'"
							 | 
						||
| 
								 | 
							
											].join();
							 | 
						||
| 
								 | 
							
											filter = ( currentStyle = elem.currentStyle ) && currentStyle.filter || elemStyle.filter || "";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											elemStyle.filter = rMatrix.test(filter) ?
							 | 
						||
| 
								 | 
							
												filter.replace(rMatrix, Matrix) :
							 | 
						||
| 
								 | 
							
												filter + " progid:DXImageTransform.Microsoft." + Matrix + ")";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											if ( ! $.cssHooks[_transformOrigin] ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												// center the transform origin, from pbakaus's Transformie http://github.com/pbakaus/transformie
							 | 
						||
| 
								 | 
							
												if ( (centerOrigin = $.transform.centerOrigin) ) {
							 | 
						||
| 
								 | 
							
													elemStyle[centerOrigin == "margin" ? "marginLeft" : "left"] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + "px";
							 | 
						||
| 
								 | 
							
													elemStyle[centerOrigin == "margin" ? "marginTop" : "top"] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + "px";
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												// translate
							 | 
						||
| 
								 | 
							
												// We assume that the elements are absolute positionned inside a relative positionned wrapper
							 | 
						||
| 
								 | 
							
												elemStyle.left = value[4] + "px";
							 | 
						||
| 
								 | 
							
												elemStyle.top = value[5] + "px";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											} else {
							 | 
						||
| 
								 | 
							
												$.cssHooks[_transformOrigin].set( elem, value );
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									};
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								// populate jQuery.cssHooks with the appropriate hook if necessary
							 | 
						||
| 
								 | 
							
								if ( propertyHook ) {
							 | 
						||
| 
								 | 
							
									$.cssHooks[_transform] = propertyHook;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								// we need a unique setter for the animation logic
							 | 
						||
| 
								 | 
							
								propertyGet = propertyHook && propertyHook.get || $.css;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								 * fn.animate() hooks
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								$.fx.step.transform = function( fx ) {
							 | 
						||
| 
								 | 
							
									var elem = fx.elem,
							 | 
						||
| 
								 | 
							
										start = fx.start,
							 | 
						||
| 
								 | 
							
										end = fx.end,
							 | 
						||
| 
								 | 
							
										pos = fx.pos,
							 | 
						||
| 
								 | 
							
										transform = "",
							 | 
						||
| 
								 | 
							
										precision = 1E5,
							 | 
						||
| 
								 | 
							
										i, startVal, endVal, unit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// fx.end and fx.start need to be converted to interpolation lists
							 | 
						||
| 
								 | 
							
									if ( !start || typeof start === "string" ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// the following block can be commented out with jQuery 1.5.1+, see #7912
							 | 
						||
| 
								 | 
							
										if ( !start ) {
							 | 
						||
| 
								 | 
							
											start = propertyGet( elem, supportProperty );
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// force layout only once per animation
							 | 
						||
| 
								 | 
							
										if ( supportMatrixFilter ) {
							 | 
						||
| 
								 | 
							
											elem.style.zoom = 1;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// replace "+=" in relative animations (-= is meaningless with transforms)
							 | 
						||
| 
								 | 
							
										end = end.split("+=").join(start);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// parse both transform to generate interpolation list of same length
							 | 
						||
| 
								 | 
							
										$.extend( fx, interpolationList( start, end ) );
							 | 
						||
| 
								 | 
							
										start = fx.start;
							 | 
						||
| 
								 | 
							
										end = fx.end;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									i = start.length;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// interpolate functions of the list one by one
							 | 
						||
| 
								 | 
							
									while ( i-- ) {
							 | 
						||
| 
								 | 
							
										startVal = start[i];
							 | 
						||
| 
								 | 
							
										endVal = end[i];
							 | 
						||
| 
								 | 
							
										unit = +false;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										switch ( startVal[0] ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _translate:
							 | 
						||
| 
								 | 
							
												unit = "px";
							 | 
						||
| 
								 | 
							
											case _scale:
							 | 
						||
| 
								 | 
							
												unit || ( unit = "");
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												transform = startVal[0] + "(" +
							 | 
						||
| 
								 | 
							
													Math.round( (startVal[1][0] + (endVal[1][0] - startVal[1][0]) * pos) * precision ) / precision + unit +","+
							 | 
						||
| 
								 | 
							
													Math.round( (startVal[1][1] + (endVal[1][1] - startVal[1][1]) * pos) * precision ) / precision + unit + ")"+
							 | 
						||
| 
								 | 
							
													transform;
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _skew + "X":
							 | 
						||
| 
								 | 
							
											case _skew + "Y":
							 | 
						||
| 
								 | 
							
											case _rotate:
							 | 
						||
| 
								 | 
							
												transform = startVal[0] + "(" +
							 | 
						||
| 
								 | 
							
													Math.round( (startVal[1] + (endVal[1] - startVal[1]) * pos) * precision ) / precision +"rad)"+
							 | 
						||
| 
								 | 
							
													transform;
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									fx.origin && ( transform = fx.origin + transform );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									propertyHook && propertyHook.set ?
							 | 
						||
| 
								 | 
							
										propertyHook.set( elem, transform, +true ):
							 | 
						||
| 
								 | 
							
										elem.style[supportProperty] = transform;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								 * Utility functions
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// turns a transform string into its "matrix(A,B,C,D,X,Y)" form (as an array, though)
							 | 
						||
| 
								 | 
							
								function matrix( transform ) {
							 | 
						||
| 
								 | 
							
									transform = transform.split(")");
							 | 
						||
| 
								 | 
							
									var
							 | 
						||
| 
								 | 
							
											trim = $.trim
							 | 
						||
| 
								 | 
							
										, i = -1
							 | 
						||
| 
								 | 
							
										// last element of the array is an empty string, get rid of it
							 | 
						||
| 
								 | 
							
										, l = transform.length -1
							 | 
						||
| 
								 | 
							
										, split, prop, val
							 | 
						||
| 
								 | 
							
										, prev = supportFloat32Array ? new Float32Array(6) : []
							 | 
						||
| 
								 | 
							
										, curr = supportFloat32Array ? new Float32Array(6) : []
							 | 
						||
| 
								 | 
							
										, rslt = supportFloat32Array ? new Float32Array(6) : [1,0,0,1,0,0]
							 | 
						||
| 
								 | 
							
										;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									prev[0] = prev[3] = rslt[0] = rslt[3] = 1;
							 | 
						||
| 
								 | 
							
									prev[1] = prev[2] = prev[4] = prev[5] = 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// Loop through the transform properties, parse and multiply them
							 | 
						||
| 
								 | 
							
									while ( ++i < l ) {
							 | 
						||
| 
								 | 
							
										split = transform[i].split("(");
							 | 
						||
| 
								 | 
							
										prop = trim(split[0]);
							 | 
						||
| 
								 | 
							
										val = split[1];
							 | 
						||
| 
								 | 
							
										curr[0] = curr[3] = 1;
							 | 
						||
| 
								 | 
							
										curr[1] = curr[2] = curr[4] = curr[5] = 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										switch (prop) {
							 | 
						||
| 
								 | 
							
											case _translate+"X":
							 | 
						||
| 
								 | 
							
												curr[4] = parseInt(val, 10);
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _translate+"Y":
							 | 
						||
| 
								 | 
							
												curr[5] = parseInt(val, 10);
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _translate:
							 | 
						||
| 
								 | 
							
												val = val.split(",");
							 | 
						||
| 
								 | 
							
												curr[4] = parseInt(val[0], 10);
							 | 
						||
| 
								 | 
							
												curr[5] = parseInt(val[1] || 0, 10);
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _rotate:
							 | 
						||
| 
								 | 
							
												val = toRadian(val);
							 | 
						||
| 
								 | 
							
												curr[0] = Math.cos(val);
							 | 
						||
| 
								 | 
							
												curr[1] = Math.sin(val);
							 | 
						||
| 
								 | 
							
												curr[2] = -Math.sin(val);
							 | 
						||
| 
								 | 
							
												curr[3] = Math.cos(val);
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _scale+"X":
							 | 
						||
| 
								 | 
							
												curr[0] = +val;
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _scale+"Y":
							 | 
						||
| 
								 | 
							
												curr[3] = val;
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _scale:
							 | 
						||
| 
								 | 
							
												val = val.split(",");
							 | 
						||
| 
								 | 
							
												curr[0] = val[0];
							 | 
						||
| 
								 | 
							
												curr[3] = val.length>1 ? val[1] : val[0];
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _skew+"X":
							 | 
						||
| 
								 | 
							
												curr[2] = Math.tan(toRadian(val));
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _skew+"Y":
							 | 
						||
| 
								 | 
							
												curr[1] = Math.tan(toRadian(val));
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											case _matrix:
							 | 
						||
| 
								 | 
							
												val = val.split(",");
							 | 
						||
| 
								 | 
							
												curr[0] = val[0];
							 | 
						||
| 
								 | 
							
												curr[1] = val[1];
							 | 
						||
| 
								 | 
							
												curr[2] = val[2];
							 | 
						||
| 
								 | 
							
												curr[3] = val[3];
							 | 
						||
| 
								 | 
							
												curr[4] = parseInt(val[4], 10);
							 | 
						||
| 
								 | 
							
												curr[5] = parseInt(val[5], 10);
							 | 
						||
| 
								 | 
							
												break;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// Matrix product (array in column-major order)
							 | 
						||
| 
								 | 
							
										rslt[0] = prev[0] * curr[0] + prev[2] * curr[1];
							 | 
						||
| 
								 | 
							
										rslt[1] = prev[1] * curr[0] + prev[3] * curr[1];
							 | 
						||
| 
								 | 
							
										rslt[2] = prev[0] * curr[2] + prev[2] * curr[3];
							 | 
						||
| 
								 | 
							
										rslt[3] = prev[1] * curr[2] + prev[3] * curr[3];
							 | 
						||
| 
								 | 
							
										rslt[4] = prev[0] * curr[4] + prev[2] * curr[5] + prev[4];
							 | 
						||
| 
								 | 
							
										rslt[5] = prev[1] * curr[4] + prev[3] * curr[5] + prev[5];
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										prev = [rslt[0],rslt[1],rslt[2],rslt[3],rslt[4],rslt[5]];
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
									return rslt;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// turns a matrix into its rotate, scale and skew components
							 | 
						||
| 
								 | 
							
								// algorithm from http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp
							 | 
						||
| 
								 | 
							
								function unmatrix(matrix) {
							 | 
						||
| 
								 | 
							
									var
							 | 
						||
| 
								 | 
							
											scaleX
							 | 
						||
| 
								 | 
							
										, scaleY
							 | 
						||
| 
								 | 
							
										, skew
							 | 
						||
| 
								 | 
							
										, A = matrix[0]
							 | 
						||
| 
								 | 
							
										, B = matrix[1]
							 | 
						||
| 
								 | 
							
										, C = matrix[2]
							 | 
						||
| 
								 | 
							
										, D = matrix[3]
							 | 
						||
| 
								 | 
							
										;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// Make sure matrix is not singular
							 | 
						||
| 
								 | 
							
									if ( A * D - B * C ) {
							 | 
						||
| 
								 | 
							
										// step (3)
							 | 
						||
| 
								 | 
							
										scaleX = Math.sqrt( A * A + B * B );
							 | 
						||
| 
								 | 
							
										A /= scaleX;
							 | 
						||
| 
								 | 
							
										B /= scaleX;
							 | 
						||
| 
								 | 
							
										// step (4)
							 | 
						||
| 
								 | 
							
										skew = A * C + B * D;
							 | 
						||
| 
								 | 
							
										C -= A * skew;
							 | 
						||
| 
								 | 
							
										D -= B * skew;
							 | 
						||
| 
								 | 
							
										// step (5)
							 | 
						||
| 
								 | 
							
										scaleY = Math.sqrt( C * C + D * D );
							 | 
						||
| 
								 | 
							
										C /= scaleY;
							 | 
						||
| 
								 | 
							
										D /= scaleY;
							 | 
						||
| 
								 | 
							
										skew /= scaleY;
							 | 
						||
| 
								 | 
							
										// step (6)
							 | 
						||
| 
								 | 
							
										if ( A * D < B * C ) {
							 | 
						||
| 
								 | 
							
											A = -A;
							 | 
						||
| 
								 | 
							
											B = -B;
							 | 
						||
| 
								 | 
							
											skew = -skew;
							 | 
						||
| 
								 | 
							
											scaleX = -scaleX;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// matrix is singular and cannot be interpolated
							 | 
						||
| 
								 | 
							
									} else {
							 | 
						||
| 
								 | 
							
										// In this case the elem shouldn't be rendered, hence scale == 0
							 | 
						||
| 
								 | 
							
										scaleX = scaleY = skew = 0;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// The recomposition order is very important
							 | 
						||
| 
								 | 
							
									// see http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp#l971
							 | 
						||
| 
								 | 
							
									return [
							 | 
						||
| 
								 | 
							
										[_translate, [+matrix[4], +matrix[5]]],
							 | 
						||
| 
								 | 
							
										[_rotate, Math.atan2(B, A)],
							 | 
						||
| 
								 | 
							
										[_skew + "X", Math.atan(skew)],
							 | 
						||
| 
								 | 
							
										[_scale, [scaleX, scaleY]]
							 | 
						||
| 
								 | 
							
									];
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// build the list of transform functions to interpolate
							 | 
						||
| 
								 | 
							
								// use the algorithm described at http://dev.w3.org/csswg/css3-2d-transforms/#animation
							 | 
						||
| 
								 | 
							
								function interpolationList( start, end ) {
							 | 
						||
| 
								 | 
							
									var list = {
							 | 
						||
| 
								 | 
							
											start: [],
							 | 
						||
| 
								 | 
							
											end: []
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
										i = -1, l,
							 | 
						||
| 
								 | 
							
										currStart, currEnd, currType;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// get rid of affine transform matrix
							 | 
						||
| 
								 | 
							
									( start == "none" || isAffine( start ) ) && ( start = "" );
							 | 
						||
| 
								 | 
							
									( end == "none" || isAffine( end ) ) && ( end = "" );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// if end starts with the current computed style, this is a relative animation
							 | 
						||
| 
								 | 
							
									// store computed style as the origin, remove it from start and end
							 | 
						||
| 
								 | 
							
									if ( start && end && !end.indexOf("matrix") && toArray( start ).join() == toArray( end.split(")")[0] ).join() ) {
							 | 
						||
| 
								 | 
							
										list.origin = start;
							 | 
						||
| 
								 | 
							
										start = "";
							 | 
						||
| 
								 | 
							
										end = end.slice( end.indexOf(")") +1 );
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									if ( !start && !end ) { return; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// start or end are affine, or list of transform functions are identical
							 | 
						||
| 
								 | 
							
									// => functions will be interpolated individually
							 | 
						||
| 
								 | 
							
									if ( !start || !end || functionList(start) == functionList(end) ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										start && ( start = start.split(")") ) && ( l = start.length );
							 | 
						||
| 
								 | 
							
										end && ( end = end.split(")") ) && ( l = end.length );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										while ( ++i < l-1 ) {
							 | 
						||
| 
								 | 
							
											start[i] && ( currStart = start[i].split("(") );
							 | 
						||
| 
								 | 
							
											end[i] && ( currEnd = end[i].split("(") );
							 | 
						||
| 
								 | 
							
											currType = $.trim( ( currStart || currEnd )[0] );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											append( list.start, parseFunction( currType, currStart ? currStart[1] : 0 ) );
							 | 
						||
| 
								 | 
							
											append( list.end, parseFunction( currType, currEnd ? currEnd[1] : 0 ) );
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									// otherwise, functions will be composed to a single matrix
							 | 
						||
| 
								 | 
							
									} else {
							 | 
						||
| 
								 | 
							
										list.start = unmatrix(matrix(start));
							 | 
						||
| 
								 | 
							
										list.end = unmatrix(matrix(end))
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									return list;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function parseFunction( type, value ) {
							 | 
						||
| 
								 | 
							
									var
							 | 
						||
| 
								 | 
							
										// default value is 1 for scale, 0 otherwise
							 | 
						||
| 
								 | 
							
										defaultValue = +(!type.indexOf(_scale)),
							 | 
						||
| 
								 | 
							
										scaleX,
							 | 
						||
| 
								 | 
							
										// remove X/Y from scaleX/Y & translateX/Y, not from skew
							 | 
						||
| 
								 | 
							
										cat = type.replace( /e[XY]/, "e" );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									switch ( type ) {
							 | 
						||
| 
								 | 
							
										case _translate+"Y":
							 | 
						||
| 
								 | 
							
										case _scale+"Y":
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											value = [
							 | 
						||
| 
								 | 
							
												defaultValue,
							 | 
						||
| 
								 | 
							
												value ?
							 | 
						||
| 
								 | 
							
													parseFloat( value ):
							 | 
						||
| 
								 | 
							
													defaultValue
							 | 
						||
| 
								 | 
							
											];
							 | 
						||
| 
								 | 
							
											break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										case _translate+"X":
							 | 
						||
| 
								 | 
							
										case _translate:
							 | 
						||
| 
								 | 
							
										case _scale+"X":
							 | 
						||
| 
								 | 
							
											scaleX = 1;
							 | 
						||
| 
								 | 
							
										case _scale:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											value = value ?
							 | 
						||
| 
								 | 
							
												( value = value.split(",") ) &&	[
							 | 
						||
| 
								 | 
							
													parseFloat( value[0] ),
							 | 
						||
| 
								 | 
							
													parseFloat( value.length>1 ? value[1] : type == _scale ? scaleX || value[0] : defaultValue+"" )
							 | 
						||
| 
								 | 
							
												]:
							 | 
						||
| 
								 | 
							
												[defaultValue, defaultValue];
							 | 
						||
| 
								 | 
							
											break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										case _skew+"X":
							 | 
						||
| 
								 | 
							
										case _skew+"Y":
							 | 
						||
| 
								 | 
							
										case _rotate:
							 | 
						||
| 
								 | 
							
											value = value ? toRadian( value ) : 0;
							 | 
						||
| 
								 | 
							
											break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										case _matrix:
							 | 
						||
| 
								 | 
							
											return unmatrix( value ? toArray(value) : [1,0,0,1,0,0] );
							 | 
						||
| 
								 | 
							
											break;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									return [[ cat, value ]];
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function isAffine( matrix ) {
							 | 
						||
| 
								 | 
							
									return rAffine.test(matrix);
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function functionList( transform ) {
							 | 
						||
| 
								 | 
							
									return transform.replace(/(?:\([^)]*\))|\s/g, "");
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function append( arr1, arr2, value ) {
							 | 
						||
| 
								 | 
							
									while ( value = arr2.shift() ) {
							 | 
						||
| 
								 | 
							
										arr1.push( value );
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// converts an angle string in any unit to a radian Float
							 | 
						||
| 
								 | 
							
								function toRadian(value) {
							 | 
						||
| 
								 | 
							
									return ~value.indexOf("deg") ?
							 | 
						||
| 
								 | 
							
										parseInt(value,10) * (Math.PI * 2 / 360):
							 | 
						||
| 
								 | 
							
										~value.indexOf("grad") ?
							 | 
						||
| 
								 | 
							
											parseInt(value,10) * (Math.PI/200):
							 | 
						||
| 
								 | 
							
											parseFloat(value);
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// Converts "matrix(A,B,C,D,X,Y)" to [A,B,C,D,X,Y]
							 | 
						||
| 
								 | 
							
								function toArray(matrix) {
							 | 
						||
| 
								 | 
							
									// remove the unit of X and Y for Firefox
							 | 
						||
| 
								 | 
							
									matrix = /([^,]*),([^,]*),([^,]*),([^,]*),([^,p]*)(?:px)?,([^)p]*)(?:px)?/.exec(matrix);
							 | 
						||
| 
								 | 
							
									return [matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6]];
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								$.transform = {
							 | 
						||
| 
								 | 
							
									centerOrigin: "margin"
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								})( jQuery, window, document, Math );
							 |