CSS gradient animation using Prototype

gradient.js

(function() {
	var setLinearGradient;
	
	// Figure out what prefix the current browser uses for gradients

	var tempEl = new Element('div');
	tempEl.style.cssText = 
	'background-image: -moz-linear-gradient(top, red 0%, white 100%); \

	background-image: -webkit-linear-gradient(top, red 0%, white 100%); \
	background-image: -o-linear-gradient(top, red 0%, white 100%); \
	background-image: -ms-linear-gradient(top, red 0%, white 100%); \
	background-image: linear-gradient(top, red 0%, white 100%);';

	
	var bgCss = tempEl.style.backgroundImage;
	
	// CSS gradients no supported? setGradient is a no-op.
	if (!bgCss || bgCss.indexOf('linear-') == -1) {

		Element.supportsLinearGradient = false;
		setLinearGradient = function () {};
	} else {
		Element.supportsLinearGradient = true;

		// Find the prefix
		var prefix = bgCss.substring(0, bgCss.indexOf('linear-'));
		
		setLinearGradient = function (element, gradients) {

			var element = $(element),
				gradients = gradients.split(';'),
				gradientsCss = [];
				
			if (!element)

				return;
				
			gradients.each(function (gradient) {
				gradientsCss.push(prefix + 'linear-gradient(' + gradient.trim() + ')');

			});
			
			element.style.backgroundImage = gradientsCss.join(', ');
			return element;

		};
	}
	
	Element.addMethods({ setLinearGradient: setLinearGradient });
})();