var NXC = NXC || {};
NXC.Box = new Class( {

	Implements: [Options, Events],

	options:{
		overlayOpacity: 0.7,
		topPosition: 50,
		shadow: true,
		closer: true
	},

	opened: false,

	initialize: function( contentBlockID, options ) {
		this.contentBlockID = contentBlockID;

		this.setOptions( options );
		this.prepareHTML();
	},

	prepareHTML: function() {
		this.contentBlock = document.id( this.contentBlockID );

		this.overlay = new Element( 'div', {
			'class': 'nxcBox-overlay',
			'styles': {
				'opacity': 0,
				'visibility': 'visible',
				'height': 0,
				'overflow': 'hidden'
			}
		} ).inject( document.id( 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 = document.id( window ).getScrollSize().y;
				var scrollTop = document.id( window ).getScroll().y;
				this.overlay.setStyles( {
					'height': scrollSize + scrollTop,
					'top': -scrollTop
				} );
			}
		}.bindWithEvent(this));

		var width  = this.contentBlock.getStyle( 'width' ).toInt();
		/*
		if( this.options.shadow ) {
			width += 60;
		}
		*/
		this.center = new Element( 'div', {
			'class': 'nxcBox-center',
			'styles': {
				'width': width + 2,
				'margin-left': -( width / 2 ),
				'opacity': 0
			}
		} ).inject( document.id( document.body ) );
		
		if( this.options.shadow ) {
			if( Browser.Engine.webkit420 ) {
				this.center.setStyle('-webkit-box-shadow', '0 0 10px rgba(0, 0, 0, 0.7)');
			} else if( !Browser.Engine.trident4 ) {
				var shadow = new Element( 'div', { 'class': 'nxcBox-bg-wrap' } ).inject( this.center );
				['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'].each( function( dir ) {
					new Element( 'div', { 'class': 'nxcBox-bg nxcBox-bg-' + dir } ).inject( shadow );
				} );
			}
		}
		if( this.options.closer ) {
			var closer = new Element('a', {
				'class': 'nxcBox-btn-close',
				'events': { 'click': this.hide.bind( this ) }
			} ).inject( this.center );
		}

		this.contentBlock.inject( this.center );
		this.contentBlock.setStyle( 'display', 'block' );
	},

	show: function() {
		this.opened = true;

		this.overlay.setStyles( {
			'top': -document.id( window ).getScroll().y,
			'height': document.id( window ).getScrollSize().y + document.id( window ).getScroll().y
		} );
		this.center.setStyle( 'top', document.id( window ).getScroll().y + this.options.topPosition );
		this.center.setStyle( 'opacity', 1 );

		this.overlay.tween( 'opacity', this.options.overlayOpacity );
	},

	hide: function() {
		this.opened = false;

		this.center.setStyle( 'opacity', 0 );
		this.overlay.tween( 'opacity', 0 );
	}
} );