/*
/|
*/
var mootabs = new Class({
	Implements: Options,
	
	options: {
		width:				'300px',
		height:				false,
		changeTransition:	Fx.Transitions.Bounce.easeOut,
		duration:			1000,
		mouseOverClass:		'active',
		activateOnLoad:		'first',
		useAjax: 			false,
		ajaxUrl: 			'',
		ajaxOptions: 		{method:'get'},
		ajaxLoadingText: 	'Loading...'
	},
	
	initialize: function(element, options) {
		this.setOptions(options);
		this.el = $(element);
		this.elid = element;
		
		this.titles = $$('#' + this.elid + ' ul.mootabs_title li');
		this.panels = $$('#' + this.elid + ' .mootabs_panel');
		this.heights = [];
		
		if(this.options.height == 'dynamic'){
			this.setDynamicHeights();
		}
		
		this.titles.each(function(item, i) {
			item.addEvent('click', function(){
				this.activate(item);
			}.bind(this));
			
			item.addEvent('mouseenter', function(){
				item.addClass(this.options.mouseOverClass);
			}.bind(this));
			
			item.addEvent('mouseleave', function(){
				item.removeClass(this.options.mouseOverClass);
			}.bind(this));
			
		}.bind(this));
	},
	
	activateOnLoad: function(){
		if(this.options.activateOnLoad == 'first'){
			this.activate(this.titles[0]);
		}else if($type(this.options.activateOnLoad)=='element'){
			this.activate(this.options.activateOnLoad);
		}else if($type(this.options.activateOnLoad)=='string'){
			this.activate($$('#' + this.options.activateOnLoad + ' ul.mootabs_title li')[0]);
		}
	},
	
	setDynamicHeights: function(){
		this.panels.setStyle('width', this.options.width);
		this.panels.each(function(elem, i){
			var size = elem.getCoordinates();
			this.heights[i] = size.height;
		}.bind(this));
		this.panels.fade('hide').addClass('hide');
		this.activateOnLoad();
	},
	
	activate: function(tab){
		var index = this.titles.indexOf(tab);
		var newPanel = this.panels[index];
		
		this.titles.removeClass('activated');
		
		if($defined(this.activeTab)){
			var currentPanel = this.panels[ this.titles.indexOf(this.activeTab) ];
			currentPanel.fade('out');
			currentPanel.addClass('hide').removeClass('active');
		}
		this.activeTab = tab.addClass('activated');
		newPanel.removeClass('hide').addClass('active');
		newPanel.fade('in');
	}
});