window.addEvent("domready", function() {
	var globaZ = 10;
	var ImageEnlarger = new Class({
		
		initialize: function(el) {
			this.sourceWidth = parseInt(el.width, 10);
			this.sourceHeight = parseInt(el.height, 10),
			this.ratio = this.sourceWidth / this.sourceHeight;
			this.smallWidth = this.sourceWidth / 1.4,
			this.smallHeight = this.smallWidth / this.ratio,
			this.offsetLeft = (this.sourceWidth - this.smallWidth) / 2,
			this.offsetTop = (this.sourceHeight - this.smallHeight) / 2;
			this.fx =  new Fx.Styles(el, {duration: 200});
				
			this.fx.element.setStyles({
				position: "absolute",
				left: 0,
				top: 0,
				zIndex: globaZ++,
				width: this.smallWidth,
				height: this.smallHeight
			}).addEvents({
				mouseover: this.makeBig.bind(this),
				mouseout: this.makeSmall.bind(this)
			});
		},
		makeBig: function() {
			this.fx.stop();
			this.fx.element.setStyle("z-index", globaZ++).addClass("open");
			this.fx.start({
				width: this.sourceWidth,
				height: this.sourceHeight,
				top: -this.offsetTop,
				left: -this.offsetLeft
			});
		},
		makeSmall: function() {
			this.fx.stop().start({
				width: this.smallWidth,
				height: this.smallHeight,
				top: 0,
				left: 0
			}).chain(function() {
				this.fx.element.removeClass("open");
			}.bind(this));
		}
		
	});
	
	
	$$('.img-item img').each(function(el) {
		new ImageEnlarger(el);
	});
});