/********************************************************/
/*                                                      */
/*               CLASS TabularBloc                      */
/*------------------------------------------------------*/
/* Constructeur                                         */
/* [object TabularBloc] ColorPicker(id)  */
/*   id : id du contenaire dans le DOM                  */
/*------------------------------------------------------*/
/*   Dépendances:                                       */
/*      -tabular.global.js                              */
/*------------------------------------------------------*/
/*   Par MaX3315                                        */
/*   http://codessources.votre-web.com                  */
/********************************************************/
//CLASS
function TabularBloc(id_div)
{
	this.selectedIndex=-1;
	this.id=id_div;
	this.length=0;
	this.buttons=new Array();
	//bar tabulaire liée
	this.linkedTabulars=new Array();
	//taille des celulles separatrice
	this.interWidth=30;
	this.interHeight=44;
	//images
	this.img_end_on='images/end_on.gif';
	this.img_end_off='images/end_off.gif';
	this.img_begin_on='images/begin_on.gif';
	this.img_begin_off='images/begin_off.gif';
	this.img_middle_on_off='images/middle_on_off.gif';
	this.img_middle_off_off='images/middle_off_off.gif';
	this.img_middle_off_on='images/middle_off_on.gif';
	this.img_button_on='images/button_on.gif';
	this.img_button_off='images/button_off.gif';
	//gestion du texte normal
	this.textColor='#000000';
	//gestion du on mouse over
	this.overTextColor='#FFFFFF';
	//gestion de la selection
	this.selectedTextColor='#FFFFFF';
	
	//class css
	this.buttonClass='tabularButtonTd';
	
	this.init=TABULAR_init;
	this.addButton=TABULAR_addButton;
	this.selectTab=TABULAR_selectTab;
	this.linkWith=TABULAR_linkWith;
	this.generateAction=TABULAR_generateAction;
	
	//Méthode d'ajout/suppression d'onglet une fois le bloc déjà crée.
	// Permet une gestion dynamique des onglets.
	this.deleteButtonAt=TABULAR_deleteButtonAt;
	this.addButtonAt=TABULAR_addButtonAt;
	
	//regitering
	TABULAR_LIST.push(this);
}

//declenche l'action associé au button actuellement sélectionnné
function TABULAR_generateAction()
{  //pour le format voir la fonction this.addbutton
	switch(this.buttons[this.selectedIndex][1])
	{
		case 'function':
			if(this.buttons[this.selectedIndex][3]==null)
			{ this.buttons[this.selectedIndex][2](); }  //sans argument
			else
			{ this.buttons[this.selectedIndex][2](this.buttons[this.selectedIndex][3]);	}  //avec argument
			break
		case 'url':
			window.open(this.buttons[this.selectedIndex][2][0],this.buttons[this.selectedIndex][2][1],this.buttons[this.selectedIndex][2][2]);
			break;
		case 'iframe':
			document.getElementById(this.buttons[this.selectedIndex][2]).src=this.buttons[this.selectedIndex][3];
			break;
		default:
			break
	}
	return;
}

//fonction permettant de lier un autre bloc de tabulation a celui-ci
function TABULAR_linkWith(tabularObj)
{
	for(i=0 ; i<this.linkedTabulars.length ; i++)
	{
		if(this.linkedTabulars[i]==tabularObj) { return; }  //deja lié
	}
	this.linkedTabulars.push(tabularObj);
	tabularObj.linkWith(this);  //liaison retour
	return;
}

