/*!

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.

Caitlin created this file on Hamilton 11/5/09

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

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

"use strict";

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 :
		this.createCanvas;

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

	},

	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 + '")';
	},

	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 + '))';

	},

	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);