var Box = Class.create();

Box.createRoundedAndTransparant = function (transparancy) {
		var box = new Box();
		box.setRounded(true);
		box.setTransparancy(transparancy);
		
		return box;
};

Box.setImageBase = function (imgBase) {
	Box.IMGBASE = imgBase;	
};

Box.IMGBASE = '/gfx/box/';

Box.prototype = {
	initialize: function() {
			this.rounded = true;
			this.opacity = 1;
			this.zIndex = 1;
	},
	
	setRounded: function(rounded) {
		this.rounded = rounded;
	},
	
	setTransparancy: function(opacity) {
		this.opacity = opacity;	
	},
	
	setZindex: function(zIndex) {
		this.zIndex = zIndex;
	},
	
	_applyTransparancy: function(el) {
		el.style.filter = 'alpha(opacity=' + (this.opacity * 100) + ')';
		el.style.opacity = this.opacity;
		el.style.MozOpacity = this.opacity;
	},
	
	apply: function(el, offset) {
		
		var p = Position.cumulativeOffset(el);
		
		if (offset) {
			p = [
				p[0] - offset[0]
				,p[1] - offset[1]
			];
		}
		
		var elements = new Array();
		
		var emptyImg = document.createElement('img');
		emptyImg.src = Box.IMGBASE + 'trans.gif';
		
		if (this.rounded) {
			// create corners
			var tl = document.createElement('img');
			tl.src = Box.IMGBASE + 'tl.gif';
			tl.style.left = (p[0] - 9) + 'px';
			tl.style.top = (p[1] - 9) + 'px';
			
			var tr = document.createElement('img');
			tr.src = Box.IMGBASE + 'tr.gif';
			tr.style.left = (p[0] + el.offsetWidth) + 'px';
			tr.style.top = (p[1] - 9) + 'px';
			
			var bl = document.createElement('img');
			bl.src = Box.IMGBASE + 'bl.gif';
			bl.style.left = (p[0] - 9) + 'px';
			bl.style.top = (p[1] + el.offsetHeight) + 'px';
			
			var br = document.createElement('img');
			br.src = Box.IMGBASE + 'br.gif';
			br.style.left = (p[0] + el.offsetWidth) + 'px';
			br.style.top = (p[1] + el.offsetHeight) + 'px';
			
			// middle area
			var middle = document.createElement('div');
			middle.style.left = (p[0] - 9) + 'px';
			middle.style.top = (p[1]) + 'px';
			middle.style.width = (el.offsetWidth + (2 * 9)) + 'px';
			middle.style.height = (el.offsetHeight) + 'px';
			
			// top
			var top = document.createElement('div');
			top.style.left = (p[0]) + 'px';
			top.style.top = (p[1] - 9) + 'px';
			top.style.width = (el.offsetWidth) + 'px';
			top.style.height = '9px';
			
			// bottom
			var bottom = document.createElement('div');
			bottom.style.left = (p[0]) + 'px';
			bottom.style.top = (p[1] + el.offsetHeight) + 'px';
			bottom.style.width = (el.offsetWidth) + 'px';
			bottom.style.height = '9px';
			
			// gather elements	
			elements.push(top);
			elements.push(middle);
			elements.push(bottom);
			
			elements.push(tl);
			elements.push(tr);
			elements.push(bl);
			elements.push(br);
			
		} else {
			// middle area
			var middle = document.createElement('div');
			middle.style.left = (p[0] - 9) + 'px';
			middle.style.top = (p[1] - 9) + 'px';
			middle.style.width = (el.offsetWidth + (2 * 9)) + 'px';
			middle.style.height = (el.offsetHeight + (2 * 9)) + 'px';
			
			elements.push(middle);
		}
		
		
		var container = $('container');
		
		// first remove all the children of the container
		while (container.firstChild)
			container.removeChild(container.firstChild);
		
		// then append its new children
		var self = this;
		
		$A(elements).each(
			function(e) {
				e.style.position = 'absolute';
				
				self._applyTransparancy(e);
				
				if (e.tagName == 'DIV') {
					e.appendChild(emptyImg.cloneNode(false));
					Element.addClassName(e, 'boxBackground');
				}
				
				container.appendChild(e);
			}
		);
		
		window.onresize = function() {
			var box = self;
			box.apply(el);
		};
	}
};