var mootabs = new Class({
	
	initialize: function(element, options) {
		this.options = Object.extend(options || {});
		this.el = $(element);
		this.elid = element;

//		this.el.setStyles({
//			height: this.options.height + 'px',
//			width: this.options.width + 'px'
//		});

		//initialized the titles
                this.titles = $$('#' + this.elid + ' ul li');
                $key = 0;
                this.titles.each(function(item, index){if (item.title == $active){item.addClass('active'); this.activeTitle = item; $final = $key;} $key++;});
                this.activeTitle = this.titles[$final];

                // initilize the panels
                this.panels = $$('#' + this.elid + ' .mootabs_panel');
                this.panels.each(function(item, index){if (item.id == $active){item.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));
		
		$("swap").src = "images/" + this.options.case_name + "/" + $active + "_01.jpg";

	},
	
	activate: function(tab){
                //alert($('swap').src);

                $info = $type(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');
                        $newImage = "images/" + this.options.case_name + "/" + newTab + "_01.jpg";
                        $('swap').src = $newImage;
			this.panels.removeClass('active');
                        this.panels.each(function(item, index){if (item.id == newTab)  {item.addClass('active');}})
			this.titles.removeClass('active');
			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();
	}
	
	
});