function isDefined(variable) {
   	return (typeof(window[variable]) == "undefined")?  false: true;
}

/**
 * 	Componente Panel Usuario
 */	
function componentePanel(tabPadre){
	this.obrasCarrito = 0;
	this.anioFactura = null;
	this.obrasFactura = null;
	this.obrasDescarga = 0;
	this.efectosDescarga = 0;
			
	this.html = 
				'<div class="panelUsuario">'+
					
					'<div id="tituloPanel0"  class="tituloPanelPrimero"><div class = "textoTituloPanel"><a href="javascript:void(0)">{titulo0}</a></div></div>'+
					'<div id="textoPanel0"  class="textoPanel"></div>'+	
			
					'<div id="tituloPanel1"  class="tituloPanel"><div class = "textoTituloPanel"><a href="javascript:void(0)">{titulo1}</a></div></div>'+
					'<div id="textoPanel1"  class="textoPanel"></div>'+
	
					'<div id="tituloPanel2"  class="tituloPanel"><div class = "textoTituloPanel"><a href="javascript:void(0)">{titulo2}</a></div></div>'+
					'<div id="textoPanel2"  class="textoPanel"></div>'+
					
					'<div id="tituloPanel3"  class="tituloPanel"><div class = "textoTituloPanel"><a href="javascript:void(0)">{titulo3}</a></div></div>'+
					'<div id="textoPanel3"  class="textoPanel"></div>'+
					
					'<div id="tituloPanel4"  class="tituloPanel"><div class = "textoTituloPanel"><a href="javascript:void(0)">{titulo4}</a></div></div>'+
					'<div id="textoPanel4"  class="textoPanel"></div>'+
					
					'<div id="piePanel" class="piePanel" ></div>'+
				'</div>';
	
	this.iniciar = function (panelActivo){
		this.cargarDatos(panelActivo);
	}				
	this.iniciarComponentes = function(){
		Ext.get('panelUsuario').update();
		
		this.tpl = new Ext.Template(this.html);
		
		this.tpl.compile();	
		this.tpl.append('panelUsuario', {titulo0:localize("misDatos"),titulo1:localize("verCarrito"),titulo2:localize("misSelecciones"),titulo3:localize("facturacion"),titulo4:localize("areaDescarga")});
									
		this.piePanel = Ext.get('piePanel');

		this.panel0 = new elementoPanel('tituloPanel0','textoPanel0',this);
		this.contenidoPanel0 = new contenidoPanel0(this.panel0);
		this.panel0.setContenido(this.contenidoPanel0);
		this.panel0.iniciar();
		
		this.panel1 = new elementoPanel('tituloPanel1','textoPanel1',this);
		this.contenidoPanel1 = new contenidoPanel1(this.panel1,tabPadre,this.obrasCarrito,this.efectosCarrito);
		this.panel1.setContenido(this.contenidoPanel1);
		this.panel1.iniciar();
	
		this.panel2 = new elementoPanel('tituloPanel2','textoPanel2',this);
		this.contenidoPanel2 = new contenidoPanel2(this.panel2,this);
		this.panel2.setContenido(this.contenidoPanel2);
		this.panel2.iniciar();
		
		this.panel3 = new elementoPanel('tituloPanel3','textoPanel3',this);
		this.contenidoPanel3 = new contenidoPanel3(this.panel3,this.anioFactura,this.obrasFactura);
		this.panel3.setContenido(this.contenidoPanel3);
		this.panel3.iniciar();
		
		this.panel4 = new elementoPanel('tituloPanel4','textoPanel4',this);
		this.contenidoPanel4 = new contenidoPanel4(this.panel4,this.obrasDescarga,this.efectosDescarga);
		this.panel4.setContenido(this.contenidoPanel4);
		this.panel4.iniciar();
			
		this.panel0.setPanelInferior(this.panel1);	
		this.panel1.setPanelInferior(this.panel2);
		this.panel2.setPanelInferior(this.panel3);
		this.panel3.setPanelInferior(this.panel4);
		
		this.panel4.setPie(this.piePanel);	
		this.panel0.setPrimerPanel(true);
		
		// Activamos el panel apropiado, si procede
		if(this.panelActivo==0){
			this.panel0.activar();
			this.panel0.contenido.activarElemento(1);
		}
		if(this.panelActivo==1){
			this.panel0.activar();
			this.panel0.contenido.activarElemento(2);
		}
		if(this.panelActivo==2){
			this.panel1.activar();
		}
		if(this.panelActivo==3){
			this.panel2.activar();
		}
		if(this.panelActivo==4){
			this.panel3.activar();
		}
		if(this.panelActivo==5){
			this.panel4.activar();
		}
	}
	/**
	 * Esconde los paneles necesarios y ejecuta la funcion
	 */
	this.mostrarPanel = function(panel){
		this.panel0.desactivar();
		this.panel1.desactivar();
		this.panel2.desactivar();
		this.panel3.desactivar();
		this.panel4.desactivar();
		panel.activar();
	}
	this.cargarDatos = function (panelActivo){
		this.storeDatos = new Ext.data.JsonStore({
		    url: '../portal/json/DatosPanel.adl',
		    root: 'carpetas',
		    fields:[	
		    	{name: 'numeroComposiciones'},	
		    	{name: 'proyecto'}
			],
		    baseParams: {}
		});
		var padre = this;
		this.storeDatos.on('load',function (){
			padre.obrasCarrito = this.reader.jsonData.obrasCarrito;
			padre.efectosCarrito = this.reader.jsonData.efectosCarrito;
			padre.anioFactura = this.reader.jsonData.anioFactura;
			padre.obrasFactura = this.reader.jsonData.obrasFactura;
			padre.obrasDescarga = this.reader.jsonData.obrasDescarga;	
			padre.efectosDescarga = this.reader.jsonData.efectosDescarga;
			padre.tieneSelecciones = this.reader.jsonData.tieneSelecciones;
			
			if(((panelActivo)||(panelActivo==0)) && (tabPadre.esTabMiCuenta)){
				padre.panelActivo = panelActivo;
			}else{
				if(padre.tieneSelecciones==true){
					padre.panelActivo = 3;
				}else{
					padre.panelActivo = 2;
				}				
			}		
			
			padre.iniciarComponentes();
		});
		
		this.storeDatos.load();
	}
}