//fonction provocant le changement de tabulation
function TABULAR_selectTab(index)
{
	if(index!=null && (index<0 || index>this.buttons.length-1)) { return; } //mauvais index
	else
	{
		this.selectedIndex=index;
		if(index==null)
		{
			for(i=0 ; i<this.buttons.length ; i++)
			{
				document.getElementById(this.id+'_my_button_'+i).style.color=this.textColor;
			}
		}
		else  //declenchement des actions
		{
			this.generateAction();
		}
	
		for(i=0 ; i<this.buttons.length ; i++)
		{
			if(i==0) //premiere cellule
			{
				if(this.selectedIndex==i)
				{
					document.getElementById(this.id+'_begin_to_0').style.backgroundImage='url('+this.img_begin_on+')';
					document.getElementById(this.id+'_my_button_0').style.backgroundImage='url('+this.img_button_on+')';
					document.getElementById(this.id+'_my_button_0').style.color=this.selectedTextColor;
					if(i==this.buttons.length-1)  //si il s'agit de la premier ET de la derniere!
					{
						  document.getElementById(this.id+'_0_to_end').style.backgroundImage='url('+this.img_end_on+')';
					}
				}
				else
				{
					document.getElementById(this.id+'_begin_to_0').style.backgroundImage='url('+this.img_begin_off+')';
					document.getElementById(this.id+'_my_button_0').style.backgroundImage='url('+this.img_button_off+')';
					document.getElementById(this.id+'_my_button_0').style.color=this.textColor;
					if(i==this.buttons.length-1)  //si il s'agit de la premier ET de la derniere!
					{
						  document.getElementById(this.id+'_0_to_end').style.backgroundImage='url('+this.img_end_off+')';
					}
				}
			}
			else
			{
				if(i==this.buttons.length-1)  //derniere cellule
				{
					if(this.selectedIndex==i)
					{
						document.getElementById(this.id+'_'+(i-1)+'_to_'+i).style.backgroundImage='url('+this.img_middle_off_on+')';
						document.getElementById(this.id+'_my_button_'+i).style.backgroundImage='url('+this.img_button_on+')';
						document.getElementById(this.id+'_my_button_'+i).style.color=this.selectedTextColor;
						document.getElementById(this.id+'_'+i+'_to_end').style.backgroundImage='url('+this.img_end_on+')';
					}
					else
					{
						if(this.selectedIndex==i-1)  //si le button precedent est on
						{
							document.getElementById(this.id+'_'+(i-1)+'_to_'+i).style.backgroundImage='url('+this.img_middle_on_off+')';
						}
						else  //sinon off off
						{
							document.getElementById(this.id+'_'+(i-1)+'_to_'+i).style.backgroundImage='url('+this.img_middle_off_off+')';
						}
						document.getElementById(this.id+'_my_button_'+i).style.backgroundImage='url('+this.img_button_off+')';
						document.getElementById(this.id+'_my_button_0').style.color=this.textColor;
						document.getElementById(this.id+'_'+i+'_to_end').style.backgroundImage='url('+this.img_end_off+')';
					}
				}
				else  //cellules centrales
				{
					if(this.selectedIndex==i)
					{
						document.getElementById(this.id+'_'+(i-1)+'_to_'+i).style.backgroundImage='url('+this.img_middle_off_on+')';
						document.getElementById(this.id+'_my_button_'+i).style.backgroundImage='url('+this.img_button_on+')';
						document.getElementById(this.id+'_my_button_'+i).style.color=this.selectedTextColor;
					}
					else
					{
						if(this.selectedIndex==i-1)  //si le button precedent est on
						{
							document.getElementById(this.id+'_'+(i-1)+'_to_'+i).style.backgroundImage='url('+this.img_middle_on_off+')';
						}
						else  //sinon off off
						{
							document.getElementById(this.id+'_'+(i-1)+'_to_'+i).style.backgroundImage='url('+this.img_middle_off_off+')';
						}
						document.getElementById(this.id+'_my_button_'+i).style.backgroundImage='url('+this.img_button_off+')';
						document.getElementById(this.id+'_my_button_0').style.color=this.textColor;
					}
				}
			}
		}
	}
//	if(this.id=='topTabular' || true) { alert('toto '+this.id); }
	return;
}

