Contact = new Class({
    initialize: function(els){		
		this.initEls();
		
		this.form = $('formContact'); 
		this.overlay = new Element("div", {id: "formOverlay"})
		$(document.body).adopt(this.overlay)
		this.fx = {
			overlay: new Fx.Tween(this.overlay, {property: "opacity", duration: 500}).set(0),
			form: new Fx.Tween(this.form, {property: "top", duration: 500})
		};
		
		
    },

	initEls: function(){
		var list = $$('#listContact .elContact');
		list.each(function(el) { 
				
			el.addEvent("click", function() {
				this.form.getElement('#contentUser').set('html',el.get('html'));
				this.show();
						
			}.bind(this))	
			
			el.addEvents({
				mouseenter: function(){
					el.setStyles({'background':"#DBDBDB"});
				},
				mouseleave: function(){			
					el.setStyles({'background':"none"});
				}
			});
			
			
		}.bind(this))
    
    },
	show: function(el) {
	   
		//overlay
		this.overlay.setStyles({
			display:"block",
			top: 0,
			height: window.getScrollSize().y, 
			'background-position':"40% "+(window.getScrollTop() -30)+'px'
		});	
		
		
		//Form	
		var size = this.form.getSize();
		
		this.form.setStyles({
			visibility: "visible",
			width:550,
			left: (window.getWidth()/2)-300,
			top:size.y*-1
		});
		
		
		this.fx.overlay.start(1);	 
		this.fx.form.start(window.getScrollTop() + 50);		
		
	}, 
	
	hide: function() {
	   
		//overlay
		this.fx.overlay.start(0);	 
		
		//Form	
		var size = this.form.getSize();
		this.fx.form.start(size.y*-1);		
		
	}
	
	
});	   



window.addEvent('domready', function() {
	

	form_contact = new Contact();

});