/**
 * Elemento Panel Usuario
 */
function elementoPanel(titulo,texto,panel){
	this.contenido = null;
	
	this.tpl = new Ext.Template(this.html);
	this.elTitulo = Ext.get(titulo);
	this.elTexto = Ext.get(texto);
	this.activo = false;
	this.panelInferior = null;
	this.pie = null;
	this.primerPanel = false;
	this.iniciar = function(){
		
		var padre = this;
		this.elTitulo.on('click',function(){
			if(this.activo==true){			
				padre.elTexto.update();
				padre.desactivar();
				padre.activo = false;
			}else{			
				panel.mostrarPanel(padre);
				padre.activo = true;				
			}
		});
	}
	this.activar = function(){
		if(this.primerPanel==true){
			this.elTitulo.replaceClass('tituloPanelPrimero','tituloPanelPrimeroExp');
			this.elTexto.replaceClass('textoPanel','textoPanelExpanded');
		}else{
			this.elTitulo.replaceClass('tituloPanel','tituloPanelExpandido');
			this.elTexto.replaceClass('textoPanel','textoPanelExpanded');
		}
		this.contenido.pintar();
		this.activo = true;
		if(this.panelInferior!=null){
			this.panelInferior.activarInferior();
		}
		if(this.pie!=null){
			this.pie.replaceClass('piePanel','piePanelon');
		}
		this.elTexto.autoHeight(true,0.9);
	}
	this.desactivar = function(){
		if(this.primerPanel==true){
			this.elTitulo.replaceClass('tituloPanelPrimeroExp','tituloPanelPrimero');
			this.elTexto.replaceClass('textoPanelExpanded','textoPanel');
		}
		else{
			this.elTitulo.replaceClass('tituloPanelExpandido','tituloPanel');
			this.elTexto.replaceClass('textoPanelExpanded','textoPanel');
		}

	    this.elTexto.setHeight(15,true,0.7);
	    this.elTexto.update();
	    this.activo = false;
		if(this.panelInferior!=null){
			this.panelInferior.desActivarInferior();
		}
		if(this.pie!=null){
			this.pie.replaceClass('piePanelon','piePanel');
		}
	}
	this.activarInferior = function(){
		this.elTitulo.replaceClass('tituloPanel','tituloPanelInfExpandido');
	}
	this.desActivarInferior = function(){
		this.elTitulo.replaceClass('tituloPanelInfExpandido','tituloPanel');
	}
	this.setPanelInferior = function(panelInferior){
		this.panelInferior = panelInferior;
	}
	this.setPie = function(pie){
		this.pie = pie;
	}
	this.setContenido = function(contenido){
		this.contenido = contenido;
	}
	this.setPrimerPanel = function(valor){
		this.primerPanel = valor;
	}
}

