var roomId=0;var rolPanelGeneral=null;
var telon=null;
var rolTable=null;
var modalSetting=null;
var modalAdd=null;



var rolPackSend=new Array();
var rolPackSendAux=new Array();
var rolModuleEnabled=new Array();
var rolModule=new Array();

var zone=new Array();
zone[0]=null;
zone[1]=null;
zone[2]=null;
zone[3]=null;
zone[4]=null;
var container=new Array();

/*CONFIGURACION DE MODULOS*/
var modules=new Array();

modules[0]={
	'id':'Zona',
	'type':'table',
	'name':'elemento0',
	'title':'Zona',
	'container':'container-2-1',
	
	'endVoid':null
}
modules[1]={
	'id':'Vieo',
	'type':'videoChat',
	'name':'elemento1',
	'title':'Vieo',
	'container':'container-4-1',
	
	'endVoid':null
}
modules[2]={
	'id':'Chat',
	'type':'chat',
	'name':'elemento2',
	'title':'Chat',
	'container':'container-3-1',
	
	'endVoid':null
}

modules[3]={
	'id':'Dados',
	'type':'dice',
	'name':'elemento4',
	'title':'Dados',
	'container':'container-4-2',
	
	'endVoid':null
}
modules[4]={
	'id':'Musica',
	'type':'music',
	'name':'elemento4',
	'title':'Musica',
	'container':'container-4-3',
	
	'endVoid':null
}
modules[5]={
	'id':'pj',
	'type':'pj',
	'name':'elemento3',
	'title':'PJ',
	'container':'container-1-1',
	
	'endVoid':null
}
modules[6]={
	'id':'pnj',
	'type':'pnj',
	'name':'elemento4',
	'title':'PNJ',
	'container':'container-1-2',
	
	'endVoid':null
}
modules[7]={
	'id':'elementos',
	'type':'elementos',
	'name':'elemento4',
	'title':'Elementos',
	'container':'container-1-2',
	
	'endVoid':null
}

modules[8]={
	'id':'Criaturas',
	'type':'criaturas',
	'name':'elemento4',
	'title':'Criaturas',
	'container':'container-1-2',
	
	'endVoid':null
}
modules[9]={
	'id':'ficha',
	'type':'ficha',
	'name':'elemento4',
	'title':'Ficha',
	'container':'container-1-2',
	
	'endVoid':null
}
modules[10]={
	'id':'video',
	'type':'video',
	'name':'video',
	'title':'Video',
	'container':'container-2-1',
	
	'endVoid':null
}
/*FIN CONFIGURACION DE MODULOS*/

var conf={
	'userId':userId,
	'roomId':roomId,
	'userType':userType,
	
	'background':'#000',
	'tableLayout':'0',
	'nameRoom':'Prueba partida Online',
	'nameGame':'Vampiro 5º Edición',
	'modules':modules,
	
	
	'endVoid':null
};
var confNoLoad={
	'background':'#000',
	
	
	'endVoid':null
};
var languaje={
	'NO_LOAD_ROOM':'No tienes acceso a esta sala',
	'LOADING_ROOM':'Cargando',
	
	
	'endVoid':null
};


$(document).ready(function(){
	rolPanelGeneral=$("#rolPanelGeneral");
	rolPanelGeneral.html("");
	
	//instalContextMenu();
	
	if(roomId==0){
		noLoadRoomRol();
	}else{
		loadRoomRol(userId,roomId);
	}
});


