var mootabs = new Class({
    Implements: [Options, Events],

    options: {
		width:				'300px',
		height:				'200px',
		changeTransition:	Fx.Transitions.Bounce.easeOut,
		duration:			1000,
		mouseOverClass:		'active',
		activateOnLoad:		null,
		useAjax: 			false,
		ajaxUrl: 			'',
		ajaxOptions: 		{method: 'get'},
		ajaxLoadingText: 	'Loading...'
    },	
	
	initialize: function(element, options) {
    	this.setOptions(options);
		
		this.el   = $(element);
		this.elid = element;
		/*
		this.el.setStyles({
			height: this.options.height,
			width: this.options.width
		});*/
		
		this.titles = $$('#' + this.elid + ' ul.mootabs_title li');
		this.panels = $$('#' + this.elid + ' .mootabs_panel');

		this.panelHeight = this.el.getSize().y - (this.titles[0].getSize().y + 4);		
		//this.panels.setStyle('height', this.panelHeight);
		
		this.titles.each(function(item) {
			item.addEvent('click', function() {
					item.removeClass(this.options.mouseOverClass);
					this.activate(item.getAllPrevious().length);
				}.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));

		var activateTab = Cookie.read(this.elid);

		if (this.options.activateOnLoad != null) {
			activateTab = this.options.activateOnLoad;
		}

		this.activate(((null == activateTab) ? 0 : activateTab), true);
	},

	activate: function(tab, skipAnim) {
		Cookie.write(this.elid, tab, {'path': '/'});

		if (this.activePanel) {
			this.activePanel.removeClass('active');
		}
		if (this.activeTitle) {
			this.activeTitle.removeClass('active');
		}		

		this.activePanel = this.panels[tab];
		this.activePanel.addClass('active');
		
		this.activeTitle = this.titles[tab];
		this.activeTitle.addClass('active');
		
		if (this.options.changeTransition != 'none' && skipAnim == false) {
			this.panels[tab].setStyle('height', 0);
			var changeEffect = new Fx.Elements(this.panels[tab], {duration: this.options.duration, transition: this.options.changeTransition});
			changeEffect.start({
				'0': {
					'height': [0, this.panelHeight]
				}
			});
		}
	
		/* if (this.options.useAjax)
		{
			this._getContent();
		}	*/	
	},
	
	_getContent: function(){
		this.activePanel.setHTML(this.options.ajaxLoadingText);
		var newOptions = {update: this.activePanel.getProperty('id')};
		this.options.ajaxOptions = Object.extend(this.options.ajaxOptions, newOptions || {});
		var tabRequest = new Ajax(this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'), this.options.ajaxOptions);
		tabRequest.request();
	},
	
	addTab: function(title, label, content){
		//the new title
		var newTitle = new Element('li', {
			'title': title
		});
		newTitle.appendText(label);
		this.titles.include(newTitle);
		$$('#' + this.elid + ' ul').adopt(newTitle);
		newTitle.addEvent('click', function() {
			this.activate(newTitle);
		}.bind(this));
		
		newTitle.addEvent('mouseover', function() {
			if(newTitle != this.activeTitle)
			{
				newTitle.addClass(this.options.mouseOverClass);
			}
		}.bind(this));
		newTitle.addEvent('mouseout', function() {
			if(newTitle != this.activeTitle)
			{
				newTitle.removeClass(this.options.mouseOverClass);
			}
		}.bind(this));
		//the new panel
		var newPanel = new Element('div', {
			'style': {'height': this.options.panelHeight},
			'id': title,
			'class': 'mootabs_panel'
		});
		if(!this.options.useAjax)
		{
			newPanel.setHTML(content);
		}
		this.panels.include(newPanel);
		this.el.adopt(newPanel);
	},
	
	removeTab: function(title){
		if(this.activeTitle.title == title)
		{
			this.activate(this.titles[0]);
		}
		$$('#' + this.elid + ' ul li').filterByAttribute('title', '=', title)[0].remove();
		
		$$('#' + this.elid + ' .mootabs_panel').filterById(title)[0].remove();
	},
	
	next: function(){
		var nextTab = this.activeTitle.getNext();
		if(!nextTab) {
			nextTab = this.titles[0];
		}
		this.activate(nextTab);
	},
	
	previous: function(){
		var previousTab = this.activeTitle.getPrevious();
		if(!previousTab) {
			previousTab = this.titles[this.titles.length - 1];
		}
		this.activate(previousTab);
	}
});