var OverlayBox = new Class({
	Implements: Options,
	options: {
		heading: '',
		content: '',
		contentSource: null, 

		closeButton: true,
		autoOpen: true,
		cufonHeading: true,
		hourGlass: false,
		overlayOpacity: 0.6,

		boxClasses: [],
		headingClasses: [],

		onOpen: (function(){}),
		onClose: (function(){}),
	},
	
	overlay: null,
	box: null,
	heading: null,
	content: null,

	initialize: function(options){		
		//if(Browser.Engine.webkit419){return;}
	        this.setOptions(options);
		if( this.options.autoOpen == true ) this.open();
	},

	createBox: function(){

		// CREATE BOX
		this.box = new Element('div', {
			'class': 'overlayBox'
		});

		// Add classes
		this.options.boxClasses.each(function(boxClass, i) {
			this.box.addClass(boxClass);
		}.bind(this));

		// HEADING
		if( this.options.heading != '' ){
			this.heading = new Element('h1', {
				'class': '',
				'html': this.options.heading
			});

			if( this.options.hourGlass ){

				new Element('span', {
					'html': ' please wait...'
				}).inject(this.heading);

				new Element('img', {
					'src': 'images/icon-loading-anim.gif',
					'class': 'hourglass',
					'alt': ''
				}).inject(this.heading);

				this.heading.addClass('noBottom');
			}

			// Add classes
			this.options.headingClasses.each(function(headingClass, i) {
				this.heading.addClass(headingClass);
			}.bind(this));
	
			this.heading.inject(this.box, 'top');
		}

		// Add Close Button
		if( this.options.closeButton == true ){
			new Element('a', {
				'class': 'overlayBoxClose',
				'href': '#',
				'html': 'Close',
				'events': {
					'click': function(e){
						e.preventDefault();
						this.close();
					}.bind(this)
				}
			}).inject(this.box, 'top');
		}

		// CONTENT - either from source of direct content
		this.content = new Element('div', {
			'html': this.options.contentSource ? this.options.contentSource.get('html') : this.options.content
		}).inject( this.box );


		this.box.inject($(document.body));
	},

	open: function(){
		this.createBox();

		this.overlay = new Element('div', { 
			'id': 'backOverlay',
			'styles': { 'opacity':'0','visibility':'visible' }
		}).inject($(document.body));

		this.overlay.setStyles({ 'top': -$(window).getScroll().y,'height':$(window).getScrollSize().y+$(window).getScroll().y });
		this.overlay.tween('opacity', this.options.overlayOpacity);//onComplete: center.tween opacity

		// Wait till overlay is completed
		this.overlay.get('tween').addEvent('onComplete',function(){
			this.box.setStyle('display','block'); // Display first to get size
			this.resetBox();
			if( this.options.cufonHeading ) Cufon.refresh();
		}.bind(this));

		this.options.onOpen();
	},

	close: function(){
		this.box.dispose();
		this.overlay.dispose();
		this.options.onClose();
	},

	replace: function(elem, content){
		if( elem == 'heading' ){
			this.options.heading = content;
			// Only change box content created already
			if( this.box ){
				this.heading.set('html', content);
				if( this.options.cufonHeading ) Cufon.refresh();
			}

		} else if( elem == 'content' ){
			this.options.content = content;
			// Only change box content created already
			if( this.box ) this.content.set('html', content);
		}
		
		if( this.box ) this.resetBox();
	},	

	resetBox: function(){
		this.box.setStyles({ 'top': (($(window).getSize().y-this.box.getSize().y)/2)+$(window).getScroll().y, 'left': ($(window).getSize().x-this.box.getSize().x)/2, 'visibility': 'visible' });
	}	
});