Event.observe(window, 'load', mcMenuInit);
function mcMenuInit()
{
		var menus = document.getElementsByClassName('mcMenu');
		for (var i = 0; i < menus.length; i++)
		{
			new mcMenu(menus[i]);
		}

}
var mcMenuItem = Class.create()
mcMenuItem.prototype = {
	initialize: function(element,direction)
	{
		this.element = element;
        var children = $$('#' + element.id + '> ul');
        var blah = this.element;
        if (children.length >0)
		{
            var child = children[0];
			this.top = 0;
			this.left = 0;
			if (direction == "v")
			{
				this.element.addClassName("vArrow");
				this.top = this.element.getHeight();
			}
			else
			{
				this.left = this.element.getWidth();
				this.element.addClassName("hArrow");
			}
			this.height = child.getHeight();
			this.width = child.getWidth();
			this.hHeight = this.height/2;
			this.hWidth = this.width/2;
			this.direction = direction
			var div = new Element('div', { 'style': ' width:'+this.width+'px; height:'+this.height+'px; position:absolute; top:'+this.top+'px; left:'+this.left+'px' });
			child.wrap(div)
			div.absolutize()
			this.offset = [];
			this.offset[0] = this.left+this.hWidth;
			this.offset[1] = this.top+this.hHeight;
			child.setStyle ({
				left:'0px',
				top: '0px'
			});
			div.setStyle ({
				width: '0px',
				height: '0px',
				left: this.offset[0]+'px',
				top: this.offset[1]+'px'
			});
			this.div = div
            this.child = child
			Event.observe (this.element,'mouseenter', this.onMouseOver.bindAsEventListener(this));
			Event.observe (this.element,'mouseleave', this.onMouseOut.bindAsEventListener(this));
			Event.observe (this.div,'mousemove', this.onMouseMove.bindAsEventListener(this));
			
			var x = children = $$('#' + element.id + '> div > ul >li');
            var allLength = x.length;
            for (var i=0; i< allLength;i++)
			{
                var id = this.element.id +"s"+ i
				x[i].id = id
				var p = new mcMenuItem($(id),'h');
			}
			child.setStyle({
				display:'none',
				visibility: 'visible'
			});
		}

	},
	onMouseOver: function()
	{
		Effect.Queues.get(this.element.id).each(function(effect) {effect.cancel()});
		if (this.element.down())
		{
			new Effect.Morph(this.div, {style: "width:"+this.width+"px; height:"+this.height+"px; top:"+this.top+"px; left:"+this.left+"px;", duration: .35, queue: {scope: this.element.id}  });
			this.child.appear({duration:.25,delay:.45, queue:{scope:this.element.id}});
		}
	},
	onMouseOut: function()
	{
		Effect.Queues.get(this.element.id).each(function(effect) {effect.cancel()});
		if (this.div)
		{
			this.child.hide()
			new Effect.Morph(this.div,{style: "width:0px; height:0px; top:"+this.offset[1]+"px; left:"+this.offset[0]+"px", transition: Effect.Transitions.linear ,queue:{scope: this.element.id}, duration:.2});
		}	
	},
	onMouseMove: function(e)
	{
		
		os = this.div.cumulativeOffset();
		topSpot = (e.pointerY()) -8;
		leftSpot = os[0] -18
		$('followme').setStyle({
							   top: topSpot+'px',
							   left: leftSpot+'px',
							   backgroundPosition: '0px 0px'
								});
		e.stop();
	}
	
};
var mcMenu = Class.create();
mcMenu.prototype = {
	initialize: function(element)
	{
		this.element = element;
		
		if (!$('followme'))
		{
			arrow = new Element('div', { 'id': 'followme', 'style': 'display:none' });
			document.body.appendChild(arrow);
		}
		var x =this.element.childElements()
        var thelength = x.length
		for (var i=0; i< thelength ;i++)
		{
			
			x[i].id = this.element.id + i
			new mcMenuItem(x[i],'v');
		}
		Event.observe (this.element,'mousemove', this.onMouseMove.bindAsEventListener(this));
		Event.observe (this.element,'mouseenter', this.onMouseOver.bindAsEventListener(this));
		Event.observe (this.element,'mouseleave', this.onMouseOut.bindAsEventListener(this));
	},
	onMouseMove: function(e)
	{
		
		os = this.element.cumulativeOffset();
		leftSpot = (e.pointerX())-8;
		topSpot = os[1] -16;
		$('followme').setStyle({
							   left: leftSpot+'px',
							   top: topSpot+'px',
							   backgroundPosition: '16px 0px'
								});
	},
	onMouseOver: function(e)
	{
		os = this.element.cumulativeOffset();
		leftSpot = (e.pointerX())-8;
		topSpot = os[1] -16
		$('followme').setStyle({
							   	left: leftSpot+'px',
								top: topSpot+'px',
								display: 'block',
							   backgroundPosition: '16px 0px'
							   });
	},
	onMouseOut: function()
	{
		$('followme').setStyle({
							   	display:'none'
							   });
	}
};