Ext.ns('Ext.uxp','Ext.uxp.widgets');

Ext.uxp.widgets.Autotabs = Ext.extend(Object, {
	
	displayItems : 3,
	itemSelector : 'div',
	classContainer : 'ox-tabs',
	classTabSelected : 'ox-tabs-selected',
    hideMode : 'display',
	
	
	constructor : function (config) {
		
		config = config || {};
        Ext.apply(this, config);
		

		
		var dh = Ext.DomHelper;
		
		// recherche les containers qui possedent la classe this.classContainer
		var containers = Ext.query('.' + this.classContainer)		
		
		for (var i =0, li = containers.length; i < li; i++) {
			
			var tabs = containers[i];
			
			// définit un id sur le container si il n'existe pas
			if (tabs.id == '') {
				tabs.id = 'ox-tabs-' + i
			}
			
			var tabs_def = [];
			
			// recherche les panels
			var tab_panels = Ext.query('.ox-tab-panel', tabs);
			
			for (var k=0, lk = tab_panels.length; k < lk; k++) {
				var tab = Ext.get(tab_panels[k]);
				
				
				
				// stock les attributs de chaque panel dans un objet
				tabs_def.push({					
					id : tabs.id + '_' + tabs_def.length,
					title : tab.query('.ox-tab-title')[0].innerHTML,
					content : tab.query('.ox-tab-content')[0].innerHTML,
					cls : tab.dom.className //tab.getAttribute('class')
				})
			}
			
			
			if (tabs_def.length > 0) {
				var nav = [];
				
				
				// Amorce de la définition de la structure html a créer
				html = [
					{
						tag: 'div',
						cls: 'ox-tabs-nav',
						children: [{
							tag: 'ul',
							children: nav
						}]
					} ]
				
				// ajoute les elements de navigation et les panels 
				for (var k = 0, lk = tabs_def.length; k < lk; k++) {
					var def = tabs_def[k];					
					nav.push({tag:'li', cls: (k == 0 ? this.classTabSelected : ''),  html : '<a href="#tab_' + def.id + '"><span>'+def.title+'</span></a>'});					
					html.push({tag : 'div', cls : def.cls, id : 'tab_' + def.id, html : def.content});
				}
				
				// remplace le contenu existant 			
				dh.overwrite(tabs,html);
				
				// Initialise la visibilité de chaque panel
				var j = 0;
				// display : None sur tous
				Ext.each(Ext.query('div.ox-tab-panel', tabs), 
					function (node) {
						var el = Ext.get(node);
						el.setVisibilityMode(Ext.Element.DISPLAY);
						if ( j != 0) el.hide();
						j++;
					}
				);
				
				// ajoute une classe indiquant que le widget autotab est construit
				Ext.fly(tabs).addClass('ox-tabs-done');
				
				// ajoute les evenements
				Ext.get(Ext.query('.ox-tabs-nav ul', tabs)).on(
					'click',
					function (e, t) {
						var id = t.href.split('#')[1]
						
						var tabs = Ext.get(t).parent('.ox-tabs');						
						var old_li_selected  = tabs.query('li.' + this.classTabSelected)
						
						
						if (old_li_selected.length == 1) {
							var old_li_selected  = tabs.query('.ox-tabs-nav li.'+this.classTabSelected)[0]
							var old_id_selected = Ext.query('a' ,old_li_selected)[0].href.split('#')[1];
							Ext.fly(old_li_selected).removeClass(this.classTabSelected);
							Ext.fly(old_id_selected).hide();
						}
						
						Ext.fly(t).parent('li').addClass(this.classTabSelected)
						Ext.fly(id).show();
						
						e.preventDefault();

					},
					this,
					{ delegate : 'a' }
				);
			}
		}
	}
	
	
});