var mootabs = new Class({
	initialize: function(element, options) {
      this.options = Object.extend({
	width:				300,
	    height:				200,
	    changeTransition:	Fx.Transitions.Quart.easeIn,
	    mouseOverClass:	'over'
	    }, options || {});
      
      this.el = $(element);
      this.elid = element;	
      this.titles = $$('#' + this.elid + ' ul li');
      this.titles[0].addClass('active');
      this.activeTitle = this.titles[0];
      this.panels = $$('#' + this.elid + ' .mootabs_panel');
      this.panels[0].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');
			this.titles.removeClass('active');
			tab.addClass('active');
			this.activeTitle = tab;
		}
    }

});