var Overlay = new Class({
  Implements: [Chain],

	getOptions: function() {
		return {
			name            : 'Overlay',
			zIndex          : 10000,
			BoxStyles       : { 'width': 500 },
			OverlayStyles   : { 'background-color': '#000', 'opacity': 0.4 },
			showDuration    : 200,
			showEffect      : Fx.Transitions.linear,
		   closeDuration   : 100,
			closeEffect     : Fx.Transitions.linear,
			moveDuration    : 750,
			moveEffect      : Fx.Transitions.Back.easeOut
		};
	},

	initialize: function(content,options) {
		this.Content = content;
		this.i=0;

		this.setOptions(this.getOptions(), options);

	 	//this.Content.addClass(this.options.name + '-BoxContenedor');

		this.Overlay	=	$('BoxOverlay').setStyles({
			 'opacity'           : 0,
			 'z-index'				: this.options.zIndex,
          'background-color'  : this.options.OverlayStyles['background-color'],
          'height'            : window.getScrollHeight() + 'px',
          'width'             : window.getScrollWidth() + 'px'
		  });

		this.Contenedor	=	$$('.' + this.options.name + '-BoxContent')[0];

		this.InBox			=	$$('.' + this.options.name + '-InBox')[0];

		this.Box				=	$$('.' + this.options.name + '-Box')[0].setStyles({
		  'display': 'none',
		  'z-index': this.options.zIndex + 2,
		  'width': this.options.BoxStyles['width'] + 'px'
		});

		this.Overlay.injectInside(document.body);
		this.Box.injectInside(document.body);

   	window.addEvent('resize', function() {
			  if(this.options.display == 1) {
				  this.Overlay.setStyles({
					  'height': window.getScrollHeight() + 'px',
					  'width': window.getScrollWidth() + 'px'
				  });
				  this.replaceBox();
			  }
		}.bind(this));
		
	 this.Box.addEvent('keydown', function(event) {
        if (event.key == 'esc'){
          this.display(0);
        }
    }.bind(this));
		
		window.addEvent('scroll', this.replaceBox.bind(this));
	},

  togFlashObjects: function(state) {
    /*
	  var hideobj	=	new Array("embed", "iframe", "object");
    for (y = 0; y < hideobj.length; y++) {
     var objs = document.getElementsByTagName(hideobj[y]);
     for(i = 0; i < objs.length; i++) {
      objs[i].style.visibility = state;
     }
    }
	 */
	 var hideobj	=	$$("embed", "iframe", "object").each(function(el){
		el.setStyle('visibility',state);
	 })
  },

	/*
	Property: display
		Show or close box
		
	Argument:
		option - integer, 1 to Show box and 0 to close box (with a transition).
	*/	
	display: function(option){
		if(this.Transition)
			this.Transition.cancel();				

		if(this.options.display == 0 && option != 0 || option == 1) {

      if(Browser.Engine.trident4)
        $$('select', 'object', 'embed').each(function(node){ node.setStyle('visibility','hidden'); });
        
      this.togFlashObjects('hidden');

		this.Overlay.setStyle('display', 'block');
		this.options.display = 1;
		
		/* Remover que cree el objeto siempre*/
		
		
		this.fireEvent('onShowStart', [this.Overlay]);

		

			this.Transition = new Fx.Tween(this.Overlay,{
				property: 'opacity',
				duration: this.options.showDuration,
				transition: this.options.showEffect,
				onComplete: function() {

				sizes = window.getSize();
				scrollito = window.getScroll();

				this.Box.setStyles({
					'display': 'block',
					'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt()
				});

				this.replaceBox();
			 }.bind(this)
  		  }).start(this.options.OverlayStyles['opacity']);
		  this.i++;
		}
		else {
      if(Browser.Engine.trident4)
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });

      this.togFlashObjects('visible');

      this.queue.delay(this.options.moveDuration,this);

			this.Box.setStyles({
				'display': 'none',
				'top': 0
			});
			//this.Content.empty();
			this.options.display = 0;

      if(this.i==1) {
        this.Transition = new Fx.Tween(this.Overlay,
          {
            property: 'opacity',
            duration: this.options.closeDuration,
            transition: this.options.closeEffect
          }
        ).start(0);
      }

		}

		if(this.i==1) this.callChain();
		
	},

	/*
	Property: replaceBox
		Move Box in screen center when brower is resize or scroll
	*/
	replaceBox: function() {
		if(this.options.display == 1) {
			sizes = window.getSize();
      scrollito = window.getScroll();

			if(this.MoveBox)
				this.MoveBox.cancel();
			
			this.MoveBox = new Fx.Morph(this.Box, {
				duration: this.options.moveDuration,
				transition: this.options.moveEffect
			}).start({

				'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt(),
				'top': (scrollito.y + (sizes.y - this.Box.offsetHeight) / 2).toInt()

			});
			
      //this.focusin.delay(this.options.moveDuration,this);
			
		}
	},

  queue: function() {
		this.i--;
		this.callChain();
	}

});

Overlay.implement(new Events, new Options);