window.addEvent('domready', function()
{
	new mainmenu();
});

var mainmenu = new Class(
{
	marr_el: Array(),
	initialize: function()
	{
		var obj_this = this;

		//we add the events on the links of our first menu:
		this.marr_el = $$('#mainmenu .container .firstmenu li');
		for(var i = 0; i < this.marr_el.length; i++)
		{
			//we add the events on our elements:
			this.marr_el[i].addEvent('mouseenter', function(_evt){obj_this.show_sub_menu(this, 'secondmenu');});
			this.marr_el[i].addEvent('mouseleave', function(_evt){obj_this.hide_sub_menu(this, 'secondmenu');});
		}

		this.marr_el = $$('#mainmenu .container .firstmenu .secondmenu li');
		for(var i = 0; i < this.marr_el.length; i++)
		{
			//we add the events on our elements:
			this.marr_el[i].addEvent('mouseenter', function(_evt){obj_this.show_sub_menu(this, 'thirdmenu');});
			this.marr_el[i].addEvent('mouseleave', function(_evt){obj_this.hide_sub_menu(this, 'thirdmenu');});
		}
	},
	hide_sub_menu: function(_obj_parent, _s_submenu_class)
	{
		//we find its sub menu (ul):
		var obj_sub_menu = this.find_children(_obj_parent, 'ul', _s_submenu_class);
		if (obj_sub_menu == null) return;

		//we hide our sub menu;
		obj_sub_menu.setStyle('display', 'none');

		if (_s_submenu_class == 'secondmenu')
		{
		}
		
		if (_s_submenu_class == 'thirdmenu')
			obj_sub_menu.getParent().getParent().getParent().setStyle('display', 'none');
	},
	show_sub_menu: function(_obj_parent, _s_submenu_class)
	{
		//we find its sub menu (ul):
		var obj_sub_menu = this.find_children(_obj_parent, 'ul', _s_submenu_class);
		if (obj_sub_menu == null) return;

		//we show our sub menu:
		obj_sub_menu.setStyle('display', 'block');

		var arr_parent_pos = _obj_parent.getPosition();
		var i_window_width = (window.getSize().x - $('global').getSize().x) / 2;
		switch(_s_submenu_class)
		{
			case 'secondmenu':
			{
				obj_sub_menu.setStyle('display', 'block');

				//we set our position, just under the parent, if we have a secondmenu:
				var i_parent_height = _obj_parent.getSize().y;
				obj_sub_menu.setStyles({'top': arr_parent_pos.y + i_parent_height + 18, 'left': arr_parent_pos.x - i_window_width});
				break;
			}

			case 'thirdmenu':
			{
				//we set our position, just next to the parent, since we have a thirdmenu:
				var arr_position = Array(-30, 0, 30);
				var i_parent_width = _obj_parent.getSize().x - 30;
				obj_sub_menu.getParent().getParent().getParent().setStyles({
							'top': arr_position[this.get_index(_obj_parent.getParent(), _obj_parent)], 
							'left': arr_parent_pos.x - i_window_width + i_parent_width}
				);
				obj_sub_menu.getParent().getParent().getParent().setStyle('display', 'block');
				break;
			}
		}
		

	},
	get_index: function(_obj_parent, _obj)
	{
		var arr_children = _obj_parent.getChildren();
		for(var i = 0; i < arr_children.length; i++)
		{
			if (arr_children[i] == _obj)
				return i;
		}

		return null;
	},
	find_children: function(_obj_parent, _s_tag, _s_class)
	{
		//we get the children of our parent:
		var arr_children = _obj_parent.getChildren();
		for(var i = 0; i < arr_children.length; i++)
		{
			//if our children has the right tag and the right class, we return:
			var s_tag = arr_children[i].get('tag');
			var s_class = arr_children[i].get('class');

			if (
				(s_tag == _s_tag) && 
				(s_class == _s_class)
			)
				return arr_children[i];
		}

		//none of our children were right, so we loop n our children and verify if one of our sub-children has the right tag & class:
		for(var i = 0; i < arr_children.length; i++)
		{
			var obj = this.find_children(arr_children[i], _s_tag, _s_class);
			if (obj)
				return obj;
		}

		//none of our childs are the el we search, so we return null:
		return null;
	}
});

sfHover = function() {
	var sfEls = document.getElementById("mainmenu").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

	var sfEls = document.getElementsByTagName("div");
	for (var i=0; i<sfEls.length; i++) {
		if(
			(sfEls[i].className.indexOf("whitebg") > -1) || 
			(sfEls[i].className.indexOf("gauchebg") > -1) || 
			(sfEls[i].className.indexOf("droitbg") > -1)
		  )
		{
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);