var Onglets = Class.create();
Onglets.prototype = {

	root:null,
	
	initialize: function(el) {
		this.root = el;
		this.expandHandler = this.expand.bindAsEventListener(this);
		this.collapseHandler = this.collapse.bindAsEventListener(this);
		for(var j=0;j<this.root.childNodes.length;j++) {
			if(this.root.childNodes[j].tagName && this.root.childNodes[j].tagName.toLowerCase() == 'li') {
				Event.observe(this.root.childNodes[j], "mouseover", this.expandHandler);
			}
		}
	},

	expand: function(ev) {
		var el = (Event.element(ev).tagName.toLowerCase()=="li") ? Event.element(ev) : Event.element(ev).up('li');
		Element.addClassName(el, "sfhover");
		Event.stopObserving(el, "mouseover", this.expandHandler);
		Event.observe(el, "mouseout", this.collapseHandler);
	},

	collapse: function(ev) {
		var el = (Event.element(ev).tagName.toLowerCase()=="li") ? Event.element(ev) : Event.element(ev).up('li');
		Element.removeClassName(el, "sfhover");
		Event.stopObserving(el, "mouseout", this.collapseHandler);
		Event.observe(el, "mouseover", this.expandHandler);
	}
	
}

function initOnglets() {
	$$('ul.onglets').each(function (field, index) {var myOnglets = new Onglets(field);}.bind(this));
}

Event.observe(document, 'dom:loaded', initOnglets, false);