var Modal = {
	container: false,
	makeContainer: function(){
		var modal = this;
		if(!this.container){
			$(document.body).append('<div id="modal_container"/>');
			this.container = $('#modal_container').get(0);
			$(this.container).hide();
			$(window).scroll(function(){
				modal.position();
			});
			$(window).resize(function(){
				modal.position();
			});
		}
	},
	clear: function(){
		$(this.container).fadeOut(150,function(){
			$(this).html();
			$('#overlay').fadeOut(200);
		});
	},
	draw: function(options){
		var modal = this;
		this.makeContainer();
		$(this.container).show();
		$(this.container).html('<div class="container">'+options.text+'</div>');
		this.position();
		$(document.body).trigger('modified');
		$(document.body).append('<div id="overlay"/>');
		$('#overlay').show().css({
			position: 'absolute', top: 0, left: 0, width: $(document).width()+'px', height: $(document).height()+'px', 'z-index': 19,
			'background-color': '#000000', opacity: 0
		}).animate({
		 	opacity: 0.6
		}, 200);
		
	},
	position: function(){
		var width  = $(this.container).width();
		var height = $(this.container).height();
		var scrollTop = $(window).scrollTop();
		var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();
		var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
		var left   = Math.round(viewportWidth / 2) - (width / 2);
		var top    = (Math.round(viewportHeight / 2) - (height / 2)) + scrollTop;
		if(top < 5) { top = 5; }
		if(left < 5) { left = 5; }
		$('#overlay').css({
			top: 0, left: 0, width: $(document).width()+'px', height: $(document).height()+'px'
		});
		$(this.container).css('left', left).css('top', top);
	},
	alert: function(string){
		this.draw({text: string});
	},
	show: function(string){
		this.draw({text: string});
	},
	showMap: function(string){
		this.draw({text: string});
	}
}

$('#modal_container .cancel, #overlay').onDetect(function(){
	$(this).click(function(){Modal.clear();});
});