(function($){

$.widget("dg.intpopup", {
	options: {
		animTime: 300,
		onShow: null,
		title: ""
	},
	element: null,
	titleElm: null,
	
	_create: function(){
		var me = this;
		this.element
			.addClass("intpopup-container")
			.append(
				this._getElementToShow()
			)
			.append(
				this.titleElm = $("<h1>")
					.addClass("Title")
					.text(this.options.title)
			)
			.append(
				$("<div>")
					.addClass("intpopup-close-btn")
					.click(function(){
						me.hide();
					})
					.text("Cerrar")
					
			)
			.intpopupmodal({
				animTime: this.options.animTime,
				onShow: function(){
					me._onModalShow();
				}
			})
		;
		
		this._onReady();
	},
	
	show: function(){
		this.element.intpopupmodal("show");
	},
	
	_showOnlyMe: function(){
		var me = this;
		this.element.fadeIn(this.options.animTime, function(){
			me.__onShow();
		});
	},
	
	hide: function(){
		//this.element.fadeOut(this.options.animTime);
		this._onHide();
		this.element.intpopupmodal("hide");
	},
	
	_onModalShow: function(){
		this._showOnlyMe();
	},
	
	__onShow: function(){
		this._onShow();
		if($.isFunction(this.options.onShow))
			this.options.onShow.call(this.element);
	},
	
	
	// HOOK´s
	_onReady: function(){},
	_onShow: function(){},
	_onHide: function(){},
	
	_getElementToShow: function(){
		return this.element.children();
	}

});

$.widget("dg.intpopupmodal", {
	options: {
		animTime: 300,
		onShow: null
	},
	element: null,
	modal: null,
	
	_create: function(){
		var pmodal = $("body > #dg-intpopup");
		if(pmodal.length == 0){
			this.modal = $("<div>")
				.addClass("dg-intpopup")
				.appendTo("body")
				.css({
					position: "fixed",
					top: 0,
					left: 0
				})
			;
		}else
			this.modal = pmodal;

		this.element
			.appendTo("body")
			.hide(0)
			.css({
				position: "fixed",
				zIndex: 20001
			})
		;

		var me = this;
		$(window).resize(function(){
			me._resize();
		});
		this._resize();
		
		this.show();
	},
	
	_resize: function(){
		this.modal.css({
			width: $(window).width(),
			height: $(window).height(),
			zIndex: 20000
		});
		
		this.recenterObj();
	},
	
	recenterObj: function(){
		var wW = $(window).width();
		var wH = $(window).height();
	
		this.element.css({
			left: Math.round( (wW - this.element.outerWidth() ) / 2),
			top: Math.round( (wH - this.element.outerHeight() ) / 2)
		});
	},
	
	show: function(){
		var me = this;
		this.modal.fadeIn(this.options.animTime, function(){
			if(!me.element.is(":visible"))
				me.element.fadeIn(me.options.animTime);
			if($.isFunction(me.options.onShow)){
				me.options.onShow.call(me.element);
			}
		});
		
	},
	
	hide: function(){
		if(this.element.is(":visible")){
			var me = this;
			this.element.fadeOut(this.options.animTime, function(){
				me.modal.fadeOut(me.options.animTime);
			});
		}else
			this.modal.fadeOut(this.options.animTime);
	},

});

}(jQuery))
