// JavaScript Document<SCRIPT>
var MiPopup = new Class({
	initialize: function(miHtml,ancho,alto,titulo){
		this.titulo=titulo;
		this.tamanoBody = window.getScrollSize();
		this.posScroll = window.getScroll();
		this.espacioDisponibleVentana = window.getSize();
		this.capaSombra = new Element("div", {'id': 'capasombra', 'style': 'width: ' + this.tamanoBody.x + 'px; height: ' + this.tamanoBody.y + 'px; ' });
		this.capaSombra.inject(document.body);
		var myFx = new Fx.Tween(this.capaSombra,{'duration': 300});
		myFx.start('opacity',0,0.8);
		
		this.contenido = new Element("div", {'id': 'contenidopopup'});
		this.contenido.set('html', "<div class=cuerpotextopopup>" + miHtml + "</div>");
		var titulo = new Element("div", {'id': 'titulopopup'});
		titulo.set('html', this.titulo);
		var cerrar = new Element("div", {'id': 'cerrarpopup'});
		cerrar.addEvent('click', function(){
			this.cerrar();
		}.bind(this));
		cerrar.inject(titulo,'top');
		titulo.inject(this.contenido,'top');
				
		this.capaPopup = new Element("div", {'id': 'capapopup', 'style': 'margin-left:-' + ancho/2 +'px; top:' + (this.posScroll.y + (this.espacioDisponibleVentana.y/2) - (alto/2)-15) +'px'});
		this.capaPopup.inject(this.capaSombra,'after');
		
		var myFx2 = new Fx.Tween(this.capaPopup,{'duration': 700});
		myFx2.start('width',4,ancho);
		myFx2.addEvent('complete', function(){
			var myFx3 = new Fx.Tween(this.capaPopup,{'duration': 700});
			myFx3.start('height',4,alto+30);
			myFx3.addEvent('complete', function(){
				this.contenido.inject(this.capaPopup);
				this.contenido.setStyle('opacity', 0);
				this.contenido.setStyle('display', 'block');
				var myFx4 = new Fx.Tween(this.contenido,{'duration': 600});
				myFx4.start('opacity',0,1);
			}.bind(this));
		}.bind(this));
		
		this.capaSombra.addEvent('click', function(){
				this.cerrar();
			}.bind(this)
		);
	},
	
	cerrar: function(){
		var myFx = new Fx.Tween(this.capaPopup,{'duration': 500});
		myFx.start('opacity',1,0);
		myFx.addEvent('complete', function(){
			var myFx2 = new Fx.Tween(this.capaSombra,{'duration': 500});
			myFx2.start('opacity',0.8,0);
			myFx2.addEvent('complete', function(){
				this.capaSombra.destroy();
				this.capaPopup.destroy();
			}.bind(this));
		}.bind(this));
	}
});
 
window.addEvent("domready", function(){
	$("popup").addEvent("click", function(e){
		e.stop();
		var htmlPopup = "<img src='images/plano.gif'><br>Direcci&oacute;n: Mz.36 Lt.3 Urb Previ-Callao";
		new MiPopup(htmlPopup, 560, 470, "Como llegar a ST-PER&Uacute;");
	});
});