gradients.js

/*! 
* Copyright (c) 2011 Tom Ellis (http://www.webmuse.co.uk)
* Linear and Radial Gradient cssHook for jQuery
* Limitations:
  - Works with jQuery 1.4.3 and higher
  - Works in Firefox 3.6+, Safari 5.1+, Chrome 13+, Opera 11.10+, IE9+ 
  - Radial Gradients DO NOT work in Opera yet (Doesn't make sense I Know!)
  - Only works for background and background image CSS properties
* Licensed under the MIT License (LICENSE.txt).
*/
(function($) {

	var div = document.createElement( "div" ),
		divStyle = div.style,
		rLinear = /^(.*?)linear-gradient(.*?)$/i,
		rRadial = /^(.*?)radial-gradient(.*?)$/i,
		rLinearSettings = /^(.*?)(:?linear-gradient)(\()(.*)(\))(.*?)$/i,		
		rRadialSettings = /^(.*?)(:?radial-gradient)(\()(.*?)(\))(.*?)$/i,
		rSupportLinearW3C = /(^|\s)linear-gradient/,	
		rSupportLinearMoz = /(^|\s)-moz-linear-gradient/,	
		rSupportLinearWebkit = /(^|\s)-webkit-linear-gradient/,	
		rSupportLinearOpera = /(^|\s)-o-linear-gradient/,	
		rSupportRadialW3C = /(^|\s)radial-gradient/,	
		rSupportRadialMoz = /(^|\s)-moz-radial-gradient/,	
		rSupportRadialWebkit = /(^|\s)-webkit-radial-gradient/,	
		rSupportRadialOpera = /(^|\s)-o-radial-gradient/,				  
		rWhitespace = /\s/,
		rWhiteGlobal = /\s/g,
		cssProps = "background backgroundImage", //listStyleImage not supported yet
		cssLinear = "background-image: -moz-linear-gradient(red, blue);background-image: -webkit-linear-gradient(red, blue);background-image: -o-linear-gradient(red, blue);background-image: linear-gradient(red, blue);",
		cssRadial = "background-image: -moz-radial-gradient(circle, orange, red);background-image: -webkit-radial-gradient(circle, orange, red);background-image: -o-radial-gradient(circle,red, blue);background-image: radial-gradient(circle, orange, red);",
		cssPropsArray = cssProps.split( rWhitespace );
		divStyle.cssText = cssLinear,
		linearSettings = function ( value ) {
			var parts = rLinearSettings.exec( value );
			value = value.replace( new RegExp(parts[2], 'g') , $.support.linearGradient );
			return value;
		},
		radialSettings = function ( value ) {
			var parts = rRadialSettings.exec( value );			
			value = value.replace( new RegExp(parts[2], 'g') , $.support.radialGradient );
			return value;
		};

		$.support.linearGradient =
			rSupportLinearW3C.test( divStyle.backgroundImage ) ? "linear-gradient" :
			(rSupportLinearMoz.test( divStyle.backgroundImage ) ? "-moz-linear-gradient" :
			(rSupportLinearWebkit.test( divStyle.backgroundImage ) ? "-webkit-linear-gradient" :
			(rSupportLinearOpera.test( divStyle.backgroundImage ) ? "-o-linear-gradient" :
			false)));

		divStyle.cssText = cssRadial;
		
		$.support.radialGradient =
			rSupportRadialW3C.test( divStyle.backgroundImage ) ? "radial-gradient" :
			(rSupportRadialMoz.test( divStyle.backgroundImage ) ? "-moz-radial-gradient" :
			(rSupportRadialWebkit.test( divStyle.backgroundImage ) ? "-webkit-radial-gradient" :
			(rSupportRadialOpera.test( divStyle.backgroundImage ) ? "-o-radial-gradient" :
			false)));
			
	    if ( $.support.linearGradient && $.support.linearGradient !== "linear-gradient" ) {

			$.each( cssPropsArray, function( i, prop ) {

				$.cssHooks[ prop ] = {

					set: function( elem, value ) {
												
						if( rLinear.test( value ) ){
							elem.style[ prop ] = linearSettings( value );
						} else if ( rRadial.test( value ) ) {
							elem.style[ prop ] = radialSettings( value );
						} else {
							elem.style[ prop ] = value;
						}
					}
				};
				
			});

	    }
	
		div = divStyle = null; 
})(jQuery);