var saveCheck = 0;

var mootabs = new Class({
	initialize: function(element, options) {
		this.options = Object.extend({
			activeNode:	 ((options.activeNode)?options.activeNode:0),
			width:		 ((options.width)?options.width:'100%'),
			height:		 ((options.height)?options.height:'550'),
			changeTransition:((options.changeTransition)?options.changeTransition:'none'), 
			mouseOverClass:	 ((options.mousleOverClass)?options.mouseOverClass:'active')
			
		}, options || {});
		
		//Fx.Transitions.Quad.easeInOut
		this.el = $(element);
		this.elid = element;
		this.el.setStyles({
			height: this.options.height,
			width: this.options.width
		});
		
		this.titles = $$('#' + this.elid + ' ul li');
		this.titles[this.options.activeNode].addClass('active');
		this.titles[this.options.activeNode].addClass('blue');
		this.titles[this.options.activeNode].getFirst().addClass('blue');
		
		this.activeTitle = this.titles[this.options.activeNode];
		
		this.panelHeight = this.options.height - (this.titles[0].getStyle('height').toInt() + 4);
		
		this.panels = $$('#' + this.elid + ' .mootabs_panel');
	  if(this.panelHeight<0) {
			this.panelHeight = 550;
	  }
		this.panels.setStyle('height', this.panelHeight);
		this.panels[this.options.activeNode].addClass('active');
		this.panels[this.options.activeNode].addClass('blue');
		
		
		this.titles.each(function(item) {
			item.addEvent('click', function(){
//alert('here: '+item.get('tag')+', '+item.getProperty('title')+', '+item.hasClass('mooitems_panel'));
					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(saveCheck!=0 && !confirm('You\'ve made changes to the form without Updating, is this OK?')) return(false);
		
		saveCheck = 0;
		
		if($type(tab) == 'string') 
		{
			//myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
		//	myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
       //myTab = $(tab);
			$$('.movit').forEach(function(item,index) {
				if (item.get('title')==tab) tab = item;
			});
//			tab = myTab;
		}
		
		if($type(tab) == 'element'&&tab.getProperty('title'))
		{
//alert(tab.get('tag')+', '+tab.getProperty('title')+', '+tab.hasClass('mootabs_panel'));
			var newTab = tab.getProperty('title');
		
			this.panels.removeClass('active');
			this.panels.removeClass('blue');
			//this.panels.filterById(newTab).addClass('active');
			//alert('title: '+tab.title);
			
			$(newTab).addClass('active');
			$(newTab).addClass('blue');
			if(this.options.changeTransition != 'none')
			{
				//this.panels.filterById(newTab).setStyle('height', 0);
				$(newTab).setStyle('opacity', 0);
				//var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: 1000, transition: this.options.changeTransition});
				var changeEffect = new Fx.Elements($(newTab),{duration: 5000});
				changeEffect.start({
					'0': {
						'opacity': [0, 100]
					}
				});
			}
			
			this.titles.removeClass('active');
			this.titles.removeClass('blue');
if (this.titles.hasChild()) this.titles.getChildren().forEach(function(item){item.removeClass('blue');});
			//if (this.titles.getFirst()) this.titles.getFirst().removeClass('blue');
			
			tab.getFirst().addClass('blue');
			tab.addClass('blue');
			tab.addClass('active');
			
			this.activeTitle = tab;
		}
	},
	
	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'
		});
		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();
		$$('#' + this.elid + ' .mootabs_panel').filter(function(item,index) { item[0].remove(); });
	}
	
});