var EleModal = new Class({
	
	initialize: function(link){
		
		this.open = false,
		this.overlay = new Element('div', {	'class': 'overlay' }).inject($(document.body),'bottom').setStyles({
			'width':$(window).getScrollSize().x,
			'height':$(window).getScrollSize().x,
			'opacity':0
		}).addEvents({
			'click': function(e){
				e = new Event(e).stop();
				this.close();					
			}.bind(this)
		});
		
		this.modalBox = new Element('div', {	'class': 'modalBox' }).inject($(document.body),'bottom').setStyles({'opacity':0	});
		this.modalInner = new Element('div', {	'class': 'modalInner' }).inject(this.modalBox,'bottom');
		this.closeBtn = new Element('div', {	'class': 'closeBtn' }).inject(this.modalBox,'top');
	
		var id = link.getProperty('href').toString();
		this.element = $(id.substring(1,id.length));
		this.morph = new Fx.Morph(this.modalBox,{transition:Fx.Transitions.Back.easeInOut, duration:1000});
		this.overlayMorph = new Fx.Morph(this.overlay,{duration:500});
		
		this.modalInner.adopt(this.element);
		
		this.closeBtn.addEvents({
			'click': function(e){
				e = new Event(e).stop();
				this.close();					
			}.bind(this)
		});
		
		link.addEvents({
			'click': function(e){
				e = new Event(e).stop();				
				this.showModal();				
			}.bind(this)
		});
		
		$(window).addEvents({
			
			'keydown': function(e){	
				if (e.key === 'esc' ) {
					this.close();
				}	
			}.bind(this),
			
			'resize': function(e){	
				
				if (this.open) {
					this.overlay.setStyles({
						'width': $(window).getScrollSize().x,
						'height': $(window).getScrollSize().x
					});
					this.resizeModal();
				}
	
			}.bind(this)
		});
	},
	
	showModal:function(){
		this.overlay.setStyles({
			'width':$(window).getScrollSize().x,
			'height':$(window).getScrollSize().x,
			'display':'block'
		});
				
		var top = ($(window).getScroll().y+($(window).getSize().y/2)) -(this.modalInner.getSize().y /2);
		if (top < 0) {top = 50;	}
				
		this.overlayMorph.start({
				'opacity':0.75
		}).chain(function(){
			this.modalBox.setStyles({'display':'block'});
			this.morph.start({
			    'height': this.modalInner.getSize().y, 
			    'width': this.modalInner.getSize().x,
				'left': ($(window).getSize().x/2) -(this.modalInner.getSize().x /2),
				//'top': top,
				'opacity':100 
			}).chain(function(){
				var top = ($(window).getScroll().y+($(window).getSize().y/2)) -(this.modalInner.getSize().y /2);
				if (top < 0) {top = 50;	}
				this.morph.start({'top': top});
			}.bind(this));
		}.bind(this));
		this.open = true;
	},
	
	resizeModal:function(){
		if (this.open) {
			var top = ($(window).getScroll().y+($(window).getSize().y/2)) -(this.modalInner.getSize().y /2);
			if (top < 0) {top = 50;	}
			
			
			this.morph.start({
				'height': this.modalInner.getSize().y,
				'width': this.modalInner.getSize().x,
				//'top': top,
				'left': ($(window).getSize().x / 2) - (this.modalInner.getSize().x / 2)
				
			}).chain(function(){
				var top = ($(window).getScroll().y+($(window).getSize().y/2)) -(this.modalInner.getSize().y /2);
				if (top < 0) {top = 50;	}
				this.morph.start({'top': top});
			}.bind(this));
		}
		
	},
	
	close:function(){
		this.morph.start({
			'top':-this.modalInner.getSize().y,
			'opacity':0 
		}).chain(function(){
			this.modalBox.setStyles({'display':'none'});
		}.bind(this));
		
		this.overlayMorph.start({
			'opacity':0
		}).chain(function(){
			this.overlay.setStyles({'display':'none'});
			this.open = false;			
		}.bind(this));
	}
});