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

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

	}, opt);

	this.Attach();
};

ImagePopup.sHelper = null;
ImagePopup.sHelperImg = null;
ImagePopup.sHelperTitle = null;

ImagePopup.InitStatics = function() {

	var isie6 = ($.browser.msie && $.browser.version.substr(0,1) < 7);
	
	if (ImagePopup.sHelper == null) {
		
		ImagePopup.sHelper = $("<div id='ImagePopup'><img /></div>")
			.css({
				position: isie6 ? 'absolute' : 'fixed',
				background: 'black',
				'z-index': 1000
			})
			.appendTo(document.body)
			.hide()
		;


		ImagePopup.sHelperImg = $('img', ImagePopup.sHelper);
		ImagePopup.sHelperTitle = $('p', ImagePopup.sHelper);
		
		ImagePopup.sHelperMask = $("<div id='mask'></div>")
			.css({
				background: 'black',
				opacity: 80 / 100,
				height: $(window).height(),
				width: $(window).width(),
				position: isie6 ? 'absolute' : 'fixed',
				left: 0,
				top: 0,
				'z-index': 500
			})
			.appendTo(document.body)
			.hide()			
		;
		
		ImagePopup.sHelperImg
			.css({
				margin: 5,
				border: '1px solid white',
				'z-index': 2000
			})
		;
		
		ImagePopup.sHelperTitle
			.css({
				'text-align': 'center', 
				color: 'white',
				'margin-top': 3,
				'margin-bottom': 7,
				'margin-left': 10,
				'margin-right': 10
			})
		;
	}
};

ImagePopup.prototype.Attach = function() {
	
	var me = this;

	this.el
		.click(function() { me.clickHandle(); })
	;
	
	$('#ImagePopup, #mask')
		.click(function() { me.cancelHandle(); return false; })
	;
};

ImagePopup.prototype.clickHandle = function() {

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

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

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

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


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

	return false;
};

ImagePopup.prototype.cancelHandle = function() {

	ImagePopup.sHelper.hide();
	ImagePopup.sHelperMask.hide();
};