Gradient Class

/**
	@author		Jeremy M. Daley
	@company	HSR Business to Business
	@title		Web Application Developer
	@email		daleyjem@yahoo.com
*/
 
/**
	Apply a Top-Bottom or Left-Right gradient (with or without alpha transparency)
	by attaching a "gradient" class to any HTML element. Does not interfere with existing classes
	on element.
 
	Usage:
		<div class="some_existing_class gradient(#rrggbb[aa], #rrggbb[aa][, gradient_direction])">Some Text</div>
 
		@param	color1				= hex rgba color value (alpha hex value optional)
		@param	color2				= hex rgba color value (alpha hex value optional)
		@param	gradient_direction	= (optional) linear direction of gradient transition ("tb" or "lr"). 
									  defaults to "tb" if not specified
 
	Example: 
		gradient(#ffffffff, #00000000, tb)
 
		->	Applies a Top-Bottom gradient with the first color value
			a full-opacity white, and the second color value
			a full-transparency black
 
*/
 
if (window.addEventListener) {
	window.addEventListener("load", initGradient, false);
} else {
	window.attachEvent("onload", initGradient);
}
 
var currZ = 1;
 
function initGradient() {
	var DOM = document.getElementsByTagName("*");
 
	for (var elementIndex = 0; elementIndex < DOM.length; elementIndex++) {
		var theElement		= DOM[elementIndex];
		var elementClass	= theElement.className;
 
		if (elementClass.toLowerCase().indexOf("gradient(") != -1) {
			createGradient(theElement);
		}
 
	}
 
}
 
function createGradient(gradElement) {
	var divClass	= gradElement.className;
	var pos			= divClass.toLowerCase().indexOf("gradient(");
	var tempStr		= divClass.substr(pos);
	var pos1		= tempStr.indexOf("(");
	var pos2		= tempStr.indexOf(")");
	tempStr			= tempStr.substr(pos1 + 1, pos2 - pos1 - 1);
 
	var paramArray	= tempStr.split(",");
	var gradStyle	= (paramArray.length > 2) ? paramArray[2].toUpperCase().replace(/ /g, "") : "TB";
	var startHex	= paramArray[0].replace("#", "").replace(" ", "");
	var endHex		= paramArray[1].replace("#", "").replace(" ", "");
	var startAlpha	= (startHex.length > 6) ? startHex.substr(6, 2) : "FF";
	var endAlpha	= (endHex.length > 6) ? endHex.substr(6, 2) : "FF";
 
	var startR	= parseInt(startHex.substr(0, 2), 16);
	var startG	= parseInt(startHex.substr(2, 2), 16);
	var startB	= parseInt(startHex.substr(4, 2), 16);
	var startA	= Math.round((parseInt(startAlpha, 16) * 100) / 255);
	var endR	= parseInt(endHex.substr(0, 2), 16);
	var endG	= parseInt(endHex.substr(2, 2), 16);
	var endB	= parseInt(endHex.substr(4, 2), 16);
	var endA	= Math.round((parseInt(endAlpha, 16) * 100) / 255);
 
	var pullHTML = gradElement.innerHTML;
 
	if (gradElement.style.position.toLowerCase() != "absolute") {
		gradElement.style.position = "relative";
	}
 
	var borderWidth		= parseInt(gradElement.style.borderRightWidth) + parseInt(gradElement.style.borderLeftWidth);
	var borderHeight	= parseInt(gradElement.style.borderTopWidth) + parseInt(gradElement.style.borderBottomWidth);
	var theWidth		= gradElement.offsetWidth - ((isNaN(borderWidth)) ? 0 : borderWidth);
	var theHeight		= gradElement.offsetHeight - ((isNaN(borderHeight)) ? 0 : borderHeight);
 
	var stringArray = [];
 
	/**
		Note:	- 	<table>'s are used for cross-browser and W3C compliance. Using <div>'s breaks in IE
					(can't insert <div> as child of <p>). <table>'s retain abiguity for inserting into <p> tags
				- 	<span> tags don't handle z-index correctly in Opera
 
	*/
	stringArray.push('<table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:absolute; left:0px; top:0px; z-index:' + currZ + '"><tr><td>');
	var gradIndex = (gradStyle == "TB") ? theHeight : theWidth;
 
	for (var divIndex = 0; divIndex < gradIndex; divIndex++) {
		var valPerc = divIndex / gradIndex;
		var newR 		= startR - (Math.ceil((startR - endR) * valPerc));
		var newG		= startG - (Math.ceil((startG - endG) * valPerc));
		var newB		= startB - (Math.ceil((startB - endB) * valPerc));
		var newA		= startA - (Math.ceil((startA - endA) * valPerc));
		var newWidth	= (gradStyle == "TB") ? theWidth : 1;
		var newHeight	= (gradStyle == "TB") ? 1 : theHeight;
		var newTop		= (gradStyle == "TB") ? divIndex : 0;
		var newLeft		= (gradStyle == "TB") ? 0 : divIndex;
 
		/* using span inside span method */
		stringArray.push('<table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:absolute; top:' + newTop + 'px; left:' + newLeft + 'px; opacity:' + (newA / 100) + '; -moz-opacity:' + (newA / 100) + '; filter:alpha(opacity=' + newA + '); width:' + newWidth + 'px; height:' + newHeight + 'px; background-color:rgb(' + newR + ',' + newG + ',' + newB + '); "><tr><td><div style="position:absolute; width:1px; height:1px; "></div></td></tr></table>');
	}
 
	stringArray.push('</table>');
	stringArray.push('<table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:relative; z-index:' + (currZ + 1) + '; "><tr><td>' + pullHTML + '</td></tr></table>');
	var writeStr = stringArray.join("");
	gradElement.innerHTML = writeStr;
 
	currZ += 2;
}