//MOOdalBox, Copyright (c) 2007 Razvan Brates, <http://e-magine.ro/moodalbox>, MIT Style License.
var _ERROR_MESSAGE = "Oops.. there was a problem with your request.<br /><br />" + "Please try again.<br /><br />" + "<em>Click anywhere to close.</em>";
var _RESIZE_DURATION = 400;
var _INITIAL_WIDTH = 250;
var _INITIAL_HEIGHT = 250;
var _CONTENTS_WIDTH = 500;
var _CONTENTS_HEIGHT = 400;
var _DEF_CONTENTS_WIDTH = 500;
var _DEF_CONTENTS_HEIGHT = 400;
var _ANIMATE_CAPTION = true;
var _EVAL_SCRIPTS = false;
var _EVAL_RESPONSE = false;
var MOOdalBox1 = {
	init: function (options) {
		this.options = Object.extend({
			resizeDuration: _RESIZE_DURATION,
			initialWidth: _INITIAL_WIDTH,
			initialHeight: _INITIAL_HEIGHT,
			contentsWidth: _CONTENTS_WIDTH,
			contentsHeight: _CONTENTS_HEIGHT,
			defContentsWidth: _DEF_CONTENTS_WIDTH,
			defContentsHeight: _DEF_CONTENTS_HEIGHT,
			animateCaption: _ANIMATE_CAPTION,
			evalScripts: _EVAL_SCRIPTS,
			evalResponse: _EVAL_RESPONSE
		},
		options || {});
		this.anchors = [];
		$A($$('a')).each(function (el) {
			if (el.rel && el.href && el.rel.test('^moodalbox', 'i')) {
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el)
			}
		},
		this);
		this.eventKeyDown = this.keyboardListener.bindWithEvent(this);
		this.eventPosition = this.position.bind(this);
		this.overlay = new Element('div').setProperty('id', 'mb_overlay').injectInside(document.body);
		this.center = new Element('div').setProperty('id', 'mb_center').setStyles({
			width: this.options.initialWidth + 'px',
			height: this.options.initialHeight + 'px',
			marginLeft: '-' + (this.options.initialWidth / 2) + 'px',
			display: 'none'
		}).injectInside(document.body);
		this.contents = new Element('div').setProperty('id', 'mb_contents').injectInside(this.center);
		this.bottom = new Element('div').setProperty('id', 'mb_bottom').setStyle('display', 'none').injectInside(document.body);
		this.closelink = new Element('a').setProperties({
			id: 'mb_close_link',
			href: '#'
		}).injectInside(this.bottom);
		this.caption = new Element('div').setProperty('id', 'mb_caption').injectInside(this.bottom);
		new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
		this.error = new Element('div').setProperty('id', 'mb_error').setHTML(_ERROR_MESSAGE);
		this.closelink.onclick = this.overlay.onclick = this.close.bind(this);
		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {
				duration: 500
			}).hide(),
			resize: this.center.effects({
				duration: this.options.resizeDuration,
				onComplete: nextEffect
			}),
			contents: this.contents.effect('opacity', {
				duration: 500,
				onComplete: nextEffect
			}),
			bottom: this.bottom.effects({
				duration: 400,
				onComplete: nextEffect
			})
		};
		this.ajaxRequest = Class.empty
	},
	click: function (link) {
		return this.open(link.href, link.title, link.rel)
	},
	open: function (sLinkHref, sLinkTitle, sLinkRel) {
		this.href = sLinkHref;
		this.title = sLinkTitle;
		this.rel = sLinkRel;
		this.position();
		this.setup(true);
		this.top = Window.getScrollTop() + (Window.getHeight() / 15);
		this.center.setStyles({
			top: this.top + 'px',
			display: ''
		});
		this.fx.overlay.custom(0.8);
		return this.loadContents(sLinkHref)
	},
	position: function () {
		this.overlay.setStyles({
			top: Window.getScrollTop() + 'px',
			height: Window.getHeight() + 'px'
		})
	},
	setup: function (open) {
		var elements = $A($$('object'));
		elements.extend($$(window.ActiveXObject ? 'select': 'embed'));
		elements.each(function (el) {
			el.style.visibility = open ? 'hidden': ''
		});
		var fn = open ? 'addEvent': 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
		this.step = 0
	},
	loadContents: function () {
		if (this.step) return false;
		this.step = 1;
		var aDim = this.rel.match(/[0-9]+/g);
		this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defContentsWidth;
		this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defContentsHeight;
		this.bottom.setStyles({
			opacity: '0',
			height: '0px',
			display: 'none'
		});
		this.center.className = 'mb_loading';
		this.fx.contents.hide();
		var nextEffect = this.nextEffect.bind(this);
		var ajaxFailure = this.ajaxFailure.bind(this);
		var ajaxOptions = {
			method: 'get',
			update: this.contents,
			evalScripts: this.options.evalScripts,
			evalResponse: this.options.evalResponse,
			onComplete: nextEffect,
			onFailure: ajaxFailure
		};
		this.ajaxRequest = new Ajax(this.href, ajaxOptions).request();
		return false
	},
	ajaxFailure: function () {
		this.contents.setHTML('');
		this.error.clone().injectInside(this.contents);
		this.nextEffect();
		this.center.setStyle('cursor', 'pointer');
		this.bottom.setStyle('cursor', 'pointer');
		this.center.onclick = this.bottom.onclick = this.close.bind(this)
	},
	nextEffect: function () {
		switch (this.step++) {
		case 1:
			this.center.className = '';
			this.center.setStyle('cursor', 'default');
			this.bottom.setStyle('cursor', 'default');
			this.center.onclick = this.bottom.onclick = '';
			this.caption.setHTML(this.title);
			this.contents.setStyles({
				width: this.options.contentsWidth + "px",
				height: this.options.contentsHeight + "px"
			});
			if (this.center.clientHeight != this.contents.offsetHeight) {
				this.fx.resize.custom({
					height: [this.center.clientHeight, this.contents.offsetHeight]
				});
				break
			}
			this.step++;
		case 2:
			if (this.center.clientWidth != this.contents.offsetWidth) {
				this.fx.resize.custom({
					width: [this.center.clientWidth, this.contents.offsetWidth],
					marginLeft: [ - this.center.clientWidth / 2, -this.contents.offsetWidth / 2]
				});
				break
			}
			this.step++;
		case 3:
			this.bottom.setStyles({
				top:
				(this.top + this.center.clientHeight) + 'px',
				width: this.contents.style.width,
				marginLeft: this.center.style.marginLeft,
                display: 'none'
                //display: ''
			});
			this.fx.contents.custom(0, 1);
			break;
		case 4:
			if (this.options.animateCaption) {
				this.fx.bottom.custom({
					opacity:
					[0, 1],
					height: [0, this.bottom.scrollHeight]
				});
				break
			}
			this.bottom.setStyles({
				opacity: '1',
				height: this.bottom.scrollHeight + 'px'
			});
		case 5:
			this.step = 0
		}
	},
	keyboardListener: function (event) {
		if ((event.control && event.key == 'w') || (event.control && event.key == 'x') || (event.key == 'esc')) {
			this.close();
			event.stop()
		}
	},
	close: function () {
		if (this.step < 0) return;
		this.step = -1;
		for (var f in this.fx) this.fx[f].clearTimer();
		this.center.style.display = this.bottom.style.display = 'none';
		this.center.className = 'mb_loading';
		this.fx.overlay.chain(this.setup.pass(false, this)).custom(0);
		return false
	}
};
Window.onDomReady(MOOdalBox1.init.bind(MOOdalBox1));
