/*!

Cross Browser Gradient Backgrounds
v1.0
Last Revision: 11.03.2005
steve@slayeroffice.com

please leave this notice in tact.

should you improve upon this code, please
let me know so that I may update the version
hosted on slayeroffice

--- to use --
reference this file (on your own server) as a javascript src
in the head of your document. give the elements
you want a gradient background applied to a class as such:

class="gradient 000000 ffffff horizontal"

See http://slayeroffice.com/code/gradient/ for more examples.

History:
2010-02-12: Added to CMS2 template site.
            Updated to utilize CSS for FF 3.6.
2009-11-05: Added to Hamilton Health by Caitlin

*************************/

/*global Event, Dom, document, window, YAHOO, navigator
*/

var GRADIENT = {

	init: function () {

		var gradients = Dom.getElementsByClassName('gradient'),
			x = gradients.length,
			params,

			creation =
				(YAHOO.env.ua.ie) ? this.createIE :
				(YAHOO.env.ua.webkit) ? this.createWebkit :
				(YAHOO.env.ua.gecko) ? this.getGecko() :
				this.createCanvas;

		if (gradients.every(function (el) {
				var pos = Dom.getStyle(el, 'position');
				return (pos === 'absolute' || pos === 'relative');
			}) === false) {

			if (
				document.location.hostname
					.substring(0, 4).toLowerCase() === 'dev.' ||

					document.location.hostname
						.substring(0, 6).toLowerCase() === 'local.'
			) {

				window.alert(
					'Elements with gradients must have absolute or ' +
						'relative positioning to support Opera 10.10 and ' +
						'FF 3.5.7 and below.'
				);
			}

		} else {

			while (x--) {
				params = gradients[x].className.split(' ');
				params[0] = gradients[x];
				creation.apply(this, params);
			}

		}
	},

	getGecko: function () {

		// Requires YUI 2.8.0r4 or greater
		if (YAHOO.env.ua.gecko >= 1.92) {
			return this.createGecko;
		}

		var findRV = /\brv:([\s\S]+?)(?:;|\))/i,
			rv     = findRV.exec(navigator.userAgent)[1];

		rv = rv.split('.');
		if (rv.length > 1) {
			rv[0] += '.' + rv[1];
			rv.splice(1, 1);
		}
		rv = parseFloat(rv.join(''));

		return (rv >= 1.92) ? this.createGecko : this.createCanvas;
	},

	createIE: function (el, color1, color2, direction) {

		var region = Dom.getRegion(el);

		el.style.width = (region.right - region.left) + 'px';
		direction = (direction[3] === 'horizontal') ? 1 : 0;

		el.style.filter =
			'progid:DXImageTransform.Microsoft.Gradient' +
			'(GradientType=' + direction.toString() +
			',StartColorStr="#' + color1 + '"' +
			',EndColorStr="#' + color2 + '")';
	},

	createGecko: function (el, color1, color2, direction) {
		var point = (direction === 'horizontal') ? 'left' : 'top';

		el.style.backgroundImage =
			'-moz-linear-gradient(' + point + ', ' +
			'#' + color1 + ', ' +
			'#' + color2 + ')';

	},

	createWebkit: function (el, color1, color2, direction) {

		el.style.backgroundImage = (direction === 'horizontal') ?
			'-webkit-gradient(' +
			'linear, ' +
			'left top, ' +
			'right top, ' +
			'from(#' + color1 + '), ' +
			'to(#' + color2 + '))' :

			'-webkit-gradient(' +
			'linear, ' +
			'left top, ' +
			'left bottom, ' +
			'from(#' + color1 + '), ' +
			'to(#' + color2 + '))';

	},

	/** Used for FireFox 3.5.7 and below, and all versions of Opera. */
	createCanvas: function (el, color1, color2, direction) {

		this.makeGrandParent(el);

		var canvas   = document.createElement('canvas'),
			context  = canvas.getContext('2d'),
			region   = Dom.getRegion(el),
			w        = region.right - region.left,
			h        = region.bottom - region.top,
			gradient = (direction === 'horizontal') ?
				context.createLinearGradient(0, 0, w, 0) :
				context.createLinearGradient(0, 0, 0, h);

		canvas.width  = w;
		canvas.height = h;
		canvas.style.position = 'absolute';
		canvas.style.top = '0px';
		canvas.style.left = '0px';
		gradient.addColorStop(0.0, '#' + color1);
		gradient.addColorStop(1.0, '#' + color2);
		context.fillStyle = gradient;
		context.fillRect(0, 0, w, h);

		el.appendChild(canvas);

	},

	makeGrandParent: function (obj) {
		var el = Dom.getStyle(obj, 'display');
		el = (el === 'block') ? 'div' : 'span';
		el = document.createElement(el);
		el.style.position = 'relative';
		el.style.zIndex = '10';

		while (obj.hasChildNodes()) {
			el.appendChild(obj.firstChild);
		}
		obj.appendChild(el);
		return obj;
	}
};

Event.onDOMReady(GRADIENT.init, GRADIENT, true);