var ExinitEdelPageHeaderZoom = new Class({
	Implements: [Options, Events],
	initialize: function() {
		this.target = $('page_header_image');
		this.zoomPercent = 10;
		this.targetPropositions = new Hash({
			w:		this.target.width,
			wIn:	Math.ceil(this.target.width / 110 * this.zoomPercent),
			h:		this.target.height,
			hIn:	Math.ceil(this.target.height / 110 * this.zoomPercent),
			top:	this.target.getStyle('top')
		});
		this.morphFx = new Fx.Morph(this.target, {transition: Fx.Transitions.Sine.easeOut, duration: 500});
		this.assignMouseEvents();
	},
	zoomIn: function() {
		this.morphFx.cancel();
		this.morphFx.start({
			'height':	(this.targetPropositions.h) + 'px',
			'width':	(this.targetPropositions.w) + 'px',
			'top':		this.targetPropositions.top,
			'left':		'-' + (this.targetPropositions.wIn / 2) + 'px'
		});
	},
	zoomOut: function() {
		this.morphFx.cancel();
		this.morphFx.start({
			'height':	(this.targetPropositions.h - this.targetPropositions.hIn) + 'px',
			'width':	(this.targetPropositions.w - this.targetPropositions.wIn) + 'px',
			'top':		0,
			'left':		0
		});
	},
	assignMouseEvents: function() {
		this.target.addEvent('mouseenter', function() {
			this.zoomOut();
		}.bind(this));
		this.target.addEvent('mouseleave', function() {
			this.zoomIn();
		}.bind(this));
	}
});

var pageHeaderZoomEffect;
window.addEvent('domready', function() {
	pageHeaderZoomEffect = new ExinitEdelPageHeaderZoom();
});