/**
 * MPI Tabs Plugin 
 * 
 * @author dan.rades
 * @lastmod 26.02.2008
 * 
 * Utilizare: este nevoie de un container pe care se aplica pluginul $('.tabContainer').mpiTabs();
 * Headerele taburilor se pun intr-un ul -> li
 * Contentul se pune intr-un div cu clasa "tabContent" 
 * Tabul selectat  si containerul acestuia trebuie sa aiba clasa "selected"
 * 
 * Structura HTML e cea de mai jos
 * 
 * <div class="tabContainer">
 * 
 * <ul>
 * 	<li>Tab 1</li>
 *  <li class="selected">Tab 2</li>
 * <ul>
 * 
 * <div class="tabContent">Tab 1 content</div> 
 * <div class="tabContent selected">Tab 2 content</div>
 *
 * </div>
 * 
 */

(function($) {                                         
$.fn.mpiTabs = function(o) {   
    o = $.extend({		
		tabContentClassName : 'tabContent',		
        selectedClassName : 'selected',
		
		onChange : function() {}
    }, o || {})
	return this.each(function() {
		var _self = $(this);
		var header = $('ul', _self)[0];				
		var tabs = $('.'+ o.tabContentClassName, _self);
		
		$('li', header).each(function(i) {
			$(this).click(function(event) {
				event.preventDefault();
				$('li', header).removeClass('selected');
				$('.' + o.tabContentClassName, _self).css('display','none');
				$(this).addClass('selected');
				$(tabs[i]).css('display','block');
				o.onChange(i, tabs[i]);
			});
		});																				
	});
};

})(jQuery);