ImageEnlarger = function(el, opt) {
	
	ImageEnlarger.InitStatics();
	
	this.el = $('img', el);
	this.a = $(el);

	this.opt = $.extend({
		
		width: 	300,
		height:	180 

	}, opt);

	this.Attach();
};

ImageEnlarger.sHelper = null;
ImageEnlarger.sHelperImg = null;
ImageEnlarger.sHelperTitle = null;

ImageEnlarger.InitStatics = function() {
	
	if (ImageEnlarger.sHelper == null) {
		
		// ImageEnlarger.sHelper = $("<div id='imageEnlarger'><img /><p>Titolo dell'immagine</p></div>")
		ImageEnlarger.sHelper = $("<div id='imageEnlarger'><img /></div>")
			.css({
				position: 'absolute',
				background: 'black',
				'z-index': 10
			})
			.appendTo(document.body)
			.hide()
		;

		ImageEnlarger.sHelperImg = $('img', ImageEnlarger.sHelper);
		ImageEnlarger.sHelperTitle = $('p', ImageEnlarger.sHelper);
		
		ImageEnlarger.sHelperImg
			.css({
				margin: 5,
				border: '1px solid white'
			})
		;
		
		ImageEnlarger.sHelperTitle
			.css({
				'text-align': 'center', 
				color: 'white',
				'margin-top': 3,
				'margin-bottom': 7,
				'margin-left': 10,
				'margin-right': 10
			})
		;
	}
};

ImageEnlarger.prototype.Attach = function() {
	
	var me = this;
	
	this.el
		.mouseover(function() { me.mouseoverHandle(); })
		.mouseout(function() { me.mouseoouHandle(); })
	;
};

ImageEnlarger.prototype.mouseoverHandle = function() {

		// determina se visualizzare o meno
		// il titolo dell'immagine

	var title = this.opt.caption;
	if (title == '')
		ImageEnlarger.sHelperTitle.hide();
	else
		ImageEnlarger.sHelperTitle.show().html(title);

	var p = this.el.offset();
	
	ImageEnlarger.sHelperImg
		.attr('src', this.opt.src)
		.css({
			width: this.opt.width, 
			height: this.opt.height
		})
	;

	var
		top = $(window).scrollTop() + 20;
		left = ($(window).width() - this.opt.width) / 2,
		hh = ImageEnlarger.sHelper.height();


	ImageEnlarger.sHelper
		.css({
			top:	top,
			left:	left
		})
		.show()
	;
};

ImageEnlarger.prototype.mouseoouHandle = function() {
	
	ImageEnlarger.sHelper.hide();
};