/**
 * Tabs.js
 * 
 * Système de tabulation, basé sur mootools.
 * 
 * Auteur : David Coudrier
 */

var Tabs = new Class ({
	
	Implements: [Options, Events],
	
	options: {
		//onShow: $empty(tab, element),
		//onHide: $empty(tab, element),
		//onShowComplete: $empty(tab, element),
		//onHideComplete: $empty(tab, element),
		frame: null,
		index: 0
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.tabs = new Array();
	},
	
	addTab: function(tab, element) {
		return this._addTab({
			tab: tab,
			element: element
		});
	},
	
	showTab: function(index) {
		if (index != this.options.index) {
			this._hideTab(this.options.index);
			
			this._showTab(index);
		}
	},
	
	reload: function() {
		var index = this.options.index;
		this.options.index = -1;
		this.showTab(index);
	},
	
	getFrame: function() {
		return this.options.frame;
	},
	
	_addTab: function(obj) {
		var newIndex = this.tabs.push(obj) - 1;
		if (obj.element) {
			obj.element.dispose();
		}
		obj.tab.addEvent('click', function(event, index) {
			this.showTab(index);
			event.stop();
		}.bindWithEvent(this, newIndex));
				
		if (newIndex == this.options.index) {
			this._showTab(newIndex);
		}
		else {
			this._hideTab(newIndex);
		}
		return newIndex;
	},
	
	_showTab: function(index) {
		var t = this.tabs[index];
		this.fireEvent('show', [t.tab, t.element]);
		t.element.inject(this.options.frame);
		this.fireEvent('showComplete', [t.tab, t.element]);
		
		this.options.index = index;
	},
	
	_hideTab: function(index) {
		if ($defined(this.tabs[index])) {
			var t = this.tabs[index];
			this.fireEvent('hide', [t.tab, t.element]);
			t.element.dispose();
			this.fireEvent('hideComplete', [t.tab, t.element]);
		}
	}
});



Tabs.AJAX = new Class ({
	
	Extends: Tabs,
	
	options: {
		//onShow: $empty(tab),
		//onHide: $empty(tab),
		//onShowComplete: $empty(tab),
		//onHideComplete: $empty(tab),
		loadingIcon: null,
		request: {
			method: 'get',
			link: 'cancel',
			update: false,
			url: null
		},
		tabDefault: {
			loadingIcon: null,
			data: {},
			url: '',
			method: 'get'
		}
	},
	
	initialize: function(options) {
		this.parent(options);
		this.options.request.update = this.options.frame;
		this.currentLoadingIcons = new Array();
		if ($defined(this.options.request.url)) {
			this.options.tabDefault.url = this.options.request.url;
		}
		this.request = new Request.HTML($extend(this.options.request, {
			onRequest: this._showLoadingIcon.bind(this),
			onComplete: this._hideLoadingIcon.bind(this),
			onSuccess: function() {
				this._fireCompleteEvents();
				//var forms = new Forms.AJAX(this.options.frame);
			}.bind(this)
		}));
	},

	addTab: function(tab, options) {
		options.tab = tab;
		return this._addTab($merge(this.options.tabDefault, options));
	},
	
	_fireCompleteEvents: function() {
		if ($defined(this.tabs[this.previous])) {
			var t = this.tabs[this.previous];
			this.fireEvent('hideComplete', [t.tab, t.element]);
		}
		t = this.tabs[this.options.index];
		this.fireEvent('showComplete', [t.tab, t.element]);
	},
	
	_showTab: function(index) {
		var t = this.tabs[index];
		this.fireEvent('show', t.tab);
		this.previous = this.options.index;
		this.options.index = index;
		this.currentLoadingIcon = new Array(this.options.loadingIcon, t.loadingIcon).clean();		
		this.request.send({
			url: t.url,
			data: t.data
		});
	},
	
	_hideTab: function(index) {
		if ($defined(this.tabs[index])) {
			var t = this.tabs[index];
			this.fireEvent('hide', t.tab);
		}
	},
	
	_showLoadingIcon: function() {
		this.currentLoadingIcon.each(function(element) {
			element.setStyle('display', 'block');
		});
	},
	
	_hideLoadingIcon: function() {
		this.currentLoadingIcon.each(function(element) {
			element.setStyle('display', 'none');
		});
	}
});