var overlay = new Class({
				initialize:function() {
					
					// not visible
					this.visible = false;
					//this.html_content = new Element('div',{'id':'modal_box'});
					// ie initialy false
					this.ie = false;
					// overlay element
					this.overlay = new Element('div',{'id':'overlay'});
				},
				
				detect_browser: function() {
					if(Browser.Engine.trident4 ==  true) {
							this.ie = true;
					}
				},
				
				show:function() {
				
					this.detect_browser();			
					if(this.ie) {
							this.overlay_height = window.getHeight();
							this.overlay_top = window.getScrollTop();
							this.overlay.setStyle('position','absolute');
							this.overlay.setStyle('height',this.overlay_height);
							this.overlay.setStyle('top',this.overlay_top );
					
						window.addEvent('scroll',function() {
							this.update_overlay();
						
						}.bind(this))
						
						window.addEvent('resize',function() {
							this.update_overlay();
						}.bind(this))
					}
					else {
						this.overlay.setStyle('position','fixed');
					}
				
					
					this.overlay.injectAfter('wrapper_overlay');
					this.overlay.fade('hide');			
					this.overlay.tween('opacity', [0, 0.8]);
					this.visible = true;
					
					this.overlay.addEvent('click', function() {
						this.hide();
					}.bind(this));
					
				},
				hide:function() {
					this.overlay.fade('hide');
					this.visible = false;
					this.overlay.dispose();
					
					if($defined('modal')) 
								{
								 	$('modal').dispose();
								 }
					this.collect_garbage();
					
				},
				collect_garbage:function() {
					this.overlay.removeEvents('click');
					window.removeEvents();
				},
				
				update_overlay:function() {
				// ie 6 function
				
						this.overlay_top = window.getScrollTop(); this.overlay.setStyle('top',this.overlay_top );
						this.overlay_height = window.getHeight(); this.overlay.setStyle('height',this.overlay_height);
				}
				
			}
		)
	
	
var modal = new Class({
	initialize:function() {
			this.visible = false;
			this.modal = new Element('div',{'id':'modal'});
			this.html_content = null;
			
		},
	show:function(html_content) {
			
			this.modal.injectAfter('overlay');
			this.html_content = html_content
			this.modal.innerHTML = this.html_content;
			this.modal_top = window.getScrollTop() + window.getHeight() /3;
			this.modal.setStyle('top',this.modal_top);
			
			window.addEvent('scroll',function() {
											  
						this.update_modal();
			
			}.bind(this));	
		},
		
	update_modal:function() {
			this.modal_top = window.getScrollTop() + window.getHeight() /3;
			this.modal.setStyle('top',this.modal_top);
		},
		
	hide:function() {
			this.dispose();
		}
	
	
})