function customFade(id) {
    exampleFx = new Fx.Style(id, 'opacity', {
    duration: 1000,
    transition: Fx.Transitions.quartInOut
    });

    exampleFx.start(0,1); /*fade it in*/
}

var mootabs = new Class({

	initialize: function(element, options) {
		
		//var hoogte = $('media_main_container').getSize().scrollSize.y;
		
		this.options = Object.extend({
			width:100,
			//height: hoogte,
			changeTransition: Fx.Transitions.Quad.easeIn,
			mouseOverClass:	'active'
		}, options || {});
		
		this.el = $(element);
		this.elid = element;
	
		if($('media_element')){
			
			var media_element_width = $('media_element').getSize().scrollSize.x;
		
			if(media_element_width < 300){
				media_element_width = 300;
			}		
			this.el.setStyles({
			width: media_element_width + 'px',
			margin: "0 auto"
			});
		}
		else{
			this.el.setStyles({
			//height: this.options.height,
			width: this.options.width + '%'
			});
		}
		
		this.titles = $$('#' + this.elid + ' ul li');
		this.titles[0].addClass('active');
		this.activeTitle = this.titles[0];
		
		//this.panelHeight = this.options.height - (this.titles[0].getStyle('height').toInt() + 4);
		
		this.panels = $$('#' + this.elid + ' .mootabs_panel');
		//this.panels.setStyle('height', this.panelHeight);
		
		if(this.panels[2]){
			this.panels[2].addClass('active');
		}
		else{
			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')
		{
			//create new tab
			var newTab = tab.getProperty('title');
			this.panels.removeClass('active');
			this.panels.filterById(newTab).addClass('active');
			
			//get height of the new tab			
			var hoogte2 = $(newTab).getSize().scrollSize.y;
			//alert(hoogte2);
			
			if(this.options.changeTransition != 'none')
			{
				//call custom function CustomFade
				customFade(newTab);
				
				//define starting height
				this.panels.filterById(newTab).setStyle('height', 0);
				var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: 500, transition: this.options.changeTransition});
				
				changeEffect.start({
					'0': {
						'height': [0, hoogte2]
					}

				});
				
				

			}
			
			this.titles.removeClass('active');
			
			tab.addClass('active');
			
			this.activeTitle = tab;
		}
	}

});