var noLoadRoomRol = function(){
	rolPanelGeneral.css('background',confNoLoad.background);
	rolPanelGeneral.html('<div class="noLoadRoom"><h1>'+languaje.NO_LOAD_ROOM+'</h1></div>');
	
	
	
}
var loadRoomRol = function(userId,roomId){
	telonClose();
	rolPanelGeneral.css('background',conf.background);
	
	
	drawTable();
	
	telonOpen();
	
	var  base=new rolModuleEnabled['base'];
	var  chat=new rolModuleEnabled['chat'];
	
	console.log('BASE:'+base.nombre);
	console.log('CHAT:'+chat.nombre);
	
	
	console.log('CHAT:');
	chat.sendData();
	console.log('BASE:');
	base.sendData();
	
	console.log('BASE:'+base.getLogo());
	//base.getLogo();
	console.log('CHAT:'+chat.getLogo());
	//chat.getLogo();
	console.log('BASE:'+base.getLogo());
	//base.getLogo();
	
	
	
	
	
}
var drawTable = function(){
	rolPanelGeneral.css('background',conf.background);
	
	//rolPanelGeneral.append('<table class="rolTable"><tr><td class=" table-zone table-zone-0 " colspan="3" ></td></tr><tr><td class=" table-zone table-zone-1 resizable" rowspan="2" ><div class="resizable ui-widget-content">Prueba resisable</div></td><td class=" table-zone table-zone-2 resizable" ></td><td class=" table-zone table-zone-3 resizable" rowspan="2"></td></tr><tr><td  class=" table-zone table-zone-4 resizable"></td></tr></table>');
	rolPanelGeneral.append('<div class="rolTable"></div>');
	
	rolTable=$(".rolTable");
	setLayout(conf.tableLayout);

	//Añadir barra de menu
	addMenuBar();
	
	//Añadir Contenedores de pestañas
	//container['container-prueba']=addContainer('container-prueba', zone[1]);
	//addTap('tab-prueba',container['container-prueba']);
	//addTap('tab-prueba3',container['container-prueba']);
	
	//container['container-prueba2']=addContainer('container-prueba2', zone[1]);
	//addTap('tab-prueba2',container['container-prueba2']);
	
	
	//rolPanelGeneral.html('<div class="noLoadRoom"><h1>'+languaje.NO_LOAD_ROOM+'</h1></div>');
	
	//Añade los modulos segun se saque de la base de datos
	drawModules();
	
	//var menu
	//zone[0].html();
	
	/*<i class="fas fa-user"></i>*/

}
var setLayout = function(idLayout){
	switch(parseInt(idLayout)){
		case 1:
			rolTable.append('<div class=" table-zone table-zone-0 " ></div><div class="table-colum table-colum-1 " ><div class=" table-zone table-zone-1 resizable" ></div></div><div class="table-colum table-colum-2 container-fluid no-gutters" ><div class=" table-zone table-zone-2 resizable" ></div><div class=" table-zone table-zone-4 resizable" ></div><div  class=" table-zone table-zone-3 resizable"></div></div>');
	
			rolTable.removeClass('rolLayout-0');
			rolTable.removeClass('rolLayout-2');
			rolTable.removeClass('rolLayout-3');
			rolTable.removeClass('rolLayout-4');
			rolTable.removeClass('rolLayout-5');
			
			rolTable.addClass('rolLayout-1');
			
			zone[0]=$(".table-zone-0");
			zone[1]=$(".table-zone-1");
			zone[2]=$(".table-zone-2");
			zone[3]=$(".table-zone-3");
			zone[4]=$(".table-zone-4");
				
			addBarZone('.table-zone-1');
			addBarZone('.table-zone-3');
			addBarZone('.table-zone-4');
			addBarZoneEvent();
	
			break;
		case 2:
			rolTable.append('<div class=" table-zone table-zone-0 " ></div><div class="table-colum table-colum-1 " ><div class=" table-zone table-zone-1 resizable" ></div></div><div class="table-colum table-colum-2 container-fluid" ><div class=" table-zone table-zone-2 resizable" ></div><div class=" table-zone table-zone-4 resizable" ></div><div  class=" table-zone table-zone-3 resizable"></div></div>');

			rolTable.removeClass('rolLayout-0');
			rolTable.removeClass('rolLayout-1');
			rolTable.removeClass('rolLayout-3');
			rolTable.removeClass('rolLayout-4');
			rolTable.removeClass('rolLayout-5');
			
			rolTable.addClass('rolLayout-2');
			
			zone[0]=$(".table-zone-0");
			zone[1]=$(".table-zone-1");
			zone[2]=$(".table-zone-2");
			zone[3]=$(".table-zone-3");
			zone[4]=$(".table-zone-4");
		
			addBarZone('.table-zone-1');
			addBarZone('.table-zone-3');
			addBarZone('.table-zone-4');
			addBarZoneEvent();

			break;
		case 3:
			rolTable.append('<div class=" table-zone table-zone-0 " ></div><div class="table-colum table-colum-1 " ><div class=" table-zone table-zone-2 resizable" ></div></div><div class="table-colum table-colum-2 container-fluid" ><div class=" table-zone table-zone-1 resizable" ></div><div class=" table-zone table-zone-4 resizable" ></div><div  class=" table-zone table-zone-3 resizable"></div></div>');

			rolTable.removeClass('rolLayout-0');
			rolTable.removeClass('rolLayout-1');
			rolTable.removeClass('rolLayout-2');
			rolTable.removeClass('rolLayout-4');
			rolTable.removeClass('rolLayout-5');
			
			rolTable.addClass('rolLayout-3');
			
			zone[0]=$(".table-zone-0");
			zone[1]=$(".table-zone-1");
			zone[2]=$(".table-zone-2");
			zone[3]=$(".table-zone-3");
			zone[4]=$(".table-zone-4");
		
			addBarZone('.table-zone-1');
			addBarZone('.table-zone-3');
			addBarZone('.table-zone-4');
			addBarZoneEvent();

			break;
		case 4:
			rolTable.append('<div class=" table-zone table-zone-0 " ></div><div class="table-colum table-colum-1 " ><div class=" table-zone table-zone-2 resizable" ></div></div><div class="table-colum table-colum-2 container-fluid" ><div class=" table-zone table-zone-control-tap" ></div><div class="tab-content  tab-content-col-2" id="pills-tabContent"><div class=" table-zone table-zone-1 resizable tab-pane fade show active"  id=" table-zone table-zone-1" role="tabpanel" aria-labelledby=" table-zone table-zone-1-tab"></div><div class=" table-zone table-zone-4 resizable tab-pane fade"  id=" table-zone table-zone-4" role="tabpanel" aria-labelledby=" table-zone table-zone-4-tab"></div><div  class=" table-zone table-zone-3 resizable tab-pane fade" id=" table-zone table-zone-3" role="tabpanel" aria-labelledby=" table-zone table-zone-3-tab"></div></div></div>');
			$('.table-zone-control-tap').append('<ul class="rolLayout-4-nav nav  nav-tabs" role="tablist"><li class=" table-zone table-zone-control-tap-1  nav-item"><a class="nav-link active" id=" table-zone table-zone-1-tab" data-toggle="tab" href="# table-zone table-zone-1" role="tab" aria-controls=" table-zone table-zone-1" aria-selected="true"> table-zone table-zone-1</a></li><li class=" table-zone table-zone-control-tap-2 nav-item"><a class="nav-link " id=" table-zone table-zone-4-tab" data-toggle="tab" href="# table-zone table-zone-4" role="tab" aria-controls=" table-zone table-zone-4" aria-selected="true"> table-zone table-zone-4</a></li><li class=" table-zone table-zone-control-tap-3 nav-item"><a class="nav-link " id=" table-zone table-zone-3-tab" data-toggle="tab" href="# table-zone table-zone-3" role="tab" aria-controls=" table-zone table-zone-3" aria-selected="true"> table-zone table-zone-3</a></li></ul>');
			
			
			//$('.table-zone -1').append('<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"><li class="nav-item"><a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a></li><li class="nav-item"><a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a></li><li class="nav-item"><a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a></li></ul><div class="tab-content" id="pills-tabContent"><div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div><div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div><div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div></div>');

			rolTable.removeClass('rolLayout-0');
			rolTable.removeClass('rolLayout-1');
			rolTable.removeClass('rolLayout-2');
			rolTable.removeClass('rolLayout-3');
			rolTable.removeClass('rolLayout-5');
			
			rolTable.addClass('rolLayout-4');
			
			zone[0]=$(".table-zone-0");
			zone[1]=$(".table-zone-1");
			zone[2]=$(".table-zone-2");
			zone[3]=$(".table-zone-3");
			zone[4]=$(".table-zone-4");
		
			addBarZone('.table-zone-1');
			addBarZone('.table-zone-3');
			addBarZone('.table-zone-4');
			addBarZoneEvent();


			break;
			/*
		case 5:
			
			rolTable.append('<div class=" table-zone table-zone-0 " ></div><div class="table-colum table-colum-1 " ><div class=" table-zone table-zone-1 resizable" ></div></div><div class="table-colum table-colum-2 container-fluid" ><div class=" table-zone table-zone-2 resizable" ></div><div class=" table-zone table-zone-3 resizable" ></div></div><div class="table-colum table-colum-3 " ><div  class=" table-zone table-zone-4 resizable"></div></div>');
	
			rolTable.removeClass('rolLayout-0');
			rolTable.removeClass('rolLayout-1');
			rolTable.removeClass('rolLayout-2');
			rolTable.removeClass('rolLayout-3');
			rolTable.removeClass('rolLayout-4');
			
			rolTable.addClass('rolLayout-5');
		
			addBarZone('.table-zone-1');
			addBarZone('.table-zone-3');
			addBarZone('.table-zone-4');
			addBarZoneEvent();

			break;
		*/
		
		default:
		
			rolTable.append('<div class=" table-zone table-zone-0 " ></div><div class="table-colum table-colum-1 " ><div class=" table-zone table-zone-1 resizable" ></div></div><div class="table-colum table-colum-2 container-fluid" ><div class=" table-zone table-zone-2 resizable" ></div><div class=" table-zone table-zone-3 resizable" ></div></div><div class="table-colum table-colum-3 " ><div  class=" table-zone table-zone-4 resizable"></div></div>');
	
	
			rolTable.removeClass('rolLayout-0');
			rolTable.removeClass('rolLayout-1');
			rolTable.removeClass('rolLayout-2');
			rolTable.removeClass('rolLayout-3');
			rolTable.removeClass('rolLayout-4');
			rolTable.removeClass('rolLayout-5');
			
			rolTable.addClass('rolLayout-0');
			
			zone[0]=$(".table-zone-0");
			zone[1]=$(".table-zone-1");
			zone[2]=$(".table-zone-2");
			zone[3]=$(".table-zone-3");
			zone[4]=$(".table-zone-4");
			
			addBarZone('.table-zone-1');
			addBarZone('.table-zone-3');
			addBarZone('.table-zone-4');
			
			addBarZoneEvent();

			break;
	}
	
	setContainer();
	
}
var setContainer = function(idLayout){
	switch(parseInt(idLayout)){
		case 1:
			container['container-1-1']=addContainer('container-1-1', zone[1]);
			container['container-1-2']=addContainer('container-1-2', zone[1]);
					
			container['container-2-1']=addContainer('container-2-1', zone[2]);
			
			container['container-3-1']=addContainer('container-3-1', zone[3]);
			
			container['container-4-1']=addContainer('container-4-1', zone[4]);
			container['container-4-2']=addContainer('container-4-2', zone[4]);
			container['container-4-3']=addContainer('container-4-3', zone[4]);
			break;
		case 2:
			container['container-1-1']=addContainer('container-1-1', zone[1]);
			container['container-1-2']=addContainer('container-1-2', zone[1]);
					
			container['container-2-1']=addContainer('container-2-1', zone[2]);
			
			container['container-3-1']=addContainer('container-3-1', zone[3]);
			
			container['container-4-1']=addContainer('container-4-1', zone[4]);
			container['container-4-2']=addContainer('container-4-2', zone[4]);
			container['container-4-3']=addContainer('container-4-3', zone[4]);
			break;
		case 3:
			container['container-1-1']=addContainer('container-1-1', zone[1]);
			container['container-1-2']=addContainer('container-1-2', zone[1]);
			
			
			container['container-2-1']=addContainer('container-2-1', zone[2]);
			
			container['container-3-1']=addContainer('container-3-1', zone[3]);
			
			container['container-4-1']=addContainer('container-4-1', zone[4]);
			container['container-4-2']=addContainer('container-4-2', zone[4]);
			container['container-4-3']=addContainer('container-4-3', zone[4]);
			break;
		case 4:
			container['container-1-1']=addContainer('container-1-1', zone[1]);
			container['container-1-2']=addContainer('container-1-2', zone[1]);
						
			container['container-2-1']=addContainer('container-2-1', zone[2]);
			
			container['container-3-1']=addContainer('container-3-1', zone[3]);
			
			container['container-4-1']=addContainer('container-4-1', zone[4]);
			container['container-4-2']=addContainer('container-4-2', zone[4]);
			container['container-4-3']=addContainer('container-4-3', zone[4]);
			break;
			
		default:
			container['container-1-1']=addContainer('container-1-1', zone[1]);
			container['container-1-2']=addContainer('container-1-2', zone[1]);
			
			container['container-2-1']=addContainer('container-2-1', zone[2]);
			
			container['container-3-1']=addContainer('container-3-1', zone[3]);
			
			container['container-4-1']=addContainer('container-4-1', zone[4]);
			container['container-4-2']=addContainer('container-4-2', zone[4]);
			container['container-4-3']=addContainer('container-4-3', zone[4]);
			
			break;
	}
}
var addBarZone = function(idElement,modo=0){
	var elemento=$(idElement);
	
	
	if(modo==0){
		elemento.append('<div class="barZone"><ul class="nav"><li class="nav-item"><a class="nav-link boton-minimizar" target="'+idElement+'" href="#"><i class="fas fa-window-minimize"></i></a><a class="nav-link  boton-maximizar"  target="'+idElement+'" href="#"><i class="far fa-window-maximize"></i></a></li><li class="nav-item"><a class="nav-link boton-zone-add" target="'+idElement+'" href="#"><i class="fas fa-plus"></i></a></li></ul></div>');
		elemento.addClass('maximized');
		
		
	}else{
		
	}
	
}
var addBarZoneEvent = function(){
	$('.boton-minimizar').click(clickMinimize);
	$('.boton-maximizar').click(clickMaximize);
	$('.boton-zone-add').click(clickZoneAdd);
	
}

