var MooLayer = new Class({
	
	Implements: [Options, Chain],
	
	options: {		
		zIndex: 999,
		opacity: 0.4,
		padding: 0
	},
	
	initialize: function(selector, pos){		
		this.selector = $(selector);
		this.pos = pos;
		if(!this.selector) return;
		this.initLayer(selector);
	},
	
	initLayer: function(){
		var that = this;
		var selector = this.selector;
		var overlay = new Element('div', {
			'id': 'overlay'+ $random(0, 100),
			'styles':{
				'display': 'block',
				'visibility': 'visible',
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'width': window.getWidth(),
				'height': window.getScrollSize().y,
				'zIndex': that.options.zIndex,
				'backgroundColor': '#000',
				'opacity': 0
			}
		}).inject(document.body);	
		selector.inject(document.body);				
		overlay.fx = new Fx.Tween(overlay, {
			property: 'opacity',
			duration: 600			
		}).start(that.options.opacity);
		
		selector.setStyles({
			'opacity': 0,
			'position': Browser.Engine.trident4 ? 'absolute' : 'fixed',
			'top': Math.max(0, (window.getHeight() - selector.getCoordinates().height)/2 + (Browser.Engine.trident4 ? window.getScrollTop() : 0) - that.options.padding),
			'left': (window.getWidth() - selector.getCoordinates().width)/2,
			'zIndex': that.options.zIndex + 1
		});
		selector.fx = new Fx.Tween(selector, {
			property: 'opacity',
			duration: 600			
		}).start(1);		
		var scrollTop = window.getScrollTop();
		window.addEvent('scroll',function(){
			if(window.getHeight() < selector.getCoordinates().height){					
				selector.setStyle('position', 'absolute');
				selector.setStyle('top' , scrollTop);	
				return true;
			}
			else {	
				selector.setStyle('position', (Browser.Engine.trident4 ? 'absolute': 'fixed'));
				if(Browser.Engine.trident4){
					selector.setStyle('top', Math.max(0, (window.getHeight() - selector.getCoordinates().height)/2 + (Browser.Engine.trident4 ? window.getScrollTop() : 0) - that.options.padding));
				}
				else{
					selector.setStyle('top', Math.max(0, (window.getHeight() - selector.getCoordinates().height)/2 + (Browser.Engine.trident4 ? window.getScrollTop() : 0) - that.options.padding));
				}
			}
		});
		
		window.addEvent('resize', function(e){
			
			selector.setStyles({	
				'top': Math.max(0, (window.getHeight() - selector.getCoordinates().height)/2 + (Browser.Engine.trident4 ? window.getScrollTop() : 0) - that.options.padding),
				'left': (window.getWidth() - selector.getCoordinates().width)/2				
			});			
		});
		
		if(selector.getElement('.close')){
			selector.getElement('.close').removeEvents('click').addEvent('click', function(e){
				e.stop();
				selector.fx.start(0).chain(function(){
					selector.setStyle('top', -5000);
				});
				overlay.fx.start(0).chain(function(){
					overlay.destroy();
				});
			});
		}			
		new Gallery('popupgallery', that.pos);
	}
});


window.addEvent('load', function(){
	if($('popupgalleryLink'))
		$('popupgalleryLink').addEvent('click', function(e){
			e.stop();		
			new MooLayer('popupgallery', 0);
		});
	if($('popupgalleryItems'))
		$('popupgalleryItems').getElements('li').each(function(item, index){
			item.addEvent('click', function(e){
				e.stop();		
				new MooLayer('popupgallery', index);
			});
		});
	if($('popupgalleryItems2'))
		$('popupgalleryItems2').getElements('.intro').each(function(item, index){
			item.addEvent('click', function(e){
				e.stop();		
				new MooLayer('popupgallery', index);
			});
		});	
});