EBase = {};

EBase.Controls = {};


EBase.Controls.Menu = Class.create( {

	initialize : function(parent, child) {
		this.parent = parent;
		this.child = child;
		this.isMouseOver = false;
		this.timeOut = null;

		if ($(this.parent).readAttribute('href') == '#') {
			Event.observe(this.parent, 'click', function(e) {
				Event.stop(e);
			});
		}
		Event.observe(this.parent, 'mouseover', this.onMouseOver.bindAsEventListener(this));
		Event.observe(this.parent, 'mouseout', this.onMouseOut.bindAsEventListener(this));
		Event.observe(this.child, 'mouseover', this.onMouseOver.bindAsEventListener(this));
		Event.observe(this.child, 'mouseout', this.onMouseOut.bindAsEventListener(this));

		$(this.child).hide()
	},

	onMouseOver : function(evt) {
		clearTimeout(this.timeOut);
		this.isMouseOver = true;
		var obj = this;
		this.timeOut = setTimeout(function() {
			obj.updateMenu(obj)
		}, 150);
	},

	onMouseOut : function(evt) {
		clearTimeout(this.timeOut);
		this.isMouseOver = false;
		var obj = this;
		this.timeOut = setTimeout(function() {
			obj.updateMenu(obj)
		}, 150);
	},

	updateMenu : function(obj) {
		if (obj.isMouseOver) {
			var left = $(obj.parent).cumulativeOffset().left;
			var top = $(obj.parent).cumulativeOffset().top;

			$(obj.child).setStyle( {
				left : (left - 0) + 'px'
			});
			$(obj.child).show();
		} else {
			$(obj.child).hide();
		}
	}
});

EBase.Controls.Mask = Class.create( {

	initialize : function(options) {
		this.opts = options;

		this.maskEle = new Element('span', {
			'class' : 'loading'
		});

		$(this.maskEle).update(this.opts.msg == null ? '' : this.opts.msg);

		$(this.maskEle).setStyle( {
			opacity : 1
		});

		Element.insert($('body'), {
			top : this.maskEle
		});

		$(this.maskEle).hide();
	},

	show : function() {
		var pLeft = $(this.opts.parent).cumulativeOffset().left;
		var pTop = $(this.opts.parent).cumulativeOffset().top;
		var parentDim = $(this.opts.parent).getDimensions();
		var maskDim = $(this.maskEle).getDimensions();

		var left = parseInt(pLeft + ((parentDim.width - maskDim.width) / 2));
		var top = parseInt(pTop + ((parentDim.height - maskDim.height) / 3));		

		$(this.maskEle).setStyle( {
			left : (left) + 'px',
			top : (top) + 'px'
		});

		$(this.maskEle).show();
	},

	hide : function() {	    
		$(this.maskEle).hide();
	}

});

