if ($chk(twopixels)==false) {
	var twopixels={};
};
twopixels.overlay=new Class({
	initialize: function() {		
		this.createBasicDOMElements();
		this.findAndActivateElements();
	},
	
	createBasicDOMElements: function() {
		this.overlay=new Element('div', {styles: {
			position: 'absolute',
			left: 0,
			top :0,
			display: 'none',
			backgroundColor: 'black'
		}}).inject(document.body);
		
		this.preview=new Element('div', {styles: {
			display: 'none',
			position: 'absolute',
			backgroundColor: 'white'
			
		}}).inject(document.body);
	},
	
	findAndActivateElements: function() {
		$$('a').filter(function(item){if ($chk(item.getProperty('rel'))){return item.getProperty('rel').contains(this.options.rel)};return false;}.bind(this)).each(this.activateElement.bind(this));
	},
	
	activateElement: function(item) {
		var rel = item.getProperty('rel');
		item.setProperty('rel','');
		var data = new RegExp(this.options.rel+'(\\[([0-9]+)x([0-9]+)\\])?').exec(rel);
		if ($chk(data[2])) {
			var width=data[2];
			var height=data[3];
			this.options.width=width;
			this.options.height=height;
		} else {
			var width=this.options.width;
			var height=this.options.height;
		};
		item.addEvent('click', this.startOverlay.bindAsEventListener(this, [item, width, height, item.getProperty('href')]));
	},
	
	startOverlay: function(event, item, width, height, href) {
		event = new Event(event);
		event.stop();
		
		var coordinates = item.getCoordinates();
		this.prepareOverlayElem();
		this.preparePreview(coordinates, width, height, href);
	},
	
	prepareOverlayElem: function() {
		this.overlay.setStyle('opacity',0);
		this.setOverlayPosition();
	},
	
	preparePreview: function(coordinates, targetWidth, targetHeight, href) {
		targetWidth=targetWidth.toInt()+this.options.marginLeft+this.options.marginRight;
		targetHeight=targetHeight.toInt()+this.options.marginTop+this.options.marginBottom;
		
		var targetLeft=((window.getWidth()-targetWidth)/2)+window.getScrollLeft();
		var targetTop=((window.getHeight()-targetHeight)/2)+window.getScrollTop();
		
		this.preview.setStyles({
			opacity: 0,
			display: 'block'
		});
		
		new Fx.Elements([this.overlay, this.preview], {onComplete: this.afterPreparePreview.bind(this, href)}).start({
			'0': {opacity: [0,this.options .opacity]},
			'1': {
				width: [coordinates.width, targetWidth],
				height: [coordinates.height, targetHeight],
				left: [coordinates.left, targetLeft.round()],
				top: [coordinates.top, targetTop.round()],
				opacity: [0,1]
				}
		});
	},
	
	afterPreparePreview: function(src) {
		this.addWindowEvents();
		this.overlay.addEvent('click', this.closeOverlay.bindAsEventListener(this));
		
		this.startCustomClass(src);
	},
	
	closeOverlay: function(event) {
		event = new Event(event);
		event.stop();
		
		this.overlay.removeEvents('click');
		window.removeEvent('scroll', this.windowScroll);
		window.removeEvent('resize', this.windowScroll);
		
		if ($chk(this.extendClose)) {
			this.extendClose();
		};
		
		this.preview.empty();
		
		new Fx.Elements([this.overlay,this.preview],{onComplete: function(){
			this.overlay.setStyle('display', 'none');
			this.preview.setStyle('display', 'none');
		}.bind(this)}).start({
			0:{opacity: [this.options.opacity,0]},
			1:{opacity: [1,0]}
		});
	},
	
	addWindowEvents: function() {
		this.windowScroll=this.windowChange.bindAsEventListener(this);
		window.addEvent('scroll', this.windowScroll);
		window.addEvent('resize', this.windowScroll);
	},
	
	windowChange: function(event) {
		this.scrollTimer=$clear(this.scrollTimer);
		this.scrollTimer=this.onChange.delay(200,this);
	},
	
	onChange: function() {
		
		this.setOverlayPosition();
		
		var targetLeft=((window.getWidth()-this.preview.getStyle('width').toInt())/2)+window.getScrollLeft();
		var targetTop=((window.getHeight()-this.preview.getStyle('height').toInt())/2)+window.getScrollTop();
		
		new Fx.Styles(this.preview, {transition: Fx.Transitions.Elastic.easeOut}).start({
			left: [this.preview.getLeft(), targetLeft.round()],
			top: [this.preview.getTop(), targetTop.round()]
		});
	},
	
	setOverlayPosition: function() {
		this.overlay.setStyles({
			width: window.getWidth()+'px',
			height: window.getHeight()+'px',
			top: window.getScrollTop()+'px',
			left: window.getScrollLeft()+'px',
			display: 'block'
		});
	},
	
	options: {
		width: 640,
		height: 480,
		marginTop: 5,
		marginBottom: 5,
		marginLeft: 5,
		marginRight: 5,
		rel: 'overlay',
		opacity: 0.9
	}
});