/**
 * Contenido Panel Mis Datos
 */
function contenidoPanel0(panelPadre){
	this.html = '<div class="separadorPanel"></div>\n';				
	this.htmlCampo1 = '<div class= "textoNormalPanel" style="padding-bottom:0px;padding-left:15px;"><a href="javascript:void(0)">{menu1}</a></div>';
	this.htmlCampo2 = '<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:4px;"><a href="javascript:void(0)">{menu2}</a></div>';
	this.tpl = new Ext.Template(this.html);
	this.tplCampo1 = new Ext.Template(this.htmlCampo1);
	this.tplCampo2 = new Ext.Template(this.htmlCampo2);
	this.elementoCampo1 = null;
	this.elementoCampo2 = null;
	this.elCampo1 = null;
	this.elCampo2 = null;
	
	this.pintar = function(){
		this.tpl.append(panelPadre.elTexto, {});
		this.elementoCampo1 = this.tplCampo1.append(panelPadre.elTexto, {menu1:localize('cambiarPass')});
		this.elementoCampo2 = this.tplCampo2.append(panelPadre.elTexto, {menu2:localize('actualizarDatos')});
		
		this.elCampo1 = Ext.get(this.elementoCampo1);
		this.elCampo2 = Ext.get(this.elementoCampo2);
		var padre = this;
		this.elCampo1.on('click',function(){
			window.location = '../portal/CambiarPasswordUsuario.adl';
		});
		
		this.elCampo2.on('click',function(){
			window.location = '../portal/UsuarioDatos.adl';
		});
	}

	this.activarElemento = function(numeroElemento){
		if(numeroElemento==1){
			this.elCampo1.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
			this.elCampo2.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
		}
		if(numeroElemento==2){
			this.elCampo1.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
			this.elCampo2.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
		}
	}		
}

/**
 * Contenido Panel Mi Carrito
 */
function contenidoPanel1(panelPadre,tabPadre,numeroObras,numeroEfectos){
	this.html = '<div class="separadorPanel"></div>\n';			
	this.htmlCampo1 = 	'<div class= "textoNormalPanel" style="padding-bottom:4px;padding-left:15px;"><a href="javascript:void(0)">'+localize('productos')+':</a></div>'+
					  	'<div class= "textoNormalPanel" style="padding-bottom:0px;padding-left:15px;"><a href="javascript:void(0)">{menu1}</a></div>';
	this.htmlCampo2 = 	'<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:4px;"><a href="javascript:void(0)">{menu2}</a></div>';
	this.tpl = new Ext.Template(this.html);
	this.tplCampo1 = new Ext.Template(this.htmlCampo1);
	this.tplCampo2 = new Ext.Template(this.htmlCampo2);
	this.elementoCampo1 = null;
	this.elementoCampo2 = null;
	this.elCampo1 = null;
	this.elCampo2 = null;
	
	this.pintar = function(){
		this.tpl.append(panelPadre.elTexto, {});
		this.elementoCampo1 = this.tplCampo1.append(panelPadre.elTexto, {menu1:localize('musica')+' ('+numeroObras+')'});
		this.elementoCampo2 = this.tplCampo2.append(panelPadre.elTexto, {menu2:localize('efectos')+' ('+numeroEfectos+')'});
		
		this.elCampo1 = Ext.get(this.elementoCampo1);
		this.elCampo2 = Ext.get(this.elementoCampo2);
		var padre = this;
		this.elCampo1.on('click',function(){
			window.location = '../portal/UsuariosMiCarrito.adl';
		});
		
		this.elCampo2.on('click',function(){
			window.location = '../portal/UsuariosMiCarrito.adl';
		});
	}

	this.activarElemento = function(numeroElemento){
		if(numeroElemento==1){
			this.elCampo1.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
			this.elCampo2.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
		}
		if(numeroElemento==2){
			this.elCampo1.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
			this.elCampo2.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
		}
	}		
}
/**
 * Contenido Panel Selecciones
 */