//fonction initilisant un objet tabular en injectant le code html dans le div container
function TABULAR_init(_index)
{
	var index=null;
	if(typeof(_index)!='undefined') { index=_index; }

	var html='<table height="40" border="0" cellpadding="0" cellspacing="0" id="'+this.id+'_table">';
	html+='  <tr>';
	for(var i=0 ; i<this.buttons.length ; i++)
	{
		if(i==0)  //premiere cellule
		{
		  html+='    <td id="'+this.id+'_begin_to_0" style="width:'+this.interWidth+'px; height:'+this.interHeight+'px;">&nbsp;</td>';
	  	  html+='    <td id="'+this.id+'_my_button_'+i+'" onClick="TABULAR_clickHandler(event);" nowrap style="cursor:pointer;" onMouseOver="TABULAR_overHandler(event);" onMouseOut="TABULAR_outHandler(event);" class="'+this.buttonClass+'">'+this.buttons[i][0]+'</td>';
		  if(i==this.buttons.length-1)  //si il s'agit de la premier ET de la derniere!
		  {
	  		  html+='    <td id="'+this.id+'_'+i+'_to_end" style="width:'+this.interWidth+'px; height:'+this.interHeight+'px;">&nbsp;</td>';
		  }
		}
		else
		{
			if(i==this.buttons.length-1)  //dernière cellule
			{
			  html+='    <td id="'+this.id+'_'+(i-1)+'_to_'+i+'" style="width:'+this.interWidth+'px; height:'+this.interHeight+'px;"></td>';
		  	  html+='    <td id="'+this.id+'_my_button_'+i+'" onClick="TABULAR_clickHandler(event);" nowrap style="cursor:pointer;" onMouseOver="TABULAR_overHandler(event);" onMouseOut="TABULAR_outHandler(event);" class="'+this.buttonClass+'">'+this.buttons[i][0]+'</td>';
	  		  html+='    <td id="'+this.id+'_'+i+'_to_end" style="width:'+this.interWidth+'px; height:'+this.interHeight+'px;"></td>';
			}
			else  //Cellules centrale
			{
	  		  html+='    <td id="'+this.id+'_'+(i-1)+'_to_'+i+'" style="width:'+this.interWidth+'px; height:'+this.interHeight+'px;"></td>';
		  	  html+='    <td id="'+this.id+'_my_button_'+i+'" onClick="TABULAR_clickHandler(event);" nowrap style="cursor:pointer;" onMouseOver="TABULAR_overHandler(event);" onMouseOut="TABULAR_outHandler(event);" class="'+this.buttonClass+'">'+this.buttons[i][0]+'</td>';
			}
		}
	}
	html+='  </tr>';
	html+='</table>';
	document.getElementById(this.id).innerHTML=html;
	this.selectTab(index);
	return;
}

//ajout d'un button tabulation
/*
   Format des appels:
 		myTab.addButton('Label','iframe','iframeId','url');
 		myTab.addButton('Label','function',functionRef,'functionArg');
 		myTab.addButton('Label','url',Array('url','target','option'),null);
   
*/
function TABULAR_addButton(label,actionType,actionRef,actionArgument)
{
	this.buttons.push(new Array(label,actionType,actionRef,actionArgument));
}


//supression d'un boutton d'après sa position (0==première position dans le bloc)
//Attention il s'aigt de la position dans le bloc et non par rapport à un groupe de bloc.
function TABULAR_deleteButtonAt(positionIndex)
{
	if(positionIndex<0 || positionIndex>this.buttons.length) { return; } //endors de la plage possible d'index
	var newButtonsList=Array();
	for(var i=0 ; i<this.buttons.length ; i++)
	{
		if(i!=positionIndex) { newButtonsList.push(this.buttons[i]); }
	}
	this.buttons=newButtonsList;
	
	var newIndex=this.selectedIndex;
	if(this.selectedIndex>=positionIndex)
	{
		newIndex=this.selectedIndex-1;
	}
	if(newIndex<0 && this.selectedIndex>=0) { newIndex=0; }

	this.init(newIndex);
	return;
}


//ajout dynamique d'un nouvel onglet à une position donné.

function TABULAR_addButtonAt(label,actionType,actionRef,actionArgument,positionIndex)
{
	if(positionIndex<0) { positionIndex=0; }
	if(positionIndex>this.buttons.length) { positionIndex=this.buttons.length; }
	
	var newButtonsList=Array();
	var str='nb onglet avant : '+this.buttons.length;
	for(var i=0 ; i<this.buttons.length+1 ; i++)  //on va un cran plus loin que le nombre de button afin de permettre d'en rajouter un en fin
	{
		if(i==positionIndex) { newButtonsList.push(new Array(label,actionType,actionRef,actionArgument)); }
		if(i<this.buttons.length) { newButtonsList.push(this.buttons[i]); }
	}
	this.buttons=newButtonsList;

	var newIndex=Math.round(this.selectedIndex);
	if(this.selectedIndex>=positionIndex)
	{
		newIndex=1+Math.round(this.selectedIndex);
	}
	
	this.init(newIndex);
	return;
}

