// JavaScript Document
var ModalContainer = Class.create({
	// Properties
	locked:		false,
	// Options
	useEffects:	true,
	// Elements
	mask:		null,
	container:	null,
	// Constants
	MASK_OPACITY: 0.5,
	
	initialize: function($useMask, $useEffects) {
		// Using scriptaculous effects?
		if(typeof($useEffects) !== 'undefined') this.useEffects = $useEffects;
		
		// Using a mask?
		if(typeof($useMask) == 'undefined' || $useMask) this.mask = this.createMask();
		
		// Create the modal container
		this.container = this.createContainer();
	},
	
	write: function($content) {
		// Append display content to box-body
		this.container.select('.box-body')[0].appendChild($content);
		// Run display
		this.display();
	},
	clear: function() {
		// Erase all content from modal box body
		this.container.select('.box-body')[0].removeChild(this.container.select('.box-body')[0].firstDescendant());
	},
	
	createMask: function() {
		// Create element
		var mask = new Element('div', {'id':'modal-mask'});
		// Set styles and positioning
		mask.setStyle({opacity: this.MASK_OPACITY, position:'fixed', top:0, left:0, zIndex:999, display:'none'});
		// Add behaviours
		Event.observe(mask, 'click', this.hide.bind(this));
		Event.observe(window, 'resize', this.positionMask.bind(this));
		// Append to document body
		return document.body.appendChild(mask);
	},
	positionMask:function() {
		this.mask.setStyle({width:document.viewport.getDimensions().width+'px', height:document.viewport.getDimensions().height+'px'});
	},
	
	createContainer: function() {
		// Create the actual container div
		var container = new Element('div', {'id':'modal-container'});
		// Set container style
		container.setStyle({
			display:	'none',
			position:	'fixed',
			zIndex:		1000
		});
		
		// Add corner/border elements
		container.appendChild(new Element('div').addClassName('box-cnr top left'));
		container.appendChild(new Element('div').addClassName('box-bdr top'));
		container.appendChild(new Element('div').addClassName('box-cnr top right'));
		container.appendChild(new Element('div').addClassName('box-bdr left'));
		
		// Add body
		container.appendChild(new Element('div').addClassName('box-body'));
		
		// Add remaining corner/borders
		container.appendChild(new Element('div').addClassName('box-bdr right'));
		container.appendChild(new Element('div').addClassName('box-cnr bottom left'));
		container.appendChild(new Element('div').addClassName('box-bdr bottom'));
		container.appendChild(new Element('div').addClassName('box-cnr bottom right'));
		
		// Add behaviours
		Event.observe(window, 'resize', this.positionContainer.bind(this));
		
		return container;
	},
	positionContainer: function() {
		if(!this.container.down('.box-body').firstDescendant()) return;
		
		// Get size of content container
		var content = {
			width: parseInt(this.container.select('.box-body')[0].firstDescendant().getStyle('width')),
			height: parseInt(this.container.select('.box-body')[0].firstDescendant().getStyle('height'))
		};
		// Resize borders to fit content
		this.container.select('.box-bdr.top')[0].setStyle({width:content.width+'px'});
		this.container.select('.box-bdr.right')[0].setStyle({height:content.height+'px'});
		this.container.select('.box-bdr.bottom')[0].setStyle({width:content.width+'px'});
		this.container.select('.box-bdr.left')[0].setStyle({height:content.height+'px'});
		// Get the cumulative container border sizes
		var borders = {
			width: parseInt(this.container.select('.box-bdr.left')[0].getStyle('width')) + parseInt(this.container.select('.box-bdr.right')[0].getStyle('width')),
			height: parseInt(this.container.select('.box-bdr.top')[0].getStyle('height')) + parseInt(this.container.select('.box-bdr.bottom')[0].getStyle('height'))
		}
		
		// Resize and reposition content to fit content/viewport
		this.container.setStyle({
			width:		(content.width + borders.width) + 'px',
			height:		(content.height + borders.height) + 'px',
			top:		(document.viewport.getDimensions().height/2 - (content.height + borders.height)/2) + 'px',
			left:		(document.viewport.getDimensions().width/2 - (content.width + borders.width)/2) + 'px'
		});
		try { if(/MSIE/.test(navigator.appVersion) && !/MSIE 8/.test(navigator.appVersion)) this.container.setStyle({top:'0px'}); }
		catch(err) {}
	},
	
	display: function() {
		// Cancel action if locked
		if(this.locked) return false;
		// Display mask
		if(this.mask) {
			// Reset size/position
			this.positionMask();
			// Display element
			if(this.useEffects) this.mask.appear({to:this.MASK_OPACITY, duration:0.25, queue:{scope:'modal:display'}});
			else this.mask.show();
		}
		
		// Add container to the stage
		document.body.appendChild(this.container);
		// Position container
		this.positionContainer();
		// Display
		if(this.useEffects) this.container.appear({
			duration:0.25,
			queue:{scope:'modal:display'},
			beforeStart: function() {
				this.locked = true;
			}.bind(this),
			afterFinish: function() {
				this.locked = false;
			}.bind(this)});
		else this.container.show();
	},
	hide: function() {
		// Cancel action if locked
		if(this.locked) return false;
		
		// Hide the mask
		if(this.mask) {
		}
		
		// Hide the container
		if(this.useEffects) {
			this.container.fade({
				duration:0.25,
				queue:{scope:'modal:display'},
				beforeStart: function() {
					// Lock show/hide methods
					this.locked = true;
				}.bind(this),
				afterFinish: function() {
					// Remove container from stage
					document.body.removeChild(this.container);
					// Remove modal content
					this.clear();
					// Unlock show/hide methods
					this.locked = false;
				}.bind(this)});
		}
		else {
			// Set display properties
			this.container.hide();
			// Remove container from stage
			document.body.removeChild(this.container);
			// Remove modal content
			this.clear();
		}
	}
});