var BG = new Class({
	
	left   : 0,
	top    : 0,
	width  : 0,
	height : 0,
	initZ  : 0,
	
	initialize: function(args) {
		this.divId        = args.divId;
		this.div          = $(this.divId);
		this.bgPath       = args.bgPath;
		this.bgVertSizing = args.bgVertSizing;
		this.visible      = (isSet(args.visible)) ? args.visible : true;
		
		this.divWrapper      = new Element ('div', {'id' : this.divId+'Wrapper'});
		this.divBg           = new Element ('div', {'id' : this.divId+'Bg'});
		this.divBgContent    = new Element ('div', {'id' : this.divId+'BgContent'});
		this.divBgTop        = new Element ('div', {'id' : this.divId+'BgTop'});
		
		if (this.bgVertSizing) {
			this.divBgBottom     = new Element ('div', {'id' : this.divId+'BgBottom'});
			this.divBgBottomLeft = new Element ('div', {'id' : this.divId+'BgBottomLeft'});
		}
		
		this.div.setStyle  ('background-color' , 'transparent');
		
		var bgFileURL = 'url(' + this.bgPath + ')';
		this.divBgContent.setStyles({'background-image' : bgFileURL,
								   'position' : 'absolute',
								   'background-position' : 'top right'});
								   
		this.divBgTop.setStyles({'background-image' : bgFileURL,
								   'position' : 'absolute',
								   'background-position' : 'top left'});
								   
		if (this.bgVertSizing) {
			this.divBgBottom    .setStyles({'background-image' : bgFileURL,
									   'position' : 'absolute',
									   'background-position' : 'bottom right'});
									   
			this.divBgBottomLeft.setStyles({'background-image' : bgFileURL,
									   'position' : 'absolute',
									   'background-position' : 'bottom left'});
		}
		
		if (isSet(this.div.getStyle('z-index'))) {
			if (this.div.getStyle('z-index') == 'auto') {
				this.initZ = 0;
			} else {
				this.initZ = parseInt(this.div.getStyle('z-index'));
			}
		} else {
			this.initZ = 0;
		}
		
//		this.initZ = isSet(this.div.getStyle('z-index')) ? parseInt(this.div.getStyle('z-index')) : 0;

		this.divWrapper .setStyles ({ 'position' : 'absolute', 'z-index' : 1 + this.initZ, 'display' : 'none' });
		this.divBg      .setStyles ({ 'position' : 'absolute', 'z-index' : 2 + this.initZ });
		this.div   .setStyles ({ 'position' : 'absolute', 'z-index' : 3 + this.initZ });
		
		this.divWrapper     .inject (this.div,     'before');
		this.div            .inject (this.divWrapper,   'top');
		this.divBg          .inject (this.divWrapper,   'top');
		this.divBgContent   .inject (this.divBg,        'top');
		this.divBgTop       .inject (this.divBgContent, 'top');
		if (this.bgVertSizing) {
			this.divBgBottom    .inject (this.divBgContent, 'after');
			this.divBgBottomLeft.inject (this.divBgBottom,  'bottom');
		}
		
		if (this.visible) this.show();
	},
	
	resize: function (dims) {
		var bottomHeight = this.bgVertSizing ? 50 : 0;
		
		if (isSet(dims)) {
			this.left   = dims.left;
			this.top    = dims.top;
			this.width  = dims.width;
			this.height = dims.height;
		} else {
			this.left   = parseInt($(this.divId).getStyle('left'));
			this.top    = parseInt($(this.divId).getStyle('top'));
			this.width  = parseInt($(this.divId).getStyle('width'));
			this.height = parseInt($(this.divId).getStyle('height'));
//			alert (this.left + ', ' + this.top + ', ' + this.width + ', ' + this.height);
		}

		var leftSliceWidth = parseInt (this.width / 2);

		this.divWrapper.setStyles({ left : this.left, top : this.top, width : this.width, height : this.height });
												
		this.divBg     .setStyles({ left : 0, top : 0, width : this.width, height : this.height});
												
		this.divBgContent.setStyles({ width : this.width - leftSliceWidth, height : this.height-bottomHeight, right:0, top:0});
												
		this.divBgTop.setStyles({ left : -leftSliceWidth, top : 0, width : leftSliceWidth, height : this.height - bottomHeight});

		if (this.bgVertSizing) {
			this.divBgBottom.setStyles({ right : 0, bottom : 0, width : this.width-leftSliceWidth, height : bottomHeight});
													
			this.divBgBottomLeft.setStyles({ left : -leftSliceWidth, bottom : 0, width : leftSliceWidth, height : bottomHeight});
		}
		
		this.div.setStyles({ left : 0, top : 0, width : this.width, height : this.height});
	},
	
	show: function() {
		this.divWrapper.setStyle('display', 'block');
	},
	
	hide: function() {
		this.divWrapper.setStyle('display', 'none');
	}
	
});