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

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.


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

window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);

function createGradient() {
	if(!document.getElementById)return;
	
	objArray = getGradientObjects();
	if(!objArray.length) return;
	
	for(i=0;i<objArray.length;i++) {
		params = objArray[i].className.split(" ");
		if(document.all && !window.opera) {
			objArray[i].style.width = objArray[i].offsetWidth + "px";
			params[3] == "horizontal"?gType = 1:gType = 0;
			objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
	} else {
			colorArray = createColorPath(params[1],params[2]);
			x=0;y=0;
			if(params[3] == "horizontal") {
				w=Math.round(objArray[i].offsetWidth/colorArray.length);
				if(!w)w=1;
				h = objArray[i].offsetHeight;
			} else {
				h = Math.round(objArray[i].offsetHeight/colorArray.length);
				if(!h) h =1;
				w = objArray[i].offsetWidth;
			}
			makeGrandParent(objArray[i]);
			tmpDOM = document.createDocumentFragment();
			for(p=0;p<colorArray.length;p++) {
				g = document.createElement("div");
				g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
				params[3] == "horizontal"?x+=w:y+=h;
				tmpDOM.appendChild(g);
				if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
			}
			objArray[i].appendChild(tmpDOM);
			tmpDOM = null;
		}
	}
}

function getGradientObjects() {
	a = document.getElementsByTagName("*");
	objs = new Array();
	for(i=0;i<a.length;i++) {
		c = a[i].className;
		if(c != "") if(c.indexOf("gradient") == 0) objs[objs.length] = a[i];
	} 
	return objs;
}
	
function createColorPath(color1,color2) {
	colorPath = new Array();
	colorPercent = 1.0;
	do {
		colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
		colorPercent-=.01;
	} while(colorPercent>0);
	return colorPath;
}
		
function setColorHue(originColor,opacityPercent,maskRGB) {
	returnColor=new Array();
	for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
	return returnColor;
}

function longHexToDec(longHex) {
	return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));	
}

function toDec(hex) {	
	return parseInt(hex,16);
}
	
function makeGrandParent(obj) {
	disp = document.defaultView.getComputedStyle(obj,'').display;
	disp == "block"?nSpan = document.createElement("div"):	nSpan = document.createElement("span");
	mHTML = obj.innerHTML;
	obj.innerHTML = "";
	nSpan.innerHTML = mHTML;
	nSpan.setAttribute("style","position:relative;z-index:10;");
	obj.appendChild(nSpan);
}