/**
 * Implement a method that will slide the arrow in from the left
 * 
 * This class will expand the submenus when the user places the mouse
 * over the link.
 * It also slides the arrow in from the left, both in the root and submenus
 * 
 */


var TopMenu = Class.create({
	
	initialize: function()
	{
		var top = $('topMenu');
		var cons = top.getElementsByClassName('menuContainer');
		
		for (var i = 0; i < cons.length; i++) {
			var con = cons[i];
			this.addEvents(con);
			this.addSubEvents(con); // removed at the moment cause it is only the first submenu that slides the arrow
		}
	},
	
	addEvents: function(a)
	{
		Event.observe(a, 'mouseover', function(){
			//this.slideArrow(a);
			this.hover(a);
		}.bind(this));
		Event.observe(a, 'mouseout', function(){
			//this.clearSlide(a);
			this.dehover(a);
		}.bind(this));
	},
	
	addSubEvents: function(con)
	{
		var s = $(con).getElementsByClassName('subMenus');
		s = s[0];
		var subs = $(s).getElementsByClassName('submenu');
		for (var i = 0; i < subs.length; i++) {
			var a = subs[0];
			var p = a.parentNode;
			p = p.parentNode;
			var h = ( $(p).getElementsByClassName('menu') )[0];
			
			$(con).observe('mouseout', function(){
				$(h).removeClassName('hover');
			});
			
			$(con).observe('mouseover', function(){
				$(h).addClassName('hover');
			});
			
			//console.info(a);
			
			/*
			Event.observe(a, 'mouseover', function(){
				this.slideSubArrow(a);
			}.bind(this));
			Event.observe(a, 'mouseout', function(){
				this.clearSubSlide(a);
			}.bind(this));
			* */
		}
	},
	
	isInRoot: function(el, root)
	{
		var par = $(el.parentNode);
		while (par != document.body) {
			var cName = par.className;
			if (cName != 'menuContainer') {
				par = $(par.parentNode);
			} else {
				if (par == root) {
					return true;
				}
			}
		}
		
		return false;
	},
	
	hover: function(root)
	{
		var subCs = $(root).getElementsByClassName('subMenus');
		var subC = subCs[0];
		
		$(subC).setStyle({
			'display': 'block'
		});
	},
	
	dehover: function(root)
	{
		var subCs = $(root).getElementsByClassName('subMenus');
		var subC = subCs[0];
		
		$(subC).setStyle({
			'display': 'none'
		});
	},
	
	startSlide: function(arrow, i, w)
	{
		var cS = $(arrow).getStyle('backgroundPosition');
		
		$(arrow).setStyle({
			'backgroundPosition': '-' + i + 'px'
		});
		
		if (i == 0 || cS == '0px 50%') {
			window.clearInterval(w);
		}
	},
	
	slideArrow: function(root)
	{
		var a = ( $(root).getElementsByClassName('menu') )[0];
		var arrow = ( $(a).getElementsByClassName('arrow') )[0];
		
		var w;
		
		var i = 15;
		
		w = window.setInterval(function(){
			i--;
			this.startSlide(arrow, i, w);
		}.bind(this), 20);
	},
	
	clearSlide: function(root)
	{
		var a = ( $(root).getElementsByClassName('menu') )[0];
		var arrow = ( $(a).getElementsByClassName('arrow') )[0];
		$(arrow).setStyle({
			'backgroundPosition': '-15px'
		});
	},
	
	slideSubArrow: function(root)
	{
		var arrow = ( $(root).getElementsByClassName('arrow') )[0];
		
		var w;
		
		var i = 15;
		
		w = window.setInterval(function(){
			i--;
			this.startSlide(arrow, i, w);
		}.bind(this), 20);
	},
	
	clearSubSlide: function(root)
	{
		var arrow = ( $(root).getElementsByClassName('arrow') )[0];
		$(arrow).setStyle({
			'backgroundPosition': '-15px'
		});
	}
	
});

var tm;

Event.observe(window, 'load', function(){
	tm = new TopMenu();
})