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

var TO = false;
window.onresize = function (){
	if (navigator.userAgent.indexOf("Firefox")==-1){
		// Firefox only fires the resize event when user is done resizing 
		// all other browsers need a timeout so they don't call this function constantly 
	    if(TO !== false) clearTimeout(TO);
	    TO = setTimeout(resizeGradient, 500);
	} else {
    	resizeGradient();
    }
}

function resizeGradient() {
	// if window has been resized, gradient needs to be drawn again
	if(!document.getElementById) return;
	objArray = getGradientObjects();
	if(!objArray.length) return;

	if(!window.XMLHttpRequest) {    // check for IE6, it does not need to be refreshed
	} else {
		if(window.ActiveXObject){
			objArray[0].style.width='100%';    // enough for IE to redraw the object
		} else {
			// for other browsers, delete the current gradient container, then rebuild with new size	
			for(i=0;i<objArray.length;i++) { while(objArray[i].firstChild) objArray[i].removeChild(objArray[i].firstChild); }
			createGradient(objArray);
		}
	}
}

function createGradient(objArray) {
	// when called from the resizeGradient() function, we already have the objArray
	// if not, get the gradient objects
	if(typeof objArray[0] == 'undefined') {
		if(!document.getElementById) return;
		objArray = getGradientObjects();
		if(!objArray.length) return;
	}
	for(i=0;i<objArray.length;i++) {
		arr = objArray[i].className.split(" ");    // retrieve 'horizontal' or 'vertical' from the classname
		g_direction = arr[1];
		color_start = getStyle(objArray[i], 'color');
		color_end = getStyle(objArray[i], 'backgroundColor');
		
		if(window.ActiveXObject) {
			// browser is IE and has its own gradient filter
			objArray[i].style.width = objArray[i].offsetWidth + "px";
			g_direction == "horizontal"?gType = 1:gType = 0;
			objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"" + color_start + "\",EndColorStr=\"" + color_end + "\")";
		} else {
			// find out how many pixels we need to fill
			g_direction == "horizontal"?colorpathlen = objArray[i].offsetWidth:colorpathlen = objArray[i].offsetHeight;

			maxLen = 320;     // max length of the color array
			maxDivlen = 3;  // max height/width of the individual divs (if more than that, it gets grainy and we fill up the rest with bg color)		

			if(colorpathlen>maxLen) colorpathlen = maxLen;
			// create a gradient colorpath
			colorArray = createColorArray(color_start,color_end,colorpathlen);
			x=0;y=0;
			// depending on maxLen and the actual width/height of the object, compute the necessary div width/height
			// if it gets bigger than maxDivlen, cap it. We'll fill the rest with the bg color
			if(g_direction == "horizontal") {
				factor = objArray[i].offsetWidth/(colorpathlen);
				w = parseInt(factor-.01) + 1;
				if(w>maxDivlen) w=maxDivlen,factor=maxDivlen;
				h = objArray[i].offsetHeight;
			} else {
				factor = objArray[i].offsetHeight/(colorpathlen);
				h = parseInt(factor-.01) + 1;
				if(h>maxDivlen) h=maxDivlen,factor=maxDivlen;
				w = objArray[i].offsetWidth;
			}
			// create the containing div
			createContainer(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] + ");");
				g_direction == "horizontal"?x=parseInt(p*factor):y=parseInt(p*factor);
				tmpDOM.appendChild(g);
				if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
			}
			// fill the remainder with the bg color, if needed
			if((y+h)<objArray[i].offsetHeight || (x+w)<objArray[i].offsetWidth) {
				g_direction == "horizontal"?x=(x+w):y=(y+h);
				g_direction == "horizontal"?w=objArray[i].offsetWidth-(x):h=objArray[i].offsetHeight-(y);
				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:" + color_end + ";");
				tmpDOM.appendChild(g);
			}
			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) if(a[i].style.display != 'none') objs[objs.length] = a[i];
	} 
	return objs;
}
	
function createColorArray(color1,color2,colorlen) {
	colorPath = new Array();
	r = 0, g = 1, b = 2;
	c_start = getColorRGB(color1);
	c_end = getColorRGB(color2);

	c_stepsize = new Array((c_end[r] - c_start[r]) / colorlen, (c_end[g] - c_start[g]) / colorlen, (c_end[b] - c_start[b]) / colorlen);

	for(s=0;s<colorlen;s++) {
		colorPath[s] = new Array(parseInt(c_stepsize[r]*s) + c_start[r], parseInt(c_stepsize[g]*s) + c_start[g], parseInt(c_stepsize[b]*s) + c_start[b]);
	}
	return colorPath;
}
	
function getColorRGB(c) {   // gets the individual RGB values and stores them in an array
	var arr1 = c.split(")");
	var arr = arr1[0].split(", ");
	rgb = new Array(parseInt(arr[0].substring(4)),parseInt(arr[1]),parseInt(arr[2]));
	return rgb;
}

function getStyle(el, cssprop){
 if (el.currentStyle) //IE
  return el.currentStyle[cssprop]
 else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  return document.defaultView.getComputedStyle(el, "")[cssprop]
 else //try and get inline style
  return el.style[cssprop]
}

function createContainer(obj) {
	// create div or span depending on type of parent container
	disp = document.defaultView.getComputedStyle(obj,'').display;
	disp == "block"?nSpan = document.createElement("div"):	nSpan = document.createElement("span");
	// move possible contents to the new container
	iHTML = obj.innerHTML;
	obj.innerHTML = "";
	nSpan.innerHTML = iHTML;
	nSpan.setAttribute("style","position:relative;z-index:10;");
	obj.appendChild(nSpan);
}