PopupBase = Class.extend({

	config: {},

	setupHtml: function () {

		this.cnvKey = '#popup-canvas';
		this.bdrKey = '#popup-border';
		this.clsKey = '#popup-close';

		if ($(this.cnvKey).length == 0) {
			var baseHTML
			= '<div id="popup-canvas"></div>'
			+ '<div id="popup-border"></div>'
			+ '<img id="popup-close" src="/Content/Images/popup-close.png" />'
			;
			$(baseHTML).appendTo('body').css({ zIndex: 1000, position: 'absolute' }).hide();
		}
	},

	init: function (config) {

		this.setupHtml(); this.config = config || {};
		var popup = this;

		$(this.html).appendTo('body').css({ zIndex: 1000, position: 'absolute' }).hide();
		$(this.cnvKey).click(function () { popup.hide(); });
		$(this.clsKey).click(function () { popup.hide(); });
	},

	show: function (callback) {

		var winH = $(window).height();
		var winW = $(window).width();

		// - dialog panel:

		var dlg = $(this.dlgKey);

		var dlgW = dlg.outerWidth();
		var dlgH = dlg.outerHeight();
		var dlgT = dlg.offset().top;
		var dlgB = dlg.outerHeight() + dlgT;

		var scrollT = $('html').scrollTop() + $('body').scrollTop();

		var setT = (winH / 2) - (dlgH / 2) + scrollT;
		var setL = (winW / 2) - (dlgW / 2);

		dlg.css({ top: setT, left: setL });

		// - border panel:

		var bdr = $(this.bdrKey);

		bdr.height(dlgH + 24);
		bdr.width(dlgW + 24);

		bdr.css({ top: setT - 12, left: setL - 12 });

		// - close panel:

		var cls = $(this.clsKey);
		cls.css({ top: setT - 28, left: setL + dlgW - 8 });

		// - canvas panel:

		var cnv = $(this.cnvKey);
		cnv.css('top', scrollT);
		cnv.fadeTo(400, .5, function () {
			dlg.fadeIn();
			bdr.fadeTo(400, .45);
			cls.fadeIn();

			if (typeof (callback) == 'function')
				callback();

		});

		if (typeof (this.config.onshow) == 'function')
			this.config.onshow();
	},

	hide: function (callback) {

		var dlg = $(this.dlgKey); var cnv = $(this.cnvKey);
		var bdr = $(this.bdrKey); var cls = $(this.clsKey);
		var popup = this;

		bdr.fadeOut();
		cls.fadeOut();
		dlg.fadeOut(function () {
			dlg.removeClass('not-found-dialog-visible');
			dlg.hide();
			cnv.fadeOut(function () {
				if (typeof (callback) == 'function')
					callback();

				var config = popup.config;
				if (typeof (config.onhide) == 'function')
					config.onhide();
			});
		});
	}
});