var Menu = Class.create();
Menu.prototype = {
	
	root: null,
	sections: [],
	defaultSections: [],
	depth: null,
	mousemoveHandler:null,
	expandHandler:null,
	
	initialize: function(el) {
		this.root = el;
		this.mousemoveHandler = this.restore.bindAsEventListener(this);
		this.expandHandler = this.expand.bindAsEventListener(this);
		this.getMenusItems(this.root.down('ul'));
		for(var i=0;i<this.defaultSections.length;i++) {
			this.select(this.defaultSections[i]);
		}
	},

	getMenusItems: function(ul, parent, level) {
		var level = (level==undefined) ? 1 : level;
		var parent = (parent==undefined) ? 0 : parent;
		this.depth = Math.max(this.depth, level);
		var j=0;
		while(ul.childNodes[j]) {
			if(ul.childNodes[j].tagName && ul.childNodes[j].tagName.toLowerCase() == 'li') {
				var li = ul.childNodes[j];
				Element.extend(li);
				li.id = "level"+level+"_"+parent+"_"+j;
				if(li.hasClassName("selected")) this.defaultSections.push(li);
				var subsections = li.down('ul');
				if(subsections) {
					this.activate(li);
					subsections.id = li.id+"_sections";
					var upsections = $$("#"+this.root.id+' ul.level'+(level-1));
					Element.insert(upsections ? upsections[upsections.length-1] : this.root.down('ul') , {after:subsections});
					Element.toggle(subsections, li.hasClassName("selected"));
					this.getMenusItems(subsections, j, level+1);
				}
			}
			j++;
		}
	},
	
	activate: function(el) {
		//Event.observe(el, "mouseover", this.expandHandler);
	},
	
	inherit: function(el) {
		Event.stopObserving(el, "mouseover", this.expandHandler);
	},

	select: function(el) {
		var level = parseInt(el.id.substr(5,el.id.length));
		for(var i=level;i<this.depth;i++) {
			$$('li[id^="level'+i+'"].selected').each(function(el, index) {
				this.collapse(el);
			}.bind(this));
		}
		el.addClassName("selected");
		var ul = $(el.id+"_sections");
		if(ul) Element.show(ul);
		this.inherit(el);
	},

	expand: function(ev) {
		var el = (Event.element(ev).tagName.toLowerCase()=="li") ? Event.element(ev) : Event.element(ev).up('li');
		this.select(el);
		Event.observe(document, "mousemove", this.mousemoveHandler);
	},

	collapse: function(el) {
		el.removeClassName("selected");
		var ul = $(el.id+"_sections");
		if(ul) Element.hide(ul);
		this.activate(el);
	},
	
	restore: function(ev) {
		var left = Element.cumulativeOffset($('navigation')).left;
		var top = Element.cumulativeOffset($('navigation')).top;
		var width = Element.getDimensions($('navigation')).width;
		var height = Element.getDimensions($('navigation')).height;
		var mouseX = Event.pointerX(ev);
		var mouseY = Event.pointerY(ev);
		if(mouseX<left-20 || mouseX>left+width+20 || mouseY<top-20 || mouseY>top+height+20) {
			Event.stopObserving(document, "mousemove", this.mousemoveHandler);
			for(var i=0;i<this.defaultSections.length;i++) {
				this.select(this.defaultSections[i]);
			}
		}
	}

}

function initMenu() {
	myMenu = new Menu($('navigation'));
}
Event.observe(document, 'dom:loaded', initMenu, false);