var clickMinimize = function(e){
	e.preventDefault();
	
	var elemento=$(e.target);
	elemento=findParent(elemento,'nav-link')
	
	if(elemento){
		//var zona==findParent(elemento,'nav-link')
		var target=elemento.attr('target');
		var zona=$(target);
		var colum=findParent(zona,'table-colum');
		
		
		zona.removeClass('maximized');
		zona.addClass('minimized');

		if(rolTable.hasClass('rolLayout-0')){
			switch(target){
				
				case '.table-zone-1':
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-2').addClass('minimized-zone-1');
					$('.table-zone-2').addClass('minimized-zone-1');
					break;
				case '.table-zone-3':
					$('.table-zone-2').addClass('minimized-zone-3');
					break;
				case '.table-zone-4':
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-2').addClass('minimized-zone-4');
					$('.table-zone-2').addClass('minimized-zone-4');
					break;
				
				default:
				
					break;
			}
		}else if(rolTable.hasClass('rolLayout-1')){
			switch(target){
				
				case '.table-zone-1':
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-2').addClass('minimized-zone-1');
					$('.table-zone-2').addClass('minimized-zone-1');
					break;
				
				case '.table-zone-3':
				case '.table-zone-4':
					$('.table-zone-3').addClass('minimized');
					$('.table-zone-4').addClass('minimized');
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-2').addClass('minimized-zone-3-4');
					$('.table-zone-2').addClass('minimized-zone-3-4');
					break;
				
				default:
				
					break;
			}
			
			
			
		}else if(rolTable.hasClass('rolLayout-2')){
			switch(target){
				
				case '.table-zone-1':
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-2').addClass('minimized-zone-1');
					$('.table-zone-2').addClass('minimized-zone-1');
					break;
				
				case '.table-zone-3':
				case '.table-zone-4':
					$('.table-zone-3').addClass('minimized');
					$('.table-zone-4').addClass('minimized');
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-2').addClass('minimized-zone-3-4');
					$('.table-zone-2').addClass('minimized-zone-3-4');
					break;
				
				default:
				
					break;
			}
			
			
			
		}else if(rolTable.hasClass('rolLayout-3')){
			switch(target){
				

				case '.table-zone-1':
				case '.table-zone-3':
				case '.table-zone-4':
					$('.table-zone-1').addClass('minimized');
					$('.table-zone-3').addClass('minimized');
					$('.table-zone-4').addClass('minimized');
					
					colum.addClass('minimized');
					colum.removeClass('maximized');
					$('.table-colum-1').addClass('minimized-zone-1-3-4');
					$('.table-zone-2').addClass('minimized-zone-1-3-4');
					break;
				
				default:
				
					break;
			}
			
			
			
		}else if(rolTable.hasClass('rolLayout-4')){
			
		}else{
			
		}
	}
	
	
}
var clickMaximize = function(e){
	e.preventDefault();
	
	var elemento=$(e.target);
	elemento=findParent(elemento,'nav-link');
	
	if(elemento){
		//var zona==findParent(elemento,'nav-link')
		var target=elemento.attr('target');
		
		var zona=$(elemento.attr('target'));
		var colum=findParent(zona,'table-colum');
		
		
		
		zona.removeClass('minimized');
		zona.addClass('maximized');

		if(rolTable.hasClass('rolLayout-0')){
			switch(target){
				
				
				case '.table-zone-1':
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-2').removeClass('minimized-zone-1');
					$('.table-zone-2').removeClass('minimized-zone-1');
					break;
				case '.table-zone-3':
					$('.table-zone-2').removeClass('minimized-zone-3');
					
					break;
				case '.table-zone-4':
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-2').removeClass('minimized-zone-4');
					$('.table-zone-2').removeClass('minimized-zone-4');
					break;
				
				default:
				
					break;
			}
		}else if(rolTable.hasClass('rolLayout-1')){
			switch(target){
				
				
				case '.table-zone-1':
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-2').removeClass('minimized-zone-1');
					$('.table-zone-2').removeClass('minimized-zone-1');
					break;
					
				case '.table-zone-3':	
				case '.table-zone-4':
					$('.table-zone-3').removeClass('minimized');
					$('.table-zone-4').removeClass('minimized');
					
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-2').removeClass('minimized-zone-3-4');
					$('.table-zone-2').removeClass('minimized-zone-3-4');
					break;
				
				default:
				
					break;
			}
			
			
			
		}else if(rolTable.hasClass('rolLayout-2')){
			switch(target){
				
				
				case '.table-zone-1':
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-2').removeClass('minimized-zone-1');
					$('.table-zone-2').removeClass('minimized-zone-1');
					break;
					
				case '.table-zone-3':	
				case '.table-zone-4':
					$('.table-zone-3').removeClass('minimized');
					$('.table-zone-4').removeClass('minimized');
					
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-2').removeClass('minimized-zone-3-4');
					$('.table-zone-2').removeClass('minimized-zone-3-4');
					break;
				
				default:
				
					break;
			}
			
			
			
		}else if(rolTable.hasClass('rolLayout-3')){
			switch(target){

			
				case '.table-zone-1':	
				case '.table-zone-3':	
				case '.table-zone-4':
					$('.table-zone-1').removeClass('minimized');
					$('.table-zone-3').removeClass('minimized');
					$('.table-zone-4').removeClass('minimized');
					
					colum.addClass('maximized');
					colum.removeClass('minimized');
					$('.table-colum-1').removeClass('minimized-zone-1-3-4');
					$('.table-zone-2').removeClass('minimized-zone-1-3-4');
					break;
				
				default:
				
					break;
			}
			
			
			
		}else if(rolTable.hasClass('rolLayout-4')){
			
		}else{
			
		}
	}
}
var clickZoneAdd = function(e){
	
}
var telonClose = function(idLayout){
	telonDraw();
	
	telon.css('opacity','1');
	telon.css('display','block');
}
var telonOpen = function(idLayout){
	telonDraw();
	
	telon.animate({
		opacity: 0,
	},function(){telon.css('display','none');});
}
var telonDraw = function(){
	if(telon==null){
		rolPanelGeneral.append('<div class="telon"><div class="telonMsg">'+languaje.LOADING_ROOM+'</div><div class="telonIcon"><img src="favicon.png"></div></div>');
		telon=$('.telon');
	}
}
var addMenuBar = function(){
	//Genera un contenedor en una zona
	if(zone[0]){
		var contenido='';
		
		contenido+='<div class="menu-bar-logo bloque-menu-bar">';
			contenido+='<img class="menu-bar-logo-img" src="/favicon.png">';
		
		contenido+='</div>';
		
		contenido+='<div class="menu-bar-titulo bloque-menu-bar">';
			contenido+='<h1>'+conf.nameRoom+'('+conf.nameGame+')</h1>';
		contenido+='</div>';
		
		contenido+='<div class="menu-bar-option bloque-menu-bar">';
			contenido+='<ul  class="menu-bar-option-list nav" >';
				
				
				contenido+='<li class="nav-item option-popup"  >';
					contenido+='<a id="button-add" class="option-button"><i class="fas fa-plus"></i></a>';
				contenido+='</li>';
				
				contenido+='<li class="nav-item option-popup"  >';
					contenido+='<a id="button-setting" class="option-button"><i class="fas fa-cog"></i></a>';
				contenido+='</li>';

				
			contenido+='</ul>';
		contenido+='</div>';
		
		
		zone[0].append(contenido);
		
		$('#button-setting').click(launchModalSetting);
		$('#button-add').click(launchModalAdd);
	}
}
var launchModalSetting = function(){
	//Genera modal de configuración
	generateModalSetting();
	modalSetting.modal('show');
	modalSetting.modal('handleUpdate')
}
var launchModalAdd = function(){
	//Genera modal de configuración
	generateModalAdd();
	modalAdd.modal('show');
	modalAdd.modal('handleUpdate')
}