function contenidoPanel2(panelPadre,panelUsuario){
	this.html = '<div class="separadorPanel"></div>\n';				
	this.html2 = '<div style="height:10px;"></div>\n';
	this.html3 = '<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:6px;">{titulo}:</div>\n';
	this.htmlCampo1 = '<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:6px;"><a href="javascript:void(0)"><img src ="../img/carpetaoffselecciones.gif" width="11" height="10"/> {menu1}</a></div>';
	this.htmlCampo2 = '<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:6px;"><a href="javascript:void(0)"><img src ="../img/carpetanuevaselecciones.gif" width="11" height="10"/> {menu1}</a></div>';
	this.tpl = new Ext.Template(this.html);
	this.tpl2 = new Ext.Template(this.html2);
	this.tpl3 = new Ext.Template(this.html3);
	this.tplCampo1 = new Ext.Template(this.htmlCampo1);
	this.tplCampo2 = new Ext.Template(this.htmlCampo2);
	this.arrayCampos = new Array();
	this.pintar = function(){		
		this.tpl.append(panelPadre.elTexto, {});
		this.tpl3.append(panelPadre.elTexto, {titulo:localize('misCarpetas')});
		if(panelUsuario.storeDatos.getCount()>0){
			var numeroElementos = panelUsuario.storeDatos.getCount();	
			for (var i = 0; i < numeroElementos; i++) {				
				var elementoCampo = null;
				elementoCampo = this.tplCampo1.append(panelPadre.elTexto, {menu1:panelUsuario.storeDatos.getAt(i).get('proyecto')+' '+'('+panelUsuario.storeDatos.getAt(i).get('numeroComposiciones')+')'});										
				this.arrayCampos[i] = Ext.get(elementoCampo);
				this.arrayCampos[i].orden=i;
				this.arrayCampos[i].on('click',function(){
					// redirigir
					window.location = '../portal/UsuariosMisSelecciones.adl'+'?paramCarpeta='+this.orden;
				});
			}
			
			// si está abierta esta carpeta se muestra un template distinto
			if(isDefined("paramCarpeta")){
				this.activarElemento(paramCarpeta);
			}
		}
		this.tpl.append(panelPadre.elTexto, {});
		// nueva carpeta
		var elementoCampo = this.tplCampo2.append(panelPadre.elTexto, {menu1:localize('nuevaCarpeta')});
		var elCampo = Ext.get(elementoCampo);
		var padre = this;
		elCampo.on('click',function(){
			// redirigir
			Ext.MessageBox.prompt(localize('addlibrary'),localize('nombreCarpeta'), padre.nuevaCarpeta);
			
		})
		this.tpl.append(panelPadre.elTexto, {});
		this.tpl2.append(panelPadre.elTexto, {});
	}	
	
	this.activarElemento = function(ordenElemento){
	
		for (var i = 0; i < this.arrayCampos.length; i++) {
			var elementoImg = this.arrayCampos[i].select('img').elements[0];
			var extElement = Ext.get(elementoImg);
			if(ordenElemento==i){
				var divPadre = Ext.get(extElement.findParentNode("div"));
				elementoImg.src = "../img/carpetaonselecciones.gif";
				if (divPadre)
					divPadre.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
			}else{
				var divPadre = Ext.get(extElement.findParentNode("div"))
				elementoImg.src = "../img/carpetaoffselecciones.gif";
				if (divPadre)
					divPadre.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
			}
		}	
	}
	
	this.nuevaCarpeta = function(btn, text){
		this.storeNuevaCarpeta = new Ext.data.JsonStore({
		    url: '../portal/json/MantenimientoProyectos!nuevo.adl',
		    root: 'nombreCarpeta',
		    fields:[],
		    baseParams: {
		    	nombreCarpeta:text
       			}
		   	}
		);
		var padre = this;
		this.storeNuevaCarpeta.on("load", function () {
			if(this.reader.jsonData.error != ""){
				Ext.MessageBox.alert(localize("addlibrary"), this.reader.jsonData.error);
			}else{
				panelUsuario.iniciar(3);
			}
		});
		
		this.storeNuevaCarpeta.load();
	}		
}
/**
 * Contenido Panel Facturas
 */
