/* 	
**	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)
	{
		
			
		var self = this;
		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();
		if($($$('body')[0]).getHeight() > 0)
			screenDims.height = (($($$('body')[0]).getHeight())+(64));
		return screenDims;
	},
	
	updateScreenDimensions: function()
	{
		var bodyHeight = 0;
		var screenDims = document.viewport.getDimensions();
		if($($$('body')[0]).getHeight() > 0)
			bodyHeight = ($($$('body')[0]).getHeight())+(64);

			
		if(screenDims.height < bodyHeight)
			screenDims.height = bodyHeight;
			
		if($(this.baseDoc))
			$(this.baseDoc).setStyle({ height: screenDims.height+'px', width: screenDims.width+'px' });
	},
	
	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);	
		this.baseDoc = baseDoc;
	},
	
	createBoxContainer: function(boxId)
	{
		var Container = document.createElement('div');
		Container.id = 'KeyContainer';
		Container.className = 'KeyBoxContainer';
		$(Container).setStyle(
		{
			'zIndex' : '20000',
			'position' : 'absolute',
			'opacity' : '0.0',
			'display' : 'none',
			'padding' : '15px',
			'border' : '0px solid black'
		});
		$($$('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()
	{
		this.stopEvents();
		this.updateScreenDimensions();
		var container = this.container;
		var base = this.base;
		var centerDims = this.calculateCenterDimensions(container, document.viewport);
		if(document.documentElement.scrollTop)
			var scrollY = document.documentElement.scrollTop;
		else
			var scrollY = window.scrollY;
			
		if(typeof scrollY != 'undefined')
			var topPos = (centerDims.top+scrollY);
		else
			var topPos = centerDims.top;
		

		if(window.opera == true)
			if(typeof scrollY == 'undefined')
				topPos = (centerDims.top/6);
			else
				topPos = (scrollY+(centerDims.top/6));
			
		$(container).setStyle(
		{
			'top' : (topPos)+'px',
			'left' : (centerDims.left-37)+'px'
		});
		setTimeout(function()
		{
			new Effect.Morph(container,
			{
				style: 'opacity: 1.0;',
				duration: 0.4,
				queue: { position: 'end', scope: 'KeyBoxScope'},
				beforeStart: function()
				{
					$(container).setStyle({'display':'block'});
				}
			});
		}.bind(this),200);
	},
	
	removeBox: function()
	{
		// window.location.hash = '#';
		this.stopEvents();
		var base = this.base;
		var container = this.container;
		new Effect.Opacity(container,
		{
			duration:0.4,
			from: 1.0,
			to: 0.0,
			queue: { position: 'end', scope: 'KeyBoxEndScope', limit: 1 },
			afterFinish: function()
			{
				$(container).setStyle({'display': 'none', 'top': '0px', 'left': '0px'});
				$(container).innerHTML = '';
				setTimeout(function()
				{
					$(base).setStyle({'display' : 'none'});
				},150);	
			}
		});	
	},
	
	stopEvents: function()
	{
		Effect.Queues.get('KeyBoxScope').each(function(fx)
		{
			fx.cancel();
		});
	}
});