/**
 * @author jon
 */

var Site = {
	start: function() {
		Site.initMenu();
	},
	initMenu: function() {
		/* This is dirty.
		 * In an ideal world, we should be calling a class to handle all that with correct parameters.
		 * Fact is that I have such class, I just have to adapt it here.
		 */
		var menu = $('mainmenu');
		menu.removeClass("fallback");
		menu.getElements('li a').each(function(menuitem) {
			var position = menuitem.getParent().getPosition();
			var parPos = menuitem.getParent().getParent().getPosition();
			if (position.y > parPos.y)
				menuitem.getParent().setStyle("margin-top", (parPos.y - position.y) + "px");
			menuitem.size = menuitem.getSize();
			menuitem.set('morph', {
				duration: 100
			});
			menuitem.addEvents({
				'mouseenter': function(item){
					var position = item.getPosition();
					if (!item.hoverEl) {
						item.setStyle('position', 'relative');
						item.hoverEl = new Element('SPAN', {
							'class': 'hoveritem',
							'styles': {
								opacity: 0,
								height: 0
							}
						}).inject(item.getParent(), "bottom");
						if (item.getParent().hasClass('first'))
							item.hoverEl.addClass('hoverfirstitem');
					}
					item.hoverEl.set({
						styles: {
							width: item.size.x + "px"
						}
					});
					item.hoverEl.morph({
						opacity: 1,
						height: item.size.y
					});
				}.pass(menuitem),
				'mouseleave': function(item){
					if(item.hoverEl)
					{
						item.hoverEl.morph({
							opacity: 0,
							height: 0
						});
					}
				}.pass(menuitem)
			});
		});
	}
};

window.addEvent('domready', function() {
	Site.start();
});