var generateModalSetting = function(){
	//Genera un contenedor en una zona
	if(modalSetting==null){
		var contenido='';
			
		contenido+='<div class="modal fade  modal-setting"  id="modalSetting" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">';
			contenido+='<div class="modal-dialog modal-xl" role="document">';
				contenido+='<div class="modal-content">';
					contenido+='<div class="modal-header">';
						contenido+='<h5 class="modal-title" id="exampleModalLongTitle">Modal SETTING</h5>';
						contenido+='<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
							contenido+='<span aria-hidden="true">&times;</span>';
						contenido+='</button>';
					contenido+='</div>';
				contenido+='<div class="modal-body">';
					contenido+=generateSettingForm()
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
				contenido+='</div>';
					contenido+='<div class="modal-footer">';
						contenido+='<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
						contenido+='<button type="button" class="btn btn-primary">Save changes</button>';
					contenido+='</div>';
				contenido+='</div>';
			contenido+='</div>';
		contenido+='</div>';
		
		rolPanelGeneral.append(contenido);
		modalSetting=$('#modalSetting');
	}
}
var generateModalAdd = function(){
	//Genera un contenedor en una zona
	if(modalAdd==null){
		var contenido='';
			
		contenido+='<div class="modal fade  modal-setting"  id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">';
			contenido+='<div class="modal-dialog modal-xl" role="document">';
				contenido+='<div class="modal-content">';
					contenido+='<div class="modal-header">';
						contenido+='<h5 class="modal-title" id="exampleModalLongTitle">Modal ADD</h5>';
						contenido+='<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
							contenido+='<span aria-hidden="true">&times;</span>';
						contenido+='</button>';
					contenido+='</div>';
				contenido+='<div class="modal-body">';
					contenido+=generateSettingForm()
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
					//contenido+='CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO CUERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO UERPO CUERPO ';
				contenido+='</div>';
					contenido+='<div class="modal-footer">';
						contenido+='<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
						contenido+='<button type="button" class="btn btn-primary">Save changes</button>';
					contenido+='</div>';
				contenido+='</div>';
			contenido+='</div>';
		contenido+='</div>';
		
		rolPanelGeneral.append(contenido);
		modalAdd=$('#modalAdd');
	}
}
var generateSettingForm = function(){
	//Genera un contenedor en una zona
	
		var contenido='';
		contenido+='<div class="container-fluid">';	
			contenido+='<div class="row no-gutters">';	
				contenido+='<div class="col-md-4 no-gutters colum-setting-menu">';	
					contenido+='<div class="nav flex-column nav-tabs" id="v-pills-tab" role="tablist" aria-orientation="vertical">';
						contenido+='<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>';
						contenido+='<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>';
						contenido+='<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>';
						contenido+='<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>';
					contenido+='</div>';
				contenido+='</div>';
				contenido+='<div class="col-md-8 no-gutters colum-setting-data">';
					contenido+='<div class="tab-content" id="v-pills-tabContent">';
						contenido+='<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...<br>...</div>';
						contenido+='<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>';
						contenido+='<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>...</div>';
						contenido+='<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>';
					contenido+='</div>';
				contenido+='</div>';
			contenido+='</div>';
		contenido+='</div>';
		
		
	
	return contenido;
}
var generateContainer = function(nameContainer){
	//Genera un contenedor en una zona
	var contenido='';

		
		contenido+='<div id="'+nameContainer+'"	class="container-block">';
			//contenido+='<nav class="container-tab">';
				contenido+='<nav id="'+nameContainer+'-tab" class="nav nav-tabs container-tab" role="tablist">';
					//contenido+='<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>';
					//contenido+='<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>';
					//contenido+='<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>';
				contenido+='</nav>';
			//contenido+='</nav>';
			
			contenido+='<div id="'+nameContainer+'-body" class="tab-content container-body" >';
				//contenido+='<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1</div>';
				//contenido+='<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2</div>';
				//contenido+='<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">3</div>';
			contenido+='</div>';
		contenido+='</div>';
		
		contenido+='<div id="'+nameContainer+'-bubble" class="tab-content container-bubble">';
		contenido+='</div>';
	return contenido;
}
var addContainer = function(nameContainer,zone){
	//Añade un container a una zona
	
	if(!(zone instanceof jQuery)){
		zone=$(zone);
	}
	
	zone.append(generateContainer(nameContainer));
	
	container[nameContainer]=$('#'+nameContainer);
	
	return container[nameContainer];
}

