var NXC = NXC || {};
NXC.Box = new Class( {
	
	Implements: [Options, Events],

	options:{
		overlayOpacity: 0.7,
		topPosition: 50
	},
		
	initialize: function( contentBlockID, options ) {
		this.contentBlockID = contentBlockID;

		this.setOptions( options );
		this.prepareHTML();
	},
	
	prepareHTML: function() {
		this.contentBlock = $( this.contentBlockID );
		
		this.overlay = new Element( 'div', {
			'class': 'nxcBoxOverlay',
			'styles': {
				'opacity': 0,
				'visibility': 'visible',
				'height': 0,
				'overflow': 'hidden'
			}
		} ).inject( $( document.body ) );
		this.overlay.get( 'tween' ).addEvent( 'onComplete', function() {
			if( this.overlay.getStyle( 'opacity' ) == 0 ) {
				this.overlay.setStyles( {
					'height': 0,
					'top': ''
				} );
			};
		}.bindWithEvent( this ) );
		window.addEvent( 'resize', function() {
			if( this.overlay.getStyle( 'opacity' ) != 0 ) {
				var scrollSize = $( window ).getScrollSize().y;
				var scrollTop = $( window ).getScroll().y;
				this.overlay.setStyles( {
					'height': scrollSize + scrollTop,
					'top': -scrollTop
				} );
			}
		}.bindWithEvent(this));		
		
		var formWidth  = this.contentBlock.getStyle( 'width' ).toInt()
		var formHeight = this.contentBlock.getStyle( 'height' ).toInt()
		this.center = new Element( 'div', {
			'class': 'nxcBoxCenter',
			'styles': {
				'width': formWidth + 2,
				'margin-left': -( formWidth / 2 ),
				'opacity': 0
			}
		} ).inject( $( document.body ) );
		this.contentBlock.inject( this.center );		
	},
	
	show: function() {
		this.overlay.setStyles( {
			'top': -$( window ).getScroll().y,
			'height': $( window ).getScrollSize().y + $( window ).getScroll().y 
		} );
		this.center.setStyle( 'top', $( window ).getScroll().y + this.options.topPosition );
		this.center.setStyle( 'opacity', 1 );
		
		this.overlay.tween( 'opacity', this.options.overlayOpacity );		
	},

	hide: function() {
		this.center.setStyle( 'opacity', 0 );
		this.overlay.tween( 'opacity', 0 );
	}
} );