/* 	
**	KeyBox Base - Is the main KeyBox object and
**	controls the KeyBox object.
**	
**	To inherit and build a new object with this
**	base, use example: (inherits all methods from base)
**
**	KeyBox.example = Class.create(KeyBox.Base,
**	{
**		initialize: function()
**		{
**			this.initKeyBoxBase();
**		}
**	});
**
*/

var KeyBox = new Object();
KeyBox.Base = Class.create(
{
	initialize: function() { },
	
	initKeyBoxBase: function(optionsObj)
	{
		if(!$('keyboxBase')) 
		{ 
			this.screenParams = new Object();
			this.screenParams = this.getScreenDimensions();
			this.createKeyBase();
			this.createBoxContainer();
		}
		this.base = $('keyboxBase');
		this.container = $('KeyContainer');
	},
	
	getScreenDimensions: function()
	{
		var screenDims = document.viewport.getDimensions();
		return screenDims;
	},
	
	createKeyBase: function()
	{
		var self = this;
		var baseDoc = document.createElement('div');
		baseDoc.id = 'keyboxBase';
		$(baseDoc).setStyle(
		{
			'height': self.screenParams.height+'px', 
			'width': self.screenParams.width+'px', 
			'display' : 'none',
			'position':'absolute',
			'opacity' : 0.5,
			'top':'0px', 
			'left':'0px', 
			'zIndex':'2000',
			'backgroundColor':'black'
		});
		baseDoc.observe('click', function() { this.removeBox(); }.bind(this));
		document.getElementsByTagName('body')[0].appendChild(baseDoc);	
	},
	
	createBoxContainer: function(boxId)
	{
		var Container = document.createElement('div');
		Container.id = 'KeyContainer';
		Container.className = 'KeyBoxContainer';
		$(Container).setStyle(
		{
			'zIndex' : '2200',
			'position' : 'absolute',
			'opacity' : '0.0',
			'display' : 'none',
			'backgroundColor' : 'white',
			'padding' : '15px',
			'border' : '0px solid black'
		});
		document.getElementsByTagName('body')[0].appendChild(Container);
	},
	
	calculateCenterDimensions: function(element, parent)
	{
		var elemDims = element.getDimensions();
		var parentDims = parent.getDimensions();		
		var centerDims = new Object();
		centerDims.top = (parentDims.height - elemDims.height) / 2;
		centerDims.left = (parentDims.width - elemDims.width) / 2;
		return centerDims;
	},
		
	activateBox: function()
	{
		this.showBaseContainer();
		this.showResult();
	},
	
	showBaseContainer: function()
	{
		var base = this.base;
		$(base).setStyle({'display':'block'});
	},
	
	showResult: function()
	{
		var container = this.container;
		var base = this.base;
		var centerDims = this.calculateCenterDimensions(container, base);
		$(container).setStyle(
		{
			'top' : centerDims.top+'px',
			'left' : centerDims.left+'px'
		});
		setTimeout(function()
		{
			new Effect.Opacity(container,
			{
				duration:1.1,
				from: 0.0,
				to: 0.99,
				queue: { position: 'end', scope: 'KeyBoxScope', limit: 2 },
				beforeStart: function()
				{
					$(container).setStyle({'display':'block'});
				}
			});
		}.bind(this),200);
	},
	
	removeBox: function()
	{
		var base = this.base;
		var container = this.container;
		new Effect.Opacity(container,
		{
			duration:0.4,
			from: 0.99,
			to: 0.0,
			queue: { position: 'end', scope: 'KeyBoxScope', limit: 2 },
			afterFinish: function()
			{
				$(container).setStyle({'display': 'none', 'top': '0px', 'left': '0px'});
				$(container).innerHTML = '';
				setTimeout(function()
				{
					$(base).setStyle({'display' : 'none'});
				},150);	
			}
		});	
	}
});