/**
 * Requires outercontent around all content to detect page height.
 */

var CustomBox = new Class(
{
	Implements: Options,

	options: {
	},

	animating: false,
	container: null,
	outer: null,
	black: null,
	content: null,
	isVisible: false,
	innerContentText: null,
	innerContentClose: null,
	nextCloseFunc: null, // call me next time black box closes


	initialize: function(id, options) {

		this.setOptions(options);

		this.outer = $(id);
		this.black = this.outer.getElement('div.black').addEvent('click', this.fadeOut.bind(this));
		this.content = this.outer.getElement('div.content');
		this.innerContentText = this.outer.getElement('div.innerContent').getElement('.text');
		this.innerContentClose = this.outer.getElement('div.innerContent').getElement('.close');
		this.container = $(this.options.container);

		window.addEvent('scroll', this.pageHasScrolled.bind(this));
		window.addEvent('resize', this.pageHasResized.bind(this));

		this.innerContentClose.addEvent('click', this.fadeOut.bind(this));
	},

	pageHasScrolled: function() {
		if (this.isVisible)
			this.content.setStyle('margin-top', $(document.body).getScroll().y + 'px');
	},

	pageHasResized: function() {
		if (this.isVisible) {
			this.content.setStyle('left', (document.body.getSize().x - this.content.getSize().x) / 2);
			this.content.setStyle('top', (document.body.getSize().y - this.content.getSize().y) / 2);
		}
	},

	setContentLoading: function() {
		// set content to "loading"
		$$('.enterDetails')[0].addClass('hidden');

		var outer = new Element('div');
		var inner = new Element('div', {'class': 'ajaxLoader'});
		inner.appendText('Indlæser. Vent venligst...');
		outer.grab(inner);
		this.setContent(outer);
	},

	// replaces content and vertically centers it
	setContent: function(elem, closeTxt) {
		// make sure content is hidden
		elem.fade('hide');
		this.innerContentText.set('html','');
		this.innerContentText.grab(elem);

		if (closeTxt) {
			this.innerContentClose.fade('show');
			this.innerContentClose.set('html', closeTxt);
		} else {
			this.innerContentClose.fade('hide');
		}

		// get height
		var elemY = elem.getSize().y + $$('.enterDetails')[0].getSize().y;
		var contentY = this.content.getSize().y;

		var topMargin = (contentY-elemY) / 2;

		// center element
		elem.setStyle('margin-top', topMargin+'px');

		elem.fade('show');
	},

	fadeIn: function(isLoading, showForm) {
		if (this.animating)
			return;

		if (showForm)
			$$('.enterDetails')[0].removeClass('hidden');
		else {
			$$('.enterDetails')[0].addClass('hidden');
		}

		this.animating = true;
		this.isVisible = true;
		this.pageHasScrolled();

		var heightOuter = this.container.getSize().y;
		var heightBody = document.body.getSize().y;
		var height = (heightBody > heightOuter)?heightBody : heightOuter;
		this.outer.setStyle('height', height+'px');

		this.hideFlash();

		// make sure black is hidden at start
		this.black.fade('hide');
		this.fadeInContent();
		this.outer.setStyle('display', 'block');

		var IE6 = Browser.Engine.trident && Browser.Engine.version == 4;

		var fx = new Fx.Tween(this.black, {
			onComplete: function(el) {
				this.animating = false;
			}.bind(this),

			onStart: function(isLoading) {
				this.pageHasResized();

				if (isLoading)
					this.setContentLoading();
			}.bind(this, isLoading=="loading"),

			duration: IE6?0:500 // fade doesn't work properly in ie6, so just show
		});
		fx.start('opacity', 0, 0.8);
	},

	fadeInContent: function() {
		this.content.fade('hide');
		var fx = new Fx.Tween(this.content, {
			onComplete: function(el) {
			}.bind(this)
		});
		fx.start('opacity', 0, 1);
	},

	fadeOut: function() {
		if (this.animating)
			return;

		this.fadeOutContent();

		var fx = new Fx.Tween(this.black, {
			onComplete: function(el) {
				this.showFlash();
				this.hideOC();
				this.isVisible = false;

				// call close function if any given and clear the var
				if (this.nextCloseFunc) {
					this.nextCloseFunc();
					this.nextCloseFunc = null;
				}
			}.bind(this)
		});

		fx.start('opacity', 0.8, 0);
	},

	fadeOutContent: function() {
		var fx = new Fx.Tween(this.content, {
			complete: function(el) {
			}.bind(this)
		});
		fx.start('opacity', 1, 0);
	},

	hideFlash: function() {
		hideFlashBanner();
	},

	showFlash: function() {
		addFlashBanner();
	},

	hideOC: function() {
		this.outer.setStyle('display', 'none');
	}
});