/************************************/
//  METHODES ET VARIABLES GLOBALES
/************************************/

var TABULAR_LIST=new Array();

//gestion du click sur un button
function TABULAR_clickHandler(aEvent)
{
	var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement
	//on recupere objet cible declencheur de l'evenement
	var target= myEvent.target ? myEvent.target : myEvent.srcElement;
	
	//recomposition de l'id du bloc de tabulation  format <id_du_bloc>_XX_XX_XX
	var tmpIdTab=new Array();
	tmpIdTab=target.id.split('_');
		var idTabular='';
	for(var i=0 ;  i<tmpIdTab.length-3 ; i++) { if(i!=0) { idTabular+='_'; } idTabular+=tmpIdTab[i]; }
	//a partir de l'id du bloc on recupere l'objet tabular
	var tabularObj=TABULAR_findTabularById(idTabular);	
	//id du button declencheur
	var newIndex=tmpIdTab[tmpIdTab.length-1];
	//selection du nouveau tab
	tabularObj.selectTab(newIndex);
	
	//par securite on rafraichis la couleur de tous les texte de ce bloc
	for(var i=0 ; i<tabularObj.buttons.length ; i++)
	{
		if(i==tabularObj.selectedIndex) { document.getElementById(tabularObj.id+'_my_button_'+i).style.color=tabularObj.selectedTextColor; }
		else { document.getElementById(tabularObj.id+'_my_button_'+i).style.color=tabularObj.textColor; }
	}
	
	//on transmet aux autres block liés une instruction leur demandant de déselectionner tout leur buttons
	for(var i=0 ; i<tabularObj.linkedTabulars.length ; i++)
	{
		if(tabularObj.linkedTabulars[i]!=tabularObj)
		{
			tabularObj.linkedTabulars[i].selectTab(null);
		}
	}
}

//gestion du survole de la sourie onMouseOver
function TABULAR_overHandler(aEvent)
{
	var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement
	//on recupere objet cible declencheur de l'evenement
	var target= myEvent.target ? myEvent.target : myEvent.srcElement;
	
	var tmpIdTab=new Array();
	tmpIdTab=target.id.split('_');
	
	var idTabular='';
	for(var i=0 ;  i<tmpIdTab.length-3 ; i++) { if(i!=0) { idTabular+='_'; } idTabular+=tmpIdTab[i]; }
	var tabularObj=TABULAR_findTabularById(idTabular);
	var cuIndex=tmpIdTab[tmpIdTab.length-1];
	
	if(tabularObj.selectedIndex!=cuIndex) { target.style.color=tabularObj.overTextColor; }
}

//gestion de la sortie de la sourie onMouseOut
function TABULAR_outHandler(aEvent)
{
	var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement
	//on recupere objet cible declencheur de l'evenement
	var target= myEvent.target ? myEvent.target : myEvent.srcElement;
	
	var tmpIdTab=new Array();
	tmpIdTab=target.id.split('_');
	
	var idTabular='';
	for(var i=0 ;  i<tmpIdTab.length-3 ; i++) { if(i!=0) { idTabular+='_'; } idTabular+=tmpIdTab[i]; }
	var tabularObj=TABULAR_findTabularById(idTabular);	
	var cuIndex=tmpIdTab[tmpIdTab.length-1];
	
	for(var i=0 ; i<tabularObj.buttons.length ; i++)
	{
		if(i==tabularObj.selectedIndex) { document.getElementById(tabularObj.id+'_my_button_'+i).style.color=tabularObj.selectedTextColor; }
		else { document.getElementById(tabularObj.id+'_my_button_'+i).style.color=tabularObj.textColor; }
	}
}

//fonction recherchant un objet tabulation d'après son id
//  Cette fonction utilise la variable globale 
function TABULAR_findTabularById(idTabular)
{
	for(var i=0 ; i<TABULAR_LIST.length ; i++)
	{
		if(TABULAR_LIST[i].id==idTabular) { return TABULAR_LIST[i]; }
	}
	return null;
}