var mootabs = new Class({
	Implements: [Options, Events],
	options : {
	    width:				300,
	    opacity:				1,
	    ongletActif:                       0,
            changeTransition:	Fx.Transitions.Cubic.easeIn,
	    mouseOverClass:	'active'
	},
	
	initialize: function(element, options) {
                
                this.setOptions(options);
		this.el = $(element);
		this.elid = element;
		
//		this.el.setStyles({
//			height: this.options.height + 'px',
//			width: this.options.width + 'px'
//		});
		
		this.titles = $$('#' + this.elid + ' ul  li.onglet');
		this.titles[this.options.ongletActif].addClass('active');

		this.activeTitle = this.titles[this.options.ongletActif];
		this.panelOpacity = this.options.opacity;
		
		this.panels = $$('#' + this.elid + ' .mootabs_panel');
//		this.panels.setStyle('opacity', this.panelOpacity);
		this.panels[this.options.ongletActif].addClass('active');
		this.titles.each(function(item) {
			item.addEvent('click', function(){
					item.removeClass(this.options.mouseOverClass);
					this.activate(item);
				}.bind(this)
			);
			
			item.addEvent('mouseover', function() {
				if(item != this.activeTitle)
				{
					item.addClass(this.options.mouseOverClass);
				}
			}.bind(this));
			
			item.addEvent('mouseout', function() {
				if(item != this.activeTitle)
				{
					item.removeClass(this.options.mouseOverClass);
				}
			}.bind(this));
		}.bind(this));
		
	},
        
	activate: function(tab){
	        if($type(tab) == 'string')
                    {
                    myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
                    tab = myTab;
                    }
		if($type(tab) == 'element')
		{

			var newTab = tab.getProperty('title');

			this.panels.removeClass('active');
			this.panels.filterById(newTab).addClass('active');
			if(this.options.changeTransition != 'none')
			{
//				this.panels.filterById(newTab).setStyle('opacity', '0');
//				var changeEffect = new Fx.Morph(this.panels.filterById(newTab), {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
				var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: 200, transition: this.options.changeTransition});
				changeEffect.start({
					'0': {
						'opacity': [0.2, this.panelOpacity]
					}
				});
			}
			this.titles.removeClass('active');
			tab.addClass('active');
			this.activeTitle = tab;
		}
	}
	
	
	
})