var ModalBox = new Class({

/**
TODO:

The way everything is hidden then seperately shown is goofy. There should be a 
parent container that is set to invisible then only this gets turned on. See 
comment below before doing anything on this.

There should be some support for tweening between init state to final state or 
otherwise remove the init state. Maybe this is a good reason to have everything 
turned on seperately so as to support tweening each element seperately.

*/

	Implements:[Options,Events],
	//Implements: Options,
//----------------------------------------------------------------------------->
// set all the options here

	options:{
		backgroundBorder: '1px solid black',
		backgroundColor: '#ffffff',
		border: 'none',
		backgroundInitWidth: '0px',
		backgroundInitHeight: '0px',
		backgroundOpacity: 0.4,

		centerBorder: 'none',
		centerColor: 'transparent',
		centerInitWidth: '100px',
		centerInitHeight: '100px',
		centerWidth: '200px',
		centerHeight: '200px',
		centerTop: ($(window).getScrollSize().y) / 3,
		centerLeft: ($(window).getScrollSize().x) / 3,
		centerOpacity: 1,

		topBarBorder: 'none',
		topBarColor: 'transparent',
		topBarPadding: '0 0 5px 0',
		topBarTextAlign: 'right',
		topBarTop: '0px',
		topBarLeft: '0px',
		topBarOpacity: 1,

		topBarCloseBorder: 'none',
		topBarCloseColor: 'transparent',
		topBarCloseBackgroundImage: 'url(/images/close.png)',
		topBarCloseInitWidth: '16px',
		topBarCloseInitHeight: '16px',
		topBarCloseWidth: '16px',
		topBarCloseHeight: '16px',
		topBarCloseTop: '0px',
		topBarCloseLeft: '0px',
		topBarCloseOpacity: 1,
		topBarCloseCursor: 'pointer',

		stageBorder: 'none',
		stageColor: '#ffffff',
		stageInitWidth: '30px',
		stageInitHeight: '30px',
		stageSrc: 'http://devtemple.com',
		stageTop: '0px',
		stageLeft: '0px',
		stageOpacity: 1
	},

//----------------------------------------------------------------------------->
//initialize the object

	initialize: function(options){
		this.setOptions(options);
		this.initModalBox();
	},

//----------------------------------------------------------------------------->
//initialize the DOM manipulations

	initModalBox:function(){
		this.prepareDisplay();
	},

//----------------------------------------------------------------------------->
//preparing the background and returning our reference

	prepareBackground:function(){
		modalBoxBackground = new Element('div', {
			id: 'modalBoxBackground',
			'styles': {
				'display': 'block',
				'zIndex': '100',
				'visibility': 'hidden',
				'backgroundColor': this.options.backgroundColor,
				'border': this.options.backgroundBorder,
				'height': this.options.backgroundInitHeight,
				'width': this.options.backgroundInitWidth
			}
		});
		
		return modalBoxBackground;
	},

//----------------------------------------------------------------------------->
//preparing the "center" and returning our reference

	prepareCenter:function(){
		modalBoxCenter = new Element('div', {
			id: 'modalBoxCenter',
			'styles': {
				'display': 'block',
				'zIndex': '101',
				'visibility': 'hidden',
				'backgroundColor': this.options.centerColor,
				'border': this.options.centerBorder,
				'height': this.options.centerInitHeight,
				'width': this.options.centerInitWidth
			}
		});

		return modalBoxCenter;
	},

//----------------------------------------------------------------------------->
//building the DOM

	prepareDisplay:function(){

		this.modalBoxBackground = this.prepareBackground();
		$(document.body).adopt(this.modalBoxBackground);

		this.modalBoxCenter = this.prepareCenter();
		$(document.body).adopt(this.modalBoxCenter);

		this.modalBoxTopBar = this.prepareTopBar();
		this.modalBoxCenter.adopt(this.modalBoxTopBar);

		this.modalBoxStage = this.prepareStage();
		this.modalBoxCenter.adopt(this.modalBoxStage);

		this.modalBoxTopBarClose = this.prepareTopBarClose();
		this.modalBoxTopBar.adopt(this.modalBoxTopBarClose);
		
	},

//----------------------------------------------------------------------------->
//preparing the stage and returning our reference

	prepareStage:function(){
		modalBoxStage = new Element('iframe', {
			id: 'modalBoxStage',
			src: this.options.stageSrc,
			styles: {
				'display': 'block',
				'visibility': 'hidden',
				'border': this.options.stageBorder,
				'height': this.options.stageInitHeight,
				'width': this.options.stageInitWidth
			}
		});
		return modalBoxStage;
	},

//----------------------------------------------------------------------------->
//preparing the top nav bar and returning our reference

	prepareTopBar:function(){
		modalBoxTopBar = new Element('div', {
			id: 'modalBoxTopBar',
			'styles': {
				'display': 'block',
				'visibility': 'hidden',
				'backgroundColor': this.options.topBarColor,
				'border': this.options.topBarBorder,
				'height': this.options.topBarInitHeight,
				'width': this.options.topBarInitWidth
			}
		});

		return modalBoxTopBar; 
	},

//----------------------------------------------------------------------------->
//preparing the close link and returning our reference

	prepareTopBarClose:function(){
		modalBoxTopBarClose = new Element('div', {
			id: 'modalBoxTopBarClose',
			'styles': {
				'display': 'block',
				'visibility': 'hidden',
				'backgroundColor': this.options.topBarCloseColor,
				'backgroundImage': this.options.topBarCloseBackgroundImage,
				'border': this.options.topBarCloseBorder,
				'height': this.options.topBarCloseInitHeight,
				'width': this.options.topBarCloseInitWidth,
				'cursor': this.options.topBarCloseCursor
			}
		});

		modalBoxTopBarClose.addEvent('click',function(e){
			this.removeDisplay();
		}.bindWithEvent(this));

		return modalBoxTopBarClose; 
	},

//----------------------------------------------------------------------------->
//cleaning up the DOM

	removeDisplay:function(){
		$('modalBoxBackground').destroy();
		$('modalBoxCenter').destroy();
	},

//----------------------------------------------------------------------------->
//

	showBackground:function(){
		this.modalBoxBackground.set('styles', {
			'position': 'absolute',
			'top': '0px',
			'left': '0px',
			'visibility': 'visible',
			'opacity': this.options.backgroundOpacity,
			'height': $(window).getScrollSize().y,
			'width': ($(window).getScrollSize().x) - 2
		});
	},

//----------------------------------------------------------------------------->
//

	showCenter:function(){
		this.modalBoxCenter.set('styles', {
			'position': 'absolute',
			'visibility': 'visible',
			'opacity': this.options.centerOpacity,
			'height': this.options.centerHeight,
			'width': this.options.centerWidth
		});

		this.modalBoxCenter.set('styles', {
			'top': this.options.centerTop,
			'left': this.options.centerLeft
		});
	},

//----------------------------------------------------------------------------->
//showing the DOM manipulations

	showDisplay:function(){
		this.showCenter();
		this.showTopBar();
		this.showStage();
		this.showTopBarClose();
		this.showBackground();
	},

//----------------------------------------------------------------------------->
//

	showStage:function(){
		this.modalBoxStage.set('styles', {
			'position': 'relative',
			'visibility': 'visible',
			'top': this.options.stageTop,
			'left': this.options.stageLeft,
			'opacity': this.options.stageOpacity,
			'height': (this.modalBoxCenter.getSize().y - this.modalBoxTopBar.getSize().y) - 2,
			'width': this.modalBoxCenter.getSize().x - 2
		});
	},

//----------------------------------------------------------------------------->
//

	showTopBar:function(){
		this.modalBoxTopBar.set('styles', {
			'position': 'relative',
			'visibility': 'visible',
			'top': this.options.topBarTop,
			'left': this.options.topBarLeft,
			'opacity': this.options.topBarOpacity,
			'height': this.options.topBarHeight,
			'width': this.modalBoxCenter.getSize().x - 2,
			'padding': this.options.topBarPadding
		});
	},

//----------------------------------------------------------------------------->
//

	showTopBarClose:function(){
		this.modalBoxTopBarClose.set('styles', {
			'position': 'relative',
			'visibility': 'visible',
			'opacity': this.options.topBarCloseOpacity,
			'height': this.options.topBarCloseHeight,
			'width': this.options.topBarCloseWidth,
			'top': this.options.topBarCloseTop,
			'left': (this.modalBoxTopBar.getSize().x - this.modalBoxTopBarClose.getSize().x)
		});
	}
})