var Box = new Class({
	
	options: {
	
		onComplete: Class.empty
		
	},
	
	initialize: function(options){
		
		this.setOptions(options);
		
		this.eventPosition = this.position.bind(this);
		
		this.overlay = new Element('div').setProperty('id', 'b_overlay').injectInside(document.body);
		this.center = new Element('div').setProperty('id', 'b_center').setStyles({marginLeft: '-200px', display: 'none'}).injectInside(document.body);
		
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide()
			//resize: this.center.effects({duration: 400, transition: Fx.Transitions.sineInOut}),
		};
	
	},
	
	open: function(content, loading){
		
		this.position();
		this.setup(true);
		this.center.setStyles({top: '50px', display: ''});
		this.fx.overlay.start(0.8);
		
		this.loadContent(content, loading);
		
		this.fireEvent("onComplete", this.element, 10);
	},
	
	setup: function(open){
		var elements = $A(document.getElementsByTagName('object'));
		if (window.ie) elements.extend(document.getElementsByTagName('select'));
		elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
	},
	
	position: function(){
		this.overlay.setStyles({top: window.getScrollTop()+'px', height: window.getHeight()+'px'});
	},
	
	loadContent: function(content, loading){
		
		if(!$defined(loading)) loading = false;
		
		this.center.empty();
		this.center.addClass('b_loading');
		
		if(!$defined(content) || content == '') return;
	
		if(!loading) this.center.removeClass('b_loading');
		this.center.setHTML(content);
	},
	
	close: function(){
		
		this.center.style.display = 'none';
		this.center.className = 'b_loading';
		this.fx.overlay.chain(this.setup.pass(false, this)).custom(0);
		return false;
		
	}
	
});
Box.implement(new Options);
Box.implement(new Events);