1 var mootabs = new Class({

     2 	

     3 	initialize: function(element, options) {

     4 		this.options = Object.extend({

     5 			width:				'300px',

     6 			height:				'200px',

     7 			changeTransition:	Fx.Transitions.Bounce.easeOut,

     8 			duration:			1000,

     9 			mouseOverClass:		'active',

    10 			activateOnLoad:		'first',

    11 			useAjax: 			false,

    12 			ajaxUrl: 			'',

    13 			ajaxOptions: 		{method:'get'},

    14 			ajaxLoadingText: 	'Loading...'

    15 		}, options || {});

    16 		

    17 		this.el = $(element);

    18 		this.elid = element;

    19 		

    20 		this.el.setStyles({

    21 			height: this.options.height,

    22 			width: this.options.width

    23 		});

    24 		

    25 		this.titles = $$('#' + this.elid + ' ul.mootabs_title li');

    26 		this.panelHeight = this.el.getSize().size.y - (this.titles[0].getSize().size.y + 4);

    27 		this.panels = $$('#' + this.elid + ' .mootabs_panel');

    28 

    29 		

    30 		this.panels.setStyle('height', this.panelHeight);

    31 		

    32 		this.titles.each(function(item) {

    33 			item.addEvent('click', function(){

    34 					item.removeClass(this.options.mouseOverClass);

    35 					this.activate(item);

    36 				}.bind(this)

    37 			);

    38 			

    39 			item.addEvent('mouseover', function() {

    40 				if(item != this.activeTitle)

    41 				{

    42 					item.addClass(this.options.mouseOverClass);

    43 				}

    44 			}.bind(this));

    45 			

    46 			item.addEvent('mouseout', function() {

    47 				if(item != this.activeTitle)

    48 				{

    49 					item.removeClass(this.options.mouseOverClass);

    50 				}

    51 			}.bind(this));

    52 		}.bind(this));

    53 		

    54 		

    55 		if(this.options.activateOnLoad != 'none')

    56 		{

    57 			if(this.options.activateOnLoad == 'first')

    58 			{

    59 				this.activate(this.titles[0], true);

    60 			}

    61 			else

    62 			{

    63 				this.activate(this.options.activateOnLoad, true);	

    64 			}

    65 		}

    66 	},

    67 	

    68 	activate: function(tab, skipAnim){

    69 		if(! $defined(skipAnim))

    70 		{

    71 			skipAnim = false;

    72 		}

    73 		if($type(tab) == 'string') 

    74 		{

    75 			myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];

    76 			tab = myTab;

    77 		}

    78 		

    79 		if($type(tab) == 'element')

    80 		{

    81 			var newTab = tab.getProperty('title');

    82 			this.panels.removeClass('active');

    83 			

    84 			this.activePanel = this.panels.filterById(newTab)[0];

    85 			

    86 			this.activePanel.addClass('active');

    87 			

    88 			if(this.options.changeTransition != 'none' && skipAnim==false)

    89 			{

    90 				this.panels.filterById(newTab).setStyle('height', 0);

    91 				var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: this.options.duration, transition: this.options.changeTransition});

    92 				changeEffect.start({

    93 					'0': {

    94 						'height': [0, this.panelHeight]

    95 					}

    96 				});

    97 			}

    98 			

    99 			this.titles.removeClass('active');

   100 			

   101 			tab.addClass('active');

   102 			

   103 			this.activeTitle = tab;

   104 			

   105 			if(this.options.useAjax)

   106 			{

   107 				this._getContent();

   108 			}

   109 		}

   110 	},

   111 	

   112 	_getContent: function(){

   113 		this.activePanel.setHTML(this.options.ajaxLoadingText);

   114 		var newOptions = {update: this.activePanel.getProperty('id')};

   115 		this.options.ajaxOptions = Object.extend(this.options.ajaxOptions, newOptions || {});

   116 		var tabRequest = new Ajax(this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'), this.options.ajaxOptions);

   117 		tabRequest.request();

   118 	},

   119 	

   120 	addTab: function(title, label, content){

   121 		//the new title

   122 		var newTitle = new Element('li', {

   123 			'title': title

   124 		});

   125 		newTitle.appendText(label);

   126 		this.titles.include(newTitle);

   127 		$$('#' + this.elid + ' ul').adopt(newTitle);

   128 		newTitle.addEvent('click', function() {

   129 			this.activate(newTitle);

   130 		}.bind(this));

   131 		

   132 		newTitle.addEvent('mouseover', function() {

   133 			if(newTitle != this.activeTitle)

   134 			{

   135 				newTitle.addClass(this.options.mouseOverClass);

   136 			}

   137 		}.bind(this));

   138 		newTitle.addEvent('mouseout', function() {

   139 			if(newTitle != this.activeTitle)

   140 			{

   141 				newTitle.removeClass(this.options.mouseOverClass);

   142 			}

   143 		}.bind(this));

   144 		//the new panel

   145 		var newPanel = new Element('div', {

   146 			'style': {'height': this.options.panelHeight},

   147 			'id': title,

   148 			'class': 'mootabs_panel'

   149 		});

   150 		if(!this.options.useAjax)

   151 		{

   152 			newPanel.setHTML(content);

   153 		}

   154 		this.panels.include(newPanel);

   155 		this.el.adopt(newPanel);

   156 	},

   157 	

   158 	removeTab: function(title){

   159 		if(this.activeTitle.title == title)

   160 		{

   161 			this.activate(this.titles[0]);

   162 		}

   163 		$$('#' + this.elid + ' ul li').filterByAttribute('title', '=', title)[0].remove();

   164 		

   165 		$$('#' + this.elid + ' .mootabs_panel').filterById(title)[0].remove();

   166 	},

   167 	

   168 	next: function(){

   169 		var nextTab = this.activeTitle.getNext();

   170 		if(!nextTab) {

   171 			nextTab = this.titles[0];

   172 		}

   173 		this.activate(nextTab);

   174 	},

   175 	

   176 	previous: function(){

   177 		var previousTab = this.activeTitle.getPrevious();

   178 		if(!previousTab) {

   179 			previousTab = this.titles[this.titles.length - 1];

   180 		}

   181 		this.activate(previousTab);

   182 	}

   183 });