var fadeBG = {
	temp : Array(),

	getEl : function(id) {
		return document.getElementById(id);
	},
	
	elX : function (id) {
		oNode = this.getEl(id);
		var x=0;
		while (oNode) {
			x+=oNode.offsetLeft;
			oNode=oNode.offsetParent;
		}
		return x;
	},
	
	elY : function (id) {
		oNode = this.getEl(id);
		var y=0;
		while (oNode) {
			y+=oNode.offsetTop;
			oNode=oNode.offsetParent;
		}
		return y;
	},
	
	underlay : function (id,direction) {
		
		x = this.elX(id);
		y = this.elY(id);
		

		uC=document.createElement("CANVAS");
		uC.style.display="none";
		if (direction==1) {
			uC.setAttribute("width",1+"px");
			uC.setAttribute("height",this.getEl(id).offsetHeight+"px");
		} else if (direction==2) {
			uC.setAttribute("width",this.getEl(id).offsetWidth+"px");
			uC.setAttribute("height",1+"px");
		}
	
		uL=document.createElement("DIV");
		uL.style.position="absolute";
		uL.style.left=x+"px";
		uL.style.top=y+"px";
		uL.style.width=this.getEl(id).offsetWidth+"px";
		uL.style.height=this.getEl(id).offsetHeight+"px";
		uL.style.width=this.getEl(id).offsetWidth+"px";
		uL.style.height=this.getEl(id).offsetHeight+"px";
		uL.style.zIndex=-1;
		uL.style.bgColor="#FF0000";
		uL.innerText="dsaads";
	
		this.getEl(id).parentNode.insertBefore(uC,this.getEl(id));
		this.getEl(id).parentNode.insertBefore(uL,this.getEl(id));
		
		return Array(uC,uL);
	},
	
	draw : function (id,direction) {
		
		temp=new Array();
		temp.push(id);
		temp.push(direction);

		var img = new Image();
		if (img.addEventListener)
			img.addEventListener("load",function() {
				els = fadeBG.underlay(id,direction);
				canvas = els[0];
		                underLay = els[1];
                		ctx = canvas.getContext('2d');

		                endW = fadeBG.getEl(id).offsetWidth;
                		endH = fadeBG.getEl(id).offsetHeight;

		                if (direction==1) {
                		        ctx.drawImage(img,img.width-1,0,1,img.height,0,0,1,endH);
		                        underLay.style.backgroundRepeat="repeat-x";
		                } else if (direction==2) {
                		        ctx.drawImage(img,0,img.height-1,img.width,1,0,0,endW,1);
		                        underLay.style.backgroundRepeat="repeat-y";
		                }
		                strDataURI = canvas.toDataURL();
		                fadeBG.getEl(id).parentNode.removeChild(canvas);
		                underLay.style.backgroundImage=('url('+strDataURI+')');
			},false);
		else if (img.attachEvent) 
			img.attachEvent("onload",function() {
		                els = fadeBG.underlay(id,direction);
		                canvas = els[0];
		                underLay = els[1];
		                ctx = canvas.getContext('2d');

		                endW = fadeBG.getEl(id).offsetWidth;
		                endH = fadeBG.getEl(id).offsetHeight;

		                if (direction==1) {
		                        ctx.drawImage(img,img.width-1,0,1,img.height,0,0,1,endH);
		                        underLay.style.backgroundRepeat="repeat-x";
		                } else if (direction==2) {
		                        ctx.drawImage(img,0,img.height-1,img.width,1,0,0,endW,1);
		                        underLay.style.backgroundRepeat="repeat-y";
		                }
		                strDataURI = canvas.toDataURL();
		                fadeBG.getEl(id).parentNode.removeChild(canvas);
		                underLay.style.backgroundImage=('url('+strDataURI+')');
			});
		

		var oElement = this.getEl(id), bgUrl;
		if( window.getComputedStyle ) {
			bgUrl = window.getComputedStyle(oElement,null).backgroundImage;
		} else if( oElement.currentStyle ) {
			bgUrl = oElement.currentStyle.backgroundImage;
		}
		bgUrl = bgUrl.replace("url(","");
		bgUrl = bgUrl.substr(0,bgUrl.length-1);
		img.src = bgUrl;
		

	},
	
	init : function() {
		
		fadz = getElementsByClassName("fadeBGX");
		for (a=0;a<fadz.length;a++) 
			this.draw(fadz[a].id,1);
		
		fadz = getElementsByClassName("fadeBGY");
		for (a=0;a<fadz.length;a++) 
			this.draw(fadz[a].id,2);
	}
};