/// MxBox plugin 


(function($) {
	$.fn.MxBox = function(options, url) {
		
		var default_options = {
			width: 800,
			height: 'auto',
			opacity_0: "0", opacity_1: "0.3",
			autoCloseBtn: false
		};
		var options = $.extend(default_options, options);
		
		var background_css = {
			position: "fixed",
			"left": "0px", "right": "0px", "top": "0px", "bottom": "0px", //"height": "100%",
			"background": "#000000", "opacity": options.opacity_0,
			"z-index": "200"	
		};
		
		var centerer_css = {
			'position': 'absolute',
			"z-index": "201",
			'width': '100%', 'height': '100%',
			'text-align': 'center'
		};
		
		var block_css = {
			"position": "relative", 'z-index': '202',
			"display": "inline-block",
			"background-color": '#000000',
			"width": options.width+'px',
			"height": options.height+'px',
			"visibility": "visible",
			'margin-top': '120px',
			"border-radius" : '10px',
			'padding': '10px',
			'text-align': 'left'
		};
		
		return this.each(function() {
			o = $(this);
			
			bg = $(document.createElement('div'));
			bg.css(background_css);
			$('body').prepend(bg);
			bg.animate({"opacity": options.opacity_1});
			
			
			c = $(document.createElement('div'));
			c.css(centerer_css);
			c.insertAfter(bg);
			c.css('opacity', '0').animate({'opacity': '1'}, 100);
			
			
			
			var close = function() {
				bg.animate({'opacity': options.opacity_0}, function() {
					o.detach().css('display', 'none').appendTo('body');
					bg.remove();
					c.remove();
				});
				c.animate({'opacity': 0}, 200);
			};
			
			if(options.autoCloseBtn) {
				btn = $(document.createElement('div'));
				btn.attr('class', 'closeBtn');
				btn.click(close);
				btn.appendTo(o);
			}
			
			c.click(close);
			o.click(function() {return true;});
			$('.closeBtn', o).click(close);
			
			o.detach().css(block_css).appendTo(c);
		});
	};
})(jQuery);