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(){
   $("acceso").addEvent("click", function(e){
      e.stop();
      var htmlPopup = "<br/><a href='http://www.mejorasmexico.com/webmail' target='_blank'><img src='imgs/btncorreo.gif' align='middle' /></a><br/><br/><a href='http://www.mejorasmexico.com/calendario' target='_blank'><img src='imgs/btncalendario.gif'/></a><br/><br/><a href='http://www.mejorasmexico.com/descargas.php' target='blank'><img src='imgs/btndescargas.gif'/></a><br/>";
      new MiPopup(htmlPopup, 361, 300, "<img src='imgs/accesoautorizado.gif'/>");
   });
});