function contenidoPanel3(panelPadre,anioFactura,obrasFactura){
	this.html = '<div class="separadorPanel"></div>\n';			
	this.htmlCampo1 = 	'<div class= "textoNormalPanel" style="padding-bottom:4px;padding-left:15px;"><a href="javascript:void(0)">'+localize('listaFacturas')+'</a></div>';
	this.htmlCampoAnio = 	'<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:4px;"><a href="javascript:void(0)">{menu2} </a></div>';
	this.tpl = new Ext.Template(this.html);
	this.tplCampo1 = new Ext.Template(this.htmlCampo1);
	this.tplCampoAnio = new Ext.Template(this.htmlCampoAnio);
	this.storeAnios = null;
	this.arrayCampos = new Array();
	this.anioFactura = anioFactura;
	this.obrasFactura = obrasFactura;
	
	this.pintar = function(){
		this.tpl.append(panelPadre.elTexto, {});
		this.elementoCampo1 = this.tplCampo1.append(panelPadre.elTexto, {});
	
		var numeroElementos = anioFactura.length;	
		for (var i = 0; i < numeroElementos; i++) {				
			var htmlCampo = this.tplCampoAnio.append(panelPadre.elTexto, {menu2:this.anioFactura[i]+' ('+this.obrasFactura[i]+')'});										
			this.arrayCampos[i] = Ext.get(htmlCampo);
			this.arrayCampos[i].orden=this.anioFactura[i];
			this.arrayCampos[i].on('click',function(){
				// redirigir
				window.location = '../portal/UsuariosFacturacion.adl'+'?paramAnio='+this.orden;
			});
		}
		
		// si está abierta esta carpeta se muestra un template distinto		
		if(isDefined("paramAnio")){
			this.activarElemento(paramAnio);
		}
	}	
	
	this.activarElemento = function(anioSelect){
		for (var i = 0; i < this.arrayCampos.length; i++) {
			var elementoAnio = this.arrayCampos[i];
			var anioAc = this.arrayCampos[i].orden;
			if(anioSelect == anioAc){
				if (elementoAnio)
					elementoAnio.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
			} else{
				if (elementoAnio)
					elementoAnio.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
			}
		}	
	}	
}


/**
 * Contenido Panel Descargas
 */
function contenidoPanel4(panelPadre,obrasDescarga,efectosDescarga){
	this.html = '<div class="separadorPanel"></div>\n';				
	this.htmlCampo1 = '<div class= "textoNormalPanel" style="padding-bottom:4px;padding-left:15px;"><a href="javascript:void(0)">'+localize('productosAdquiridos')+':</a></div>'+
					  '<div class= "textoNormalPanel" style="padding-bottom:0px;padding-left:15px;"><a href="javascript:void(0)">{menu1}</a></div>';
	this.htmlCampo2 = '<div class= "textoNormalPanel" style="padding-left:15px;padding-bottom:4px;"><a href="javascript:void(0)">{menu2}</a></div>';
	this.tpl = new Ext.Template(this.html);
	this.tplCampo1 = new Ext.Template(this.htmlCampo1);
	this.tplCampo2 = new Ext.Template(this.htmlCampo2);
	this.elementoCampo1 = null;
	this.elementoCampo2 = null;
	this.elCampo1 = null;
	this.elCampo2 = null;
	
	
	this.pintar = function(){
		this.tpl.append(panelPadre.elTexto, {});
		this.elementoCampo1 = this.tplCampo1.append(panelPadre.elTexto, {menu1:localize('musica')+' ('+obrasDescarga+')'});
		this.elementoCampo2 = this.tplCampo2.append(panelPadre.elTexto, {menu2:localize('efectos')+' ('+efectosDescarga+')'});
		
		this.elCampo1 = Ext.get(this.elementoCampo1);
		this.elCampo2 = Ext.get(this.elementoCampo2);
		var padre = this;
		this.elCampo1.on('click',function(){
			window.location = '../portal/UsuariosAreaDescarga.adl';
		});
		
		this.elCampo2.on('click',function(){
			window.location = '../portal/UsuariosAreaDescarga.adl?param2=2';
		});
		
		if(typeof tabMusicaParam2 != 'undefined'){
			if(tabMusicaParam2==2){
				this.activarElemento(2);
			}else{
				this.activarElemento(1);
			}
		}
	}	
	
	this.activarElemento = function(numeroElemento){
		if(numeroElemento==1){
			this.elCampo1.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
			this.elCampo2.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
		}
		if(numeroElemento==2){
			this.elCampo1.replaceClass('textoSeleccionadoPanel','textoNormalPanel');
			this.elCampo2.replaceClass('textoNormalPanel','textoSeleccionadoPanel');
		}
	}
}