var Blackbox = {

	width: 0,
	height: 0,
	visible: false,
	container: null,

	init: function() {
		if (!this.container) {
			this.container = document.body.appendChild(Builder.node('div', { className: 'blackBox' }, [
				Builder.node('div', { className: 'actions' }, [
					Builder.node('a', { href: 'javascript:undefined', className: 'previous navigation' }, '< previous'), ' ', 
					Builder.node('a', { href: 'javascript:undefined', className: 'next navigation' }, 'next >'), ' ',
					Builder.node('a', { href: 'javascript:undefined', className: 'close' }, 'x close').observe('click', function() { Blackbox.hide(); })
				]),
				Builder.node('div', { className: 'content' })
			])); 
		}
	},

	show: function() {
		this.init();
		this.visible = true;
		this.container.show();
	},

	hide: function() {
		this.container.hide();
		this.removeContent();
		this.visible = false;

	},
	removeContent: function() {
		this.container.down('.content').update();
		this.resetNavigation();
	},

	resetNavigation: function() {
		this.container.select('.actions .navigation').invoke('setStyle', { visibility: 'hidden' });
		this.container.select('.actions .navigation').invoke('stopObserving');
	},

	setContent: function(content, previousFunction, nextFunction, minWidth) {
		this.init();

		this.height = document.viewport.getHeight();
		this.width = Math.max((document.viewport.getWidth() - 445), minWidth || 0);
		this.container.setStyle({ width: this.width + 'px', height: this.height + 'px', top: document.viewport.getScrollOffsets().top+ 'px' });

		this.container.down('.content').update(content);


		this.resetNavigation();
		var prevLink = this.container.down('.actions .previous');
		var nextLink = this.container.down('.actions .next');

		if (previousFunction) prevLink.observe('click', previousFunction).setStyle({ visibility: 'visible' });
		if (nextFunction)     nextLink.observe('click', nextFunction).setStyle({ visibility: 'visible' });

		this.centerContent();
		this.show();
	},

	centerContent: function() {
		if (this.container) {
			var content = this.container.down('.content');
			var contentWidth = content.getWidth();
			var contentHeight = content.getHeight();
			content.setStyle({ top: Math.round((this.height - contentHeight) / 2) + 'px', left: Math.round((this.width - contentWidth) / 2) + 'px' });
		}
	}

	
};