var drawModules = function(){
	var modulos=conf.modules;
	var cant=modulos.length;
	
	for(var x=0; x<cant;x++){
		if(typeof modulos[x] != 'undefined' &&  typeof modulos[x].id != 'undefined'){
			var  type=modulos[x].type;
			if(typeof rolModuleEnabled[type] != 'undefined'){
				var  id=modulos[x].id;				

					console.log('modulos:'+x);
					console.log(modulos[x]);

				rolModule[id]=new rolModuleEnabled[type](modulos[x],conf.userId,conf.userType,conf.roomId+'---'+x);
				rolModule[id].moveToContainer(modulos[x].container);
			}
		}
	}
	console.log('rolModule:');
	console.log(rolModule);

	//Tras dibujar los moduloss, se activan las primeraas pestañas
	$('.container-tab').each(function(){
		$(this).find('.nav-item').first().click();
	});
	$('#base-tab-SNI-pnj').click();
	//$('.container-tab').find('.nav-item').addClass('active');
	//$('.container-tab').find('.container-body .tab-pane').addClass('active');
	
	//rolModule['elemento1'].moveToContainer('container-4-1');
}
/*
$(document).ready(function(){
             
            //Ocultamos el menú al cargar la página
            $("#menu").hide();
             
            
            $(document).bind("contextmenu", function(e){
                  $("#menu").css({'display':'block', 'left':e.pageX, 'top':e.pageY});
                  return false;
            });
             
             
            //cuando hagamos click, el menú desaparecerá
            $(document).click(function(e){
                  if(e.button == 0){
                        $("#menu").css("display", "none");
                  }
            });
             
            //si pulsamos escape, el menú desaparecerá
            $(document).keydown(function(e){
                  if(e.keyCode == 27){
                        $("#menu").css("display", "none");
                  }
            });
             
            //controlamos los botones del menú
            $("#menu").click(function(e){
                   
                  // El switch utiliza los IDs de los <li> del menú
                  switch(e.target.id){
                        case "copiar":
                              alert("copiado!");
                              break;      
                        case "mover":
                              alert("movido!");
                              break;
                        case "eliminar":
                              alert("eliminado!");
                              break;
                  }
                   
            });
             
                         
      });               
*/