afiche = function(){
	
	var elLayout = Ext.DomHelper.append(document.body, {
		tag: "div", 
		id: "afiche"
	}, true);
	
	var layout = new Ext.BorderLayout(elLayout, {
		monitorWindowResize: true,
		center: { autoCreate: true },
		east:{ initialSize: 100 },
		south: { initialSize: 30 }
	});	
	
	var elLayoutCenter = Ext.DomHelper.append(document.body, {
		tag: "div"
	}, true);
	
	var layoutCenter = new Ext.BorderLayout(elLayoutCenter, {
		monitorWindowResize: true,
		center: {},
		south: {initialSize: 35}
	});
	
	var elInnerLayoutCenter = Ext.DomHelper.append(document.body, {
		tag: "div"
	}, true);
	
	var innerLayoutCenter = new Ext.BorderLayout(elInnerLayoutCenter, {
		monitorWindowResize: true,
		center: {},
		south: {initialSize: 22}
	});
	
	var panelCenterInnerLayoutCenter = innerLayoutCenter.add("center", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	
	var templatePanelCenterInnerLayoutCenter = new Ext.Template(
		'<table background="images/fondochico.jpg" cellspacing="0" style="width:100%; height:100%; font-size:12px; color:#000066">',
			'<tbody>',
				'<tr valign="center">',
					'<td align="center" style="padding:2px 2px 2px 2px;">',
						//'<p align=justify">ˇLa cuenta regresiva comenzó! Sólo quedan<br><br></p>',
						'F a l t a n<br>',
						'<font size="+3"><b>{dias}</b></font>',
						'<font size="+1"><br><b>d í a s</b></font>',
					'</td>',
				'</tr>',
			'</tbody>',
		'</table>'
	);
	templatePanelCenterInnerLayoutCenter.overwrite(panelCenterInnerLayoutCenter.getEl(), {
		dias: this.dias()
	});
	
	this.template = templatePanelCenterInnerLayoutCenter;
	this.panel = panelCenterInnerLayoutCenter;
	
	var panelSouthInnerLayoutCenter = innerLayoutCenter.add("south", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	
	var templatePanelSouthInnerLayoutCenter = new Ext.Template(
		'<table background="images/fondochico.jpg" cellspacing="0" style="width:100%; height:100%; text-align:center; font-size:16px; color: 000066;">',
			'<tbody>',
				'<td>',
					'<b>{counter}</b>',
				'</td>',
			'</tbody>',
		'</table>'
	);
	templatePanelSouthInnerLayoutCenter.overwrite(panelSouthInnerLayoutCenter.getEl(), {});
	
	this.templateCounter = templatePanelSouthInnerLayoutCenter;
	this.panelCounter = panelSouthInnerLayoutCenter;
	
	layoutCenter.add("center", new Ext.NestedLayoutPanel(innerLayoutCenter, { autoCreate: true }));
	
	var panelSouthLayoutCenter = layoutCenter.add("south", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	
	var templatePanelSouthLayoutCenter = new Ext.Template(
		'<table background="images/fondochico.jpg" cellspacing="0" style="width:100%; height:100%; font-size:12px; color:#000066;">',
			'<tbody>',
				'<tr valign="center">',
					'<td align="right" valign="center" style="width:60%; padding-right:4px;">',
						'S o m o s',
					'</td>',
					'<td align="left" valign="center" style="width:40%; padding-left:2px;">',
						'<font size="+2" ><b><div id="somos"></div></b></font>',//color="#DF0101"
					'</td>',
				'</tr>',
			'</tbody>',
		'</table>'
	);
	templatePanelSouthLayoutCenter.overwrite(panelSouthLayoutCenter.getEl());
	
	var panelEast = layout.add("east", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	var templatePanelEast = new Ext.Template(
		'<table style="width:100%; height:100%; border-spacing:0px; background:url(images/chrono.jpg);"><tbody><tr>',
			'<td backgroundstyle="height:100%; border:0px;"></td></tr>',
		'</tbody></table>'
	);
	templatePanelEast.overwrite(panelEast.getEl());
	
	var panelSouth = layout.add("south", new Ext.ContentPanel({
		autoCreate: true,
		fitToFrame: true,
		fitContainer: true
	}));
	var templatePanelSouth = new Ext.Template(
		'<table style="width:100%; height:100%; border-spacing:0px;"><tbody><tr align="center">',
					'<td id="a" class="selected-article" width="25%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-24/Add.png">',
					'</td>',
					'<td id="biglogo" class="selected-article" width="25%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-24/Logo.png">',
					'</td>',
/*					'<td id="c" class="selected-article" width="20%" style="cursor:pointer;">',
						'<img src="images/Web-Application-Icons-Set/PNG-24/Profile.png">',
					'</td>',*/
					'<td id="e" class="selected-article" width="25%" style="cursor:pointer;">',
					'<a href="http://www.facebook.com/FEJUMECH" target="new">',
						'<img src="images/Web-Application-Icons-Set/PNG-24/facebook2.png">',
					'</a></td>',
					'<td id="d" class="selected-article" width="25%" style="cursor:pointer;">',
					'<a href="https://twitter.com/FEJUMECh" target="new">',
						'<img src="images/Web-Application-Icons-Set/PNG-24/twitter.png">',
					'</a></td>',
					'</tr></tbody></table>'
	);
	templatePanelSouth.overwrite(panelSouth.getEl());
	
	var a = Ext.get("a");
	a.on("mouseout", this.cambiarColor, this);
	a.on("mouseover", this.cambiarColor, this);
	a.on("click", this.mostrarAfiche, this);
	
	var b = Ext.get("biglogo");
	b.on("mouseout", this.cambiarColor, this);
	b.on("mouseover", this.cambiarColor, this);
	b.on("click", this.mostrarLogo, this);
	
/*	var c = Ext.get("c");
	c.on("mouseout", this.cambiarColor, this);
	c.on("mouseover", this.cambiarColor, this);*/
	//a.on("click", this.quienesSomos, this);
	
	var d = Ext.get("d");
	d.on("mouseout", this.cambiarColor, this);
	d.on("mouseover", this.cambiarColor, this);
	//a.on("click", this.quienesSomos, this);
	
	var e = Ext.get("e");
	e.on("mouseout", this.cambiarColor, this);
	e.on("mouseover", this.cambiarColor, this);
	//e.on("click", this.facebook(), this);
	
	layout.add("center", new Ext.NestedLayoutPanel(layoutCenter, { autoCreate: true }));
	
	afiche.superclass.constructor.call(this, layout, {
		title: "Levántate y Resplandece",
		autoCreate: true
	});
	this.cnn = new Ext.data.Connection();
	this.somos();

	var task = new Ext.util.DelayedTask(this.counter, this);
	task.delay(100);
	this.task = task;
};

Ext.extend(afiche, Ext.NestedLayoutPanel, {

	ventanas: [],
	str: null,
	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 });
		};
	},

	dias: function(){
		//var ahora = new Date();
		//var dias = 34 - ahora.getDayOfYear();
		var dias = 0;

		return dias;
	},
	
	counter: function(){
		var ahora = new Date();
		var manana = ahora.clone();
		manana.setDate(1 + ahora.getDate());
		manana.setSeconds(0);
		manana.setMinutes(0);
		manana.setHours(0);
		var milis = manana.getElapsed(ahora);
		
		var rem1 = milis % 3600000;
		var rem2 = rem1 % 60000;
		var s = rem2 / 1000;
		var m = (rem1 - rem2)/60000;
		var h = (milis - rem1)/3600000;
		
		var sStr = String(s);
		if(s < 10){ sStr = "0" + sStr; }
		
		var mStr = String(m);
		if(m < 10){ mStr = "0" + mStr; }
		
		var hStr = String(h);
		if(h < 10){ hStr = "0" + hStr; }
		
		this.str = hStr + " : " + mStr + " : " + sStr;
		
		this.templateCounter.overwrite(this.panelCounter.getEl(), {
			counter: this.str
		});
		
		if(h==23 && m==59 && s==59){
			this.template.overwrite(this.panel.getEl(), {
				dias: this.dias()
			});
		}
		
		this.task.delay(100);
	},/*
	
	reloj: function(){
		var ahora = new Date();
		this.str = ahora.format("H:i:s");
		
		this.template.overwrite(this.panel.getEl(), {
			queda: this.str
		});
		this.task.delay(100);
	},*/
	
	somos: function(){
		this.cnn.request({
			url: "modulos/usuario/somos.php",
			method: "get",
			success: function(response, options){	
				Ext.get("somos").update(response.responseText);
			}
		});
	},
	
	aficheFocus: function(e, target){
		var afiche = Ext.get(target.id);
		if(afiche){
			if(e.type === "mouseover"){ afiche.dom.src = "images/miniaficheFocus.jpg"; };
			if(e.type === "mouseout"){ afiche.dom.src = "images/miniafiche.jpg"; };
			if(e.type === "click"){ afiche.dom.src = "images/miniaficheFocus.jpg"; };
		};
	},
	
	mostrarAfiche: function(e, target){
		if(!this.ventanas["afichebig"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ruta = "images/afiche" + String(2) + ".jpg";
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				//(indicacion) margenes: w=28 h=51
				width: 420,
				height: 607,
				shadow: true,
				draggable: false,
				collapsible: false,
				autoTabs: true,
				resizable: false,
				title: "Afiche oficial",
				center: { autoCreate: true }
			});					
			var layout = ventana.getLayout();	
			var panelCentro = layout.add("center", new Ext.ContentPanel({
				autoCreate: true										  
			}));
			//"' + variable + '"
			var templatepanelCentro = new Ext.Template(
				'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);" >',
					'<tbody>',
						'<tr>',
							'<td align="center" style="width:100%; height:100%;">',
								'<img src="' + ruta + '" title="Levántate y Resplandece - Afiche oficial">',
							'</td>',
						'</tr>',
					'</tbody>',
				'</table>'
			);	
			templatepanelCentro.overwrite(panelCentro.getEl());
			this.ventanas["miniafiche"] = ventana;
		};
		this.ventanas["miniafiche"].show(target.id);
	},
	
	mostrarLogo: function(e, target){
		if(!this.ventanas["biglogo"]){
			var el = Ext.DomHelper.append(document.body, {tag: "div"}, true);
			var ruta = "images/logoweb.jpg";
			var ventana = new Ext.LayoutDialog(el, {
				modal: true,
				//(indicacion) margenes: w=28 h=51
				width: 584,
				height: 420,
				shadow: true,
				draggable: false,
				collapsible: false,
				autoTabs: true,
				resizable: false,
				title: "Logo oficial",
				center: { autoCreate: true }
			});					
			var layout = ventana.getLayout();	
			var panelCentro = layout.add("center", new Ext.ContentPanel({
				autoCreate: true										  
			}));
			//"' + variable + '"
			var templatepanelCentro = new Ext.Template(
				'<table cellpadding="0" cellspacing="0" style="width:100%; height:100%; background:#EDF6FF; background-image:url(images/background.png);" >',
					'<tbody>',
						'<tr>',
							'<td align="center" style="width:100%; height:100%;">',
								'<img src="' + ruta + '" title="Levántate y Resplandece - Logo oficial">',
							'</td>',
						'</tr>',
					'</tbody>',
				'</table>'
			);	
			templatepanelCentro.overwrite(panelCentro.getEl());
			this.ventanas["biglogo"] = ventana;
		};
		this.ventanas["biglogo"].show(target.id);
	}
});