/* Tabs Class */

var Tabs = new Class({
	
    initialize: function(els, inject){
    	
	    if($defined($(inject))) {

		    this.els = els;
		    this.tabs = new Element('div', {'class': 'tabs-wrap'}).inject(inject);

			
			this.tabsTriggers = new Element('ul', {'class': 'tabs-triggers'}).inject(this.tabs);
			this.tabsPanels = new Element('div', {'class': 'tabs-panels'}).inject(this.tabs);
			this.tabsPanelsWrap = new Element('div', {'class': 'tabs-panels-wrap'}).inject(this.tabsPanels);
			this.tabsCookie = new Hash.Cookie('pgTabsCookie', {path: "/", duration: 3600});
	
			var tabsTriggers = this.tabsTriggers;
			var tabsPanels = this.tabsPanels;
			
			var mthis = this;
			
			$each(els, function(value, key){
				var trigger = new Element('li', {
	
				}).inject(tabsTriggers);
				
				var triggerLink = new Element('a', {
					'text':value[0],
					'href':'#',
					'id':'tab-trigger-'+value[1]
				}).inject(trigger);
	
				triggerLink.addEvent('click', function() {
					
					mthis.tabsCookie.set('selectedTab', value[1]);
					//console.log(value[1]);
					if(!this.hasClass('tab-selected')) {
						mthis.toFront(value[1]);
					}
					
					return false;
				});
				
				$(value[1]).inject(tabsPanels);
			});
			
			
			if($defined(this.tabsCookie.get('selectedTab'))) {
				this.toFront(this.tabsCookie.get('selectedTab'));
			} else {
				this.toFront(els[0][1]);			
			}
			
		
	    }
    },
    
    
    /* mise en avant d'un panneau */
    
    toFront: function(tabId) {

		var mthis = this;

		$each(mthis.els, function(value, key) {
    		if(value[1] == tabId) {
    			tab = value;
    		}
    	});
    	
    	this.hideTabs();
    	$('tab-trigger-'+tab[1]).addClass('tab-selected');

		var myFx = new Fx.Tween(this.tabsPanels, {
			link:'chain', duration:180, onComplete: function() {
				mthis.hidePanels();
				$('tab-trigger-'+tab[1]).addClass('tab-selected');
				$(tab[1]).setStyle('display', 'block');
			}
		});
			
		myFx.start('opacity', 0);
		myFx.start('opacity', 1);
   	
    },
    
    hidePanels: function() {
    	$each(this.els, function(value, key) {
    		var panelId = value[1];
    		$(panelId).setStyle('display', 'none');
    		$('tab-trigger-'+panelId).removeClass('tab-selected');
    	});
    },
    
    hideTabs: function() {
    	$each(this.els, function(value, key) {
    		var panelId = value[1];
    		$('tab-trigger-'+panelId).removeClass('tab-selected');
    	});
    }
    
});

/* Ends Tabs Class */