/*
	Example:
	
	<div class="contentClass cozBackground style:bluebox">
		Content goes here!
	</div>
*/

	coz.background = {
		src: "",
		corners: {
			ul: [10,10],
			ur: [10,10],
			ll: [10,10],
			lr: [10,10]
		},
		opacity: 1.0,
		shadow: {
			offset: [5,5],
			opacity: 0.5
		},
		align: "center",
		valign: "center",
		render: function(block) {
			with (block.style) {
				paddingTop    = (+coz.getStyle(block,"padding-top")    + Math.max(this.corners.ul[1],this.corners.ur[1])) + "px";
				paddingRight  = (+coz.getStyle(block,"padding-right")  + Math.min(this.corners.ur[0],this.corners.lr[0])) + "px";
				paddingBottom = (+coz.getStyle(block,"padding-bottom") + Math.max(this.corners.ll[1],this.corners.lr[1])) + "px";
				paddingLeft   = (+coz.getStyle(block,"padding-left")   + Math.min(this.corners.ul[0],this.corners.ll[0])) + "px";
			}
			var pos = coz.position(block);
			var size = coz.size(block);
			var style = {
				"background-image": "url('"+coz.path+"images/"+this.src+"')",
				"cssFloat": "left",
				"styleFloat": "left"
			};
			var background = {};
				background.ul = document.createElement("div");
				coz.setStyles(background.ul,style);
				coz.setStyles(background.ul,{
					"background-position": "left top",
					width: this.corners.ul[0] + "px",
					height: this.corners.ul[1] + "px"
				});
				background.ur = document.createElement("div");
				coz.setStyles(background.ur,style);
				coz.setStyles(background.ur,{
					"background-position": "right top",
					width: this.corners.ur[0] + "px",
					height: this.corners.ur[1] + "px"
				});
				background.ll = document.createElement("div");
				coz.setStyles(background.ll,style);
				coz.setStyles(background.ll,{
					"background-position": "left bottom",
					width: this.corners.ll[0] + "px",
					height: this.corners.ll[1] + "px"
				});
				background.lr = document.createElement("div");
				coz.setStyles(background.lr,style);
				coz.setStyles(background.lr,{
					"background-position": "right bottom",
					width: this.corners.lr[0] + "px",
					height: this.corners.lr[1] + "px"
				});
				background.top = document.createElement("div");
				coz.setStyles(background.top,style);
				coz.setStyles(background.top,{
					"background-position": this.align + " top",
					width: (size.width - this.corners.ul[0] - this.corners.ur[0]) + "px",
					height: Math.max(this.corners.ul[1],this.corners.ur[1]) + "px"
				});
				background.bottom = document.createElement("div");
				coz.setStyles(background.bottom,style);
				coz.setStyles(background.bottom,{
					"background-position": this.align + " bottom",
					width: (size.width - this.corners.ll[0] - this.corners.lr[0]) + "px",
					height: Math.max(this.corners.ll[1],this.corners.lr[1]) + "px"
				});
				background.middle = document.createElement("div");
				coz.setStyles(background.middle,style);
				coz.setStyles(background.middle,{
					"background-position": this.valign == "top" ? "0px -" + Math.max(this.corners.ul[1],this.corners.ur[1]) + "px" : 
										   this.valign == "bottom" ? "0px " + (size.height - Math.max(this.corners.ul[1],this.corners.ur[1])) + "px" :
										   this.align + " " + this.valign,
					width: size.width + "px",
					height: (size.height - Math.max(this.corners.ul[1],this.corners.ur[1]) - Math.max(this.corners.ll[1],this.corners.lr[1])) + "px"
				});
			var backgroundDiv = document.createElement("div");
			coz.setStyles(backgroundDiv,{
				position: "absolute",
				width: size.width+"px",
				height: size.height+"px",
				"z-index": 999,
				opacity: this.opacity,
				filter: "alpha(opacity="+(100*this.opacity)+")"
			});
			coz.forEach(["ul","top","ur","middle","ll","bottom","lr"],function(a){
				backgroundDiv.appendChild(background[a]);
			});
			var shadowDiv = backgroundDiv.cloneNode(true);
			coz.setStyles(shadowDiv,{
				opacity: this.shadow.opacity,
				filter: "alpha(opacity="+(100*this.shadow.opacity)+")",
				"margin-left": this.shadow.offset[0] + "px",
				"margin-top": this.shadow.offset[1] + "px",
				"z-index": 998
			});
			for (var i=0; i<shadowDiv.childNodes.length; i++) {
				var node = shadowDiv.childNodes[i];
					node.style.backgroundImage = node.style.backgroundImage.replace(this.src,this.shadow.src);
			}
			block.parentNode.insertBefore(shadowDiv,block);
			block.parentNode.insertBefore(backgroundDiv,block);
			coz.setStyles(block,{"z-index":1000, position:"relative"});
		}
	};
	
	coz.addOnLoad(function() {
		coz.query(".cozBackground",function(block) {
			var style = coz.uFormats(block).style;
			var background = coz.backgrounds[style];
			if (background) background.render(block);
		});
	});
	
	coz.backgrounds = {};
	
	coz.backgrounds.bluebox = coz.extend(coz.background,{
		name: "bluebox",
		src: "bluebox.png",
		valign: "top"
	});
	coz.backgrounds.bluebox.shadow = coz.extend(coz.background.shadow,{
		src: "bluebox_shadow.png",
		offset: [0,2],
		opacity: 0.2
	});
	
	coz.backgrounds.bluetab = coz.extend(coz.background,{
		name: "bluetab",
		src: "bluetab.png",
		corners: {
			ul: [100,10]
		},
		shadow: {
			src: "bluetab_shadow.png"
		}
	});