portada = function(){
	
	var elLayout = Ext.DomHelper.append(document.body, {
		tag: "div", 
		id: "portada"
	}, true);
	var layout = new Ext.BorderLayout(elLayout, {
		monitorWindowResize: true,
		west: { initialSize: 234 },
		center: { autoScroll: false }//,
		//east: { initialSize: 190 }
	});	
	/* west */
	var elLayoutWest = Ext.DomHelper.append(document.body, {
		tag: "div"
	}, true);
	var layoutWest = new Ext.BorderLayout(elLayoutWest, {
		monitorWindowResize: true,
		north: { initialSize: 190, titlebar: true, autoScroll: true },
		center: { titlebar: true }
	});	
	layoutWest.add("north", new afiche());
	layoutWest.add("center", new galeria());
	layout.add("west", new Ext.NestedLayoutPanel(layoutWest, { autoCreate: true }));
	/* centro */
	var elLayoutCenter = Ext.DomHelper.append(document.body, {
		tag: "div"
	}, true);
	var layoutCenter = new Ext.BorderLayout(elLayoutCenter, {
		monitorWindowResize: true,
		center: {}
	});
	
	var elInnerLayoutCenter = Ext.DomHelper.append(document.body, {
		tag: "div"
	}, true);
	var innerLayoutCenter = new Ext.BorderLayout(elInnerLayoutCenter, {
		monitorWindowResize: true,
		center: {},
		south: { initialSize: 75 }
	});
	var panelCenterInnerLayoutCenter = innerLayoutCenter.add("center", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	var templatePanelCenterInnerLayoutCenter = new Ext.Template(
		'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF;">',
			'<tbody marginlef=50>',
				'<tr align="left">',
					'<td valign="top" style="height:100%; border:0px; padding-top:20px; padding-left:10px; background:url(images/Portada-s.jpg) no-repeat right;">',
						'<br>',
						'<p><font size=5><b><font color="000066">¡BIENVENID</font><font color="#DF0101">@</font><font color="000066">!</font></b></font></p>',
						'<HR width="62%" align=left size=1 color="#99CCFF"><br>',
						'<p align=justify><font size=2><font color="#000066">Te invitamos a </font><font color="#DF0101">levantarte y resplandecer</font><font color="#000066">, ',
						'en el encuentro nacional 2010<br>',
						'de la Federaci&oacute;n Nacional de J&oacute;venes Metodistas, FEJUMECh.<br><br>',
						'&Eacute;sta es tu oportunidad para unirte a los <b>j&oacute;venes</b> de Chile, a j&oacute;venes metodistas<br>',
						'del resto del mundo y a muchos j&oacute;venes de los colegios metodistas de nuestro pa&iacute;s.<br>',
						'Juntos vamos a disfrutar de momentos de <b>adoraci&oacute;n</b> a nuestro Dios, de <b>servicio</b> a &Eacute;l,<br>',
						'de <b>comuni&oacute;n</b> entre hermanos y <b>amigos</b>, de conocer otras culturas y muchas otras cosas.<br>',
						'Queremos ser agentes de <b>cambio</b> en la vida de los habitantes de <b>Valdivia</b> y t&uacute; puedes ser <br>parte importante.<br>',
						'Sin lugar a duda ser&aacute; la <b>experiencia</b> que anhelas vivir y un <b>tiempo</b> para darte cuenta que<br>',
						'<b>Dios</b> tiene algo especial para ti.</p></font><br><br>',
						'<p align=center><font size=2><b><i>"Lev&aacute;ntate y resplandece; porque ha venido tu luz,<br>',
						'y la gloria de Jehov&aacute; ha nacido sobre ti."</i></font><br>',
						'Isa&iacute;as 60:1<br></b></p>',
					'</td></tbody></table>'
	);
	templatePanelCenterInnerLayoutCenter.overwrite(panelCenterInnerLayoutCenter.getEl());
		
	var panelSouthInnerLayoutCenter = innerLayoutCenter.add("south", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	var templatePanelSouthInnerLayoutCenter = new Ext.Template(
		'<table style="width:100%; height:100%;"><tbody><tr align="center">',
					'<td id="quienessomos" class="selected-article" width="17%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-48/Comment.png">',
						'<div class="item-title"><span style="color:#000066;">Quiénes somos</span></div>',
					'</td>',
					'<td id="informacion" class="selected-article" width="17%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-48/Info.png">',
						'<div class="item-title"><span style="color:#000066;">Información</span></div>',
					'</td>',
					'<td id="programa" class="selected-article" width="17%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-48/Feb.png">',
						'<div class="item-title"><span style="color:#000066;">Programa</span></div>',
					'</td>',
					'<td id="valdivia" class="selected-article" width="17%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-48/Loading.png">',
						'<div class="item-title"><span style="color:#000066;">Valdivia</span></div>',
					'</td>',
					'<td id="colabora" class="selected-article" width="17%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-48/Profile.png">',
						'<div class="item-title"><span style="color:#000066;">Para colaborar</span></div>',
					'</td>',
					'<td id="inscripcion" class="selected-article" width="15%" style="cursor:pointer;">',
						'<img style="cursor:pointer;" src="images/Web-Application-Icons-Set/PNG-48/Modify.png">',
						'<div class="item-title"><span style="color:#000066;">Inscripción final</span></div>',
					'</td></tr></tbody></table>'
	);
	templatePanelSouthInnerLayoutCenter.overwrite(panelSouthInnerLayoutCenter.getEl());
	
	var quienessomos = Ext.get("quienessomos"); quienessomos.on("mouseout", this.cambiarColor, this); quienessomos.on("mouseover", this.cambiarColor, this); quienessomos.on("click", this.quienesSomos, this); var informacion = Ext.get("informacion"); informacion.on("mouseout", this.cambiarColor, this); informacion.on("mouseover", this.cambiarColor, this); informacion.on("click", this.informacion, this); var programa = Ext.get("programa"); programa.on("mouseout", this.cambiarColor, this); programa.on("mouseover", this.cambiarColor, this); programa.on("click", this.programa, this); var valdivia = Ext.get("valdivia"); valdivia.on("mouseout", this.cambiarColor, this); valdivia.on("mouseover", this.cambiarColor, this); valdivia.on("click", this.valdivia, this); var colabora = Ext.get("colabora"); colabora.on("mouseout", this.cambiarColor, this); colabora.on("mouseover", this.cambiarColor, this); colabora.on("click", this.colabora, this); var inscripcion = Ext.get("inscripcion"); inscripcion.on("mouseout", this.cambiarColor, this); inscripcion.on("mouseover", this.cambiarColor, this); inscripcion.on("click", this.inscripcion, this);

	layoutCenter.add("center", new Ext.NestedLayoutPanel(innerLayoutCenter, {
		autoCreate: true
	}));
	layout.add("center", new Ext.NestedLayoutPanel(layoutCenter, {
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));

	/*east*//*
	var elLayoutEast = Ext.DomHelper.append(document.body, {
		tag: "div"
	}, true);
	var layoutEast = new Ext.BorderLayout(elLayoutEast, {
		monitorWindowResize: true,
		center: { titlebar: true },
		south: { initialSize: 170, titlebar: true }
	});
	
	layoutEast.add("center", new muro());
	layoutEast.add("south", new encuesta());
	
	layout.add("east", new Ext.NestedLayoutPanel(layoutEast, {
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));*/

	portada.superclass.constructor.call(this, layout, {
		title: "Portada",
		autoCreate: true
	});
};

Ext.extend(portada, Ext.NestedLayoutPanel, {
		   
	ventanas: [],
	cambiarColor: function(e, target){
		var td = Ext.get(target.id);
		if(td){
			var color = "#ECF5FE";	
			if(e.type === "mouseover"){
				color = "#C3DAF9";
				td.applyStyles({ "backgroundColor": color });
				td.setOpacity(.3, false);
				td.setOpacity(1, { duration: .4 });
			};
			td.applyStyles({ "backgroundColor": color });
		};
	},
	quienesSomos: function(e, target){
		if(!this.ventanas["quienessomos"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				width: 500,
				height: 600,
				shadow: true,
				collapsible: false,
				draggable: false,
				autoTabs: true,
				resizable: false,
				title: "Quiénes somos",
				center: { autoCreate: true, autoScroll: true }
			});
			var layout = ventana.getLayout();
			var panelCentro = layout.add("center", new Ext.ContentPanel({ autoCreate: true }));
			var templatePanelCentro = new Ext.Template(

				'<table border="0" cellpadding="5" cellspacing="2" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png); color:000066;">',
					'<tbody>',
						'<td style="padding:20px 15px 20px 15px">',
							'<p style="font-size:14px; font-color:000066;">',
							'<b>Acerca del Encuentro Nacional de la FEJUMECh</b>',
							'<hr size=2 color="#C3DAF9"></hr></p><br>',
							'<p align=justify style="font-size:12px; text-indent:25;">',
							'La Federación de jóvenes Metodistas de chile, celebra su 63 congreso nacional los dias del 5-7 de febrero del 2010 en la ciudad de Valdivia, Región de los Ríos, y posteriormente a ello durante 7 días realiza  su encuentro nacional, con la concurrencia de todo joven Metodista de Chile que forma parte de las congregaciones de norte a Sur del país; es allí, donde  surge el proyecto de trabajo ” Levántate y resplandece” tanto para los jóvenes metodistas de Chile, como para los alumnos de los colegios Metodistas del pais y para los jóvenes de América Latina y el Caribe; es el profundo amor  por aquellos que aun no conocen a Jesús el Cristo, implantado por Dios en nosotros y el diagnostico de la situación actual, que afecta a bastos sectores vulnerable de la Región de los Ríos inspiran este proyecto, en donde los actores principales a saber:<br><br>',
							'1.- La juventud Metodista propiamente tal.<br>',
							'2.- La comunidad en general, presentan  la siguiente realidad:<br><br>',
								'a. La juventud Metodista propiamente tal: Hemos percibido cierta apatía e indiferencia en nuestra juventud,  el número de ligueños a disminuido considerablemente y cada vez resulta más complejo el trabajo para el liderazgo por la escasez de compromiso. Por ello vemos con urgencia la necesidad de hacer una actividad que impacte la vida de los jóvenes, con el objetivo de que se encienda en ellos la llama de pasión por el evangelio, y en definitiva, por los perdidos, que el lema de la  Iglesia para este periodo “abriendo espacios para la Misión”, a través de la Fejumech. sea también una realidad, y nuestra juventud, motivada por sus pares se disponga y entregue lo mejor de si para poner en practica lo que ha recibido por tantos años en su congregación local.<br><br>',
								'b. La comunidad en general: La ciudad de Valdivia en particular es una comuna golpeada por desastres naturales y por un alto índice de suicidio juvenil. Razón por la cual el programa incluye un trabajo en terreno, poniendo al servicio de los más necesitados todos los talentos y herramientas con que Dios ha dotado a quienes participarán del evento. Es allí, donde deseamos replicar a nivel de jóvenes el programa nacional Tres Días para Jesús.<br><br>',
								'El objetivo del proyecto es motivar a la juventud Metodista de Chile por medio del obrar del Espíritu Santo a ser lumbreras en sus entornos a través de la acción social y el evangelismo.<br>',
								'Este objetivo se llevará a cabo mediante el desarrollo de actividades tales como:<br><br>',
								'<ul style="font-size:12px; padding-left:25px;">',
								'<li>a) Talleres</li>',
								'<li>b) Foros</li>',
								'<li>c) Trabajos prácticos</li>',
								'<li> d) Actividades culturales y recreativas</li>',
								'<li>e) Impactos evangelísticos.</li></ul><br>',
								'<p align=justify style="font-size:12px;"><b>Beneficios esperados:</b></p><br>',
								'<ul style="font-size:12px;"><li>Formación y desarrollo de nuestra juventud Metodista de Chile, America latina y el caribe.</li>',
								'<li>Duplicar la cantidad de jóvenes activos que participan en Federación Integrar a muchos jóvenes secundarios de los colegios metodistas en la vida de la fejumech y las Iglesias locales.</li>',
								'<li>Creación de un programa efectivo de misiones a través del cual los jóvenes participantes en las distintas ligas a nivel nacional, puedan desarrollar, con el respaldo de la IMECH, su llamado misionero.</li>',
								'<li>Especialización de jóvenes en las distintas metodologías para la evangelización.</li></ul></p>',
						'</td>',
						//'<iframe src="reproductor/example_micro.html" width="301" height="16" align="middle" marginwidth="0" marginheight="0" scrolling="no"></iframe>',
					'</tbody>',
				'</table>'
			);
			templatePanelCentro.overwrite(panelCentro.getEl());
			ventana.addButton("Cerrar", ventana.hide, ventana);			
			this.ventanas["quienessomos"] = ventana;
		};
		this.ventanas["quienessomos"].show(target.id);
	},
	
	informacion: function(e, target){
		
		if(!this.ventanas["informacion"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				width: 300,
				height: 580,
				shadow: true,
				collapsible: false,
				draggable: false,
				autoTabs: true,
				resizable: false,
				autoScroll: true,
				title: "Información",
				center: { autoCreate: true }
			});
			var layout = ventana.getLayout();
			var panelCentro = layout.add("center", new Ext.ContentPanel({ autoCreate: true }));
			
			var templatePanelCentro = new Ext.Template(										   
				'<table border="0" cellpadding="5" cellspacing="2" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png); color:000066;">',
					'<tbody>',
						'<tr>',
							'<td style="padding:20px 15px 20px 15px;">',
								'<font size=2><font color="000066">',
								'<b>Fechas</b>',
								'<hr size=1 color="#C3DAF9"></hr>',
								'Congreso: 5-7 febrero de 2010<br>',
								'Campamento: 8-14 febrero de 2010<br><br>',
								'<b>Lugar</b>',
								'<hr size=1 color="#99CCFF"></hr>',
								'Valdivia, Chile &nbsp; &nbsp; &nbsp; &nbsp;[',
								'<a href="http://www.valdiviaonline.cl" target="_blank">Web</a>',
								' , ',
								'<a href="http://maps.google.cl/maps?rlz=1C1CHMB_esCL330CL330&sourceid=chrome&q=valdivia&um=1&ie=UTF-8&split=0&gl=cl&ei=QstFSv6PNoX7tge9oJy4Bg&sa=X&oi=geocode_result&ct=title&resnum=1" target="_blank">Google maps</a>',
								']<br><br>',
								'<b>Estadía</b>',
								'<hr size=1 color="#99CCFF"></hr>',
								'<ul>',
								'<li>La estadía incluye:<ol><li>-Alimentación<li>-Alojamiento<li>-Movilización<li>-Material<li>-Paseo<li>-Regalos</ol></li>',
								'</ul><br>',
								'<b>Costos</b>',
								'<hr size=1 color="#99CCFF"></hr>',
								'Los costos dependen de las actividades a las que asistas:<br><br>',
								'<table style="font-size:12; color:#000066;" border=0 width=220 align="center">',
									'<tr>',
										'<td><b>Actividad</b></td><td><b>Costo</b></td>',
									'</tr>',
									'<tr>',
										'<td>Campamento</td><td>$20.000</td>',
									'</tr>',
									'<tr>',
										'<td>Congreso <font size=1>(sólo delegados)</font></td><td>$6.000</td>',
									'</tr>',
									'<tr>',
										'<td>Ambos</td><td>$20.000</td>',
									'</tr>',
								'</table>',
								'</font></font>',
							'</td></tr></tbody></table>'
			);
			templatePanelCentro.overwrite(panelCentro.getEl());
			ventana.addButton("Cerrar", ventana.hide, ventana);
			this.ventanas["informacion"] = ventana;
		};
		this.ventanas["informacion"].show(target.id);
	},
	
	programa: function(e, target){	
		if(!this.ventanas["programa"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				width: 700,
				height: 500,
				shadow: true,
				collapsible: false,
				draggable: false,
				autoTabs: true,
				resizable: false,
				title: "Programa",
				center: { autoCreate: true }
			});
			var layout = ventana.getLayout();
			var panelCentro = layout.add("center", new programa());
			ventana.addButton("Cerrar", ventana.hide, ventana);
			this.ventanas["programa"] = ventana;
		};
		this.ventanas["programa"].show(target.id);
	},
	
	valdivia: function(e, target){
		if(!this.ventanas["valdivia"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				//(indicacion) margenes: w=28 h=77
				width: 524,
				height: 448,
				shadow: true,
				collapsible: false,
				draggable: false,
				buttonAlign: "center",
				autoTabs: true,
				resizable: false,
				title: "Fotos de Valdivia",
				center: { autoCreate: true }
			});		
			var layout = ventana.getLayout();
			var panelCentro = layout.add("center", new Ext.ContentPanel({
				autoCreate: true										  
			}));
			//var templates = photoTemplateArray("images/vald", 3, "jpg", "Valdivia");
			var templates = [
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/1.jpg" alt="Valdivia 1"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/2.jpg" alt="Valdivia 2"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/3.jpg" alt="Valdivia 3"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/4.jpg" alt="Valdivia 4"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/5.jpg" alt="Valdivia 5"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/6.jpg" alt="Valdivia 6"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/7.jpg" alt="Valdivia 7"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/8.jpg" alt="Valdivia 8"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/9.jpg" alt="Valdivia 9"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/10.jpg" alt="Valdivia 10"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/11.jpg" alt="Valdivia 11"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/12.jpg" alt="Valdivia 12"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/13.jpg" alt="Valdivia 13"></td></tbody></table>'
				),
				/*new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/14.jpg" alt="Valdivia 14"></td></tbody></table>'
				),*/
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/15.jpg" alt="Valdivia 15"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/16.jpg" alt="Valdivia 16"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/17.jpg" alt="Valdivia 17"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/18.jpg" alt="Valdivia 18"></td></tbody></table>'
				),
				/*new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/19.jpg" alt="Valdivia 19"></td></tbody></table>'
				),*/
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/20.jpg" alt="Valdivia 20"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/22.jpg" alt="Valdivia 22"></td></tbody></table>'
				),
				/*new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/23.jpg" alt="Valdivia 23"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/24.jpg" alt="Valdivia 24"></td></tbody></table>'
				),*/
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/25.jpg" alt="Valdivia 25"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/26.jpg" alt="Valdivia 26"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/27.jpg" alt="Valdivia 27"></td></tbody></table>'
				),
				/*new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/28.jpg" alt="Valdivia 28"></td></tbody></table>'
				),*/
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/29.jpg" alt="Valdivia 29"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/30.jpg" alt="Valdivia 30"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/31.jpg" alt="Valdivia 31"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/32.jpg" alt="Valdivia 32"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/33.jpg" alt="Valdivia 33"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/34.jpg" alt="Valdivia 34"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/35.jpg" alt="Valdivia 35"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/36.jpg" alt="Valdivia 36"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/37.jpg" alt="Valdivia 37"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/38.jpg" alt="Valdivia 38"></td></tbody></table>'
				),
				new Ext.Template(
					'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);"><tbody><td align="center" style="width:100%; height:100%;">',
						'<img src="images/vald/39.jpg" alt="Valdivia 39"></td></tbody></table>'
				)
			];
			
			var index = 0;
			var template = templates[index];
			template.overwrite(panelCentro.getEl());
			
			ventana.addButton({enableToggle: true, icon: "images/icons/arrow_left.png"},
				function(){
					index--;
					if(index < 0){ index = templates.length - 1; }	
					var template = templates[index];
					template.overwrite(panelCentro.getEl());//, null, true).setOpacity(0, { duration: .7, easing: "easeIn"});
				},
				ventana
			);
			//var botonNext = new Ext.Button(ventana.getEl(), { text: ">>", enableToggle: true });
			ventana.addButton({enableToggle: true, icon: "images/icons/arrow_right.png"},
				function(){			
					index++;
					if(index >= templates.length){ index = 0; }
					var template = templates[index];
					template.overwrite(panelCentro.getEl());
				},
				ventana
			);
			
			/*botonNext.on("click", 
				function(){
					index++;
					if(index >= templates.length){ index = 0; }
					var template = templates[index];
					template.overwrite(panelCentro.getEl());
				}
			});*/
			/*ventana.addKeyListener(39,
				function(){			
					botonNext.focus();
					//botonNext.fireEvent("click", null);
				},
				ventana
			);*/
			ventana.on("hide", function(){ var template = templates[0]; template.overwrite(panelCentro.getEl());}, this);
			this.ventanas["valdivia"] = ventana;	
		};
		this.ventanas["valdivia"].show(target.id);
	},
	
		colabora: function(e, target){
		if(!this.ventanas["colabora"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				width: 500,
				height: 600,
				shadow: true,
				collapsible: false,
				draggable: false,
				autoTabs: true,
				resizable: false,
				title: "Como colaborar",
				center: { autoCreate: true, autoScroll: true }
			});
			var layout = ventana.getLayout();
			var panelCentro = layout.add("center", new Ext.ContentPanel({ autoCreate: true }));
			var templates = [
				new Ext.Template(
	
					'<table border="0" cellpadding="5" cellspacing="2" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png); color:000066;">',
						'<tbody>',
							'<td style="padding:20px 15px 20px 15px">',
								'<p align="justify" style="font-size:14px; font-color:000066;">',
								'Take part in this event and support it with your economic contribution, make the dream of the Chilean Methodist Youth yours and help them to spread the gospel and grow in their faith. You can make your contribution by depositing into the saving account Nº 72163570077 of the Valdivia Branch of Banco Estado under the name of: Agrupación Juvenil para el desarrollo Social “Levántate y Resplandece” (Youth association for social development “Rise and Shine”)<br><br>Community organization: Rut. Nº 65.015543-2<br><br>For deposits from foreign countries the SWIFT is: BECH CL RM and the address of the bank is: Camilo Henríquez 562 Valdivia, XIV Region, Chile.<br><br>All those who want to get involved in this Congress and National Youth convention can make their deposits and send the receipt in order to keep track of the payments to  levántateyresplandece@imech.cl.<br><br>We will make a list including the ones who have make their contribution. Thanks for your enormous help, you are present in our prayers.',
								'</p>',
							'</td>',
							//'<iframe src="reproductor/example_micro.html" width="301" height="16" align="middle" marginwidth="0" marginheight="0" scrolling="no"></iframe>',
						'</tbody>',
					'</table>'
				),
				
				new Ext.Template(
				
					'<table border="0" cellpadding="5" cellspacing="2" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png); color:000066;">',
						'<tbody>',
							'<td style="padding:20px 15px 20px 15px">',
								'<p align="justify" style="font-size:14px; font-color:000066;">',
								'Hazte parte de este evento y respáldalo económicamente, haz tuyo el sueño de los Jóvenes Metodistas de Chile y ayúdalos a evangelizar y crecer. Puedes hacer tu aporte económico en: Cuenta de ahorro en el Banco Estado, Nº 72163570077, sucursal Valdivia a nombre de:<br>Agrupación Juvenil para el desarrollo Social “Levántate y Resplandece”<br><br>Organización comunitaria: Rut. Nº 65.015543-2<br><br>Para depósitos desde el extranjero el SWIFT es: BECH CL RM, la dirección del Banco es: Camilo Henríquez 562 Valdivia, Región XIV, Chile.<br><br>Quienes deseen hacerse parte de este Congreso y Encuentro Nacional pueden hacer sus depósitos en la cuenta antes señalada y enviar comprobante al correo electrónico: levantateyresplandece@imech.cl<br><br>Comunicaremos públicamente todos aquellos que mediante su apoyo hicieron posible esta actividad a quienes desde ya les agradecemos sus aportes.',
								'</p>',
							'</td>',
							//'<iframe src="reproductor/example_micro.html" width="301" height="16" align="middle" marginwidth="0" marginheight="0" scrolling="no"></iframe>',
						'</tbody>',
					'</table>'
				)
			];
			
			var template = templates[0];
			template.overwrite(panelCentro.getEl());
			
			ventana.addButton({enableToggle: true, text:"English"},//icon: "images/icons/arrow_left.png"},
				function(){	
					var template = templates[0];
					template.overwrite(panelCentro.getEl());//, null, true).setOpacity(0, { duration: .7, easing: "easeIn"});
				},
				ventana
			);
			//var botonNext = new Ext.Button(ventana.getEl(), { text: ">>", enableToggle: true });
			ventana.addButton({enableToggle: true, text: "Español"},
				function(){
					var template = templates[1];
					template.overwrite(panelCentro.getEl());
				},
				ventana
			);
			
			//ventana.addButton("Cerrar", ventana.hide, ventana);			
			this.ventanas["colabora"] = ventana;
		};
		this.ventanas["colabora"].show(target.id);
	},
	
	inscripcion: function(e, target){
		if(!this.ventanas["inscripcion"]){	
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				width: 300,
				height: 400,
				shadow: true,
				collapsible: false,
				draggable: false,
				autoTabs: true,
				resizable: false,
				title: "Inscripción",
				center: { autoCreate: true }
			});
			
			var layout = ventana.getLayout();	
			var panelCentro = layout.add("center", new Ext.ContentPanel({ autoCreate: true }));
			var templatePanelCentro = new Ext.Template(										   
				'<table border="0" cellpadding="5" cellspacing="2" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png); color:000066;">',
					'<tbody>',
						'<tr>',
							'<td style="padding:20px 15px 20px 15px;">',
								'<font size=2><font color="000066">',
								'<b>Inscripción final</b>',
								'<hr size=1 color="#C3DAF9"></hr>',
								'<br><p align="justify">Tu inscripción quedará completa una vez que realices el depósito en nuestra cuenta bancaria.</p><br><p align="justify">Para enviar la información de tu depósito debes registrarte, entrar a tu cuenta y pulsar el botón:</p>',
								'<br><p align="center"><img src="images/pago.png"></p>',
								'<br><p align="justify">Con esto quedas finalmente inscrito en el encuentro, formando parte del listado oficial de asistentes.  ¡No te demores! ¡Te esperamos! ¡Bendiciones! :D</p>',
								'</font></font>',
							'</td>',
						'</tr>',
					'</tbody>',
				'</table>'
			);
			templatePanelCentro.overwrite(panelCentro.getEl());
			ventana.addButton("Cerrar", ventana.hide, ventana);
			this.ventanas["inscripcion"] = ventana;
		};
		this.ventanas["inscripcion"].show(target.id);
	}	 
});