(function($){
	$.fn.extend({
		modalBox: function(html_id, width, height) {//width and height are optional overrides	
			var platform = /(Win|Mac|Linux|iPhone)/.exec(navigator.platform)[0];
	
			var overlay = $("<div id='modal_overlay'></div>");
			var modalWindow = $("<div id='modal_window'></div>");	
					
			return this.each(function() {
				$(this).click(function(e) {					
					if (ie6()) { $("body","html").css({height: "100%", width: "100%"}); };	
					e.preventDefault();							
					overlay.css("opacity", 0.8);
					
					$("body").append("<div id='modal_load'></div>");									
					if (html_id == null){//Load the image
						$("body").append(overlay.click(function(){ modalHide(); }))
						overlay.fadeIn(150);			
						$(document).keydown(handleEscape);												
						var img = new Image();
						$(img).load(function(){
							var imageWidth = img.width / 2 ;
							var imageHeight = img.height / 2;
							modalWindow.css({
								"margin-left": -imageWidth,
								"margin-top": -imageHeight
							});	
							$("#modal_load").remove();
							modalWindow.append(img);
							$(this).addClass("modal_image");
							$("body").append(modalWindow);
							modalWindow.fadeIn(150);
						}).attr({ src: this.href }).click(function(){ modalHide(); });
					}else{// use hidden html from the page
						var html = $('#'+html_id);						
						var prev_element = html.prev();						
						$("body").append(overlay.click(function(){ modalHide(html, prev_element); }))
						overlay.fadeIn(150);						
						//$(document).keydown(function(e){
							//handleEscape(e, html, prev_element);
						//});
						if(width == null){
							html.show();
							width = html.width();
							html.hide();
						}
						if(height != null){
							modalPosition(width, height);
						}else{
							var padding = 20;
							if(jQuery.browser.msie && (jQuery.browser.version == 8)){padding = 45;}				
							if(jQuery.browser.safari){padding = 45;}					
							if(jQuery.browser.msie && (jQuery.browser.version == 7)){padding = 50;}
							height = html.height() + padding;
							modalPosition(width, height);
						}
						var html_clone = html.clone();												
						html.remove();						
						$("#modal_load").remove();						
						modalWindow.append("<div id='modal_close_button'></div><h1>"+$(this).attr('title')+"</h1>&nbsp;<div id='modal_content'>"+html_clone.html()+"</div><br style='clear:both;' />&nbsp;");								
						$("body").append(modalWindow);
						modalWindow.fadeIn(150);
						$('#modal_close_button').click(function(){
							modalHide(html_clone, prev_element);
						});
					}					
				});
			});
			
			function modalPosition(modal_width, modal_height) {	
				var offset = 0;	
				if(jQuery.browser.mozilla){ offset = 15; }// offset lowers 
				modalWindow.css({marginLeft: '-' + parseInt((modal_width / 2), 10) + 'px', width: modal_width + 'px', height: modal_height + 'px'});
				if ( !(ie6())) { modalWindow.css({marginTop: '-' + (parseInt((modal_height / 2), 10) + offset) + 'px'}); }
			}
			
			function ie6(){
				if(jQuery.browser.msie && (jQuery.browser.version <= 6)){return true;};
				return false;	
			}
			
			function modalHide(html, prev_element) {
				if(html != null){
				        if (!jQuery.support.boxModel)
					        height = null;
					prev_element.after(html);
				}
				$(document).unbind("keydown", handleEscape);
				modalWindow.hide().remove().empty();				
				overlay.fadeOut(function(){ $(this).remove(); });				
			}
			
			function handleEscape(e) {
				if (e.keyCode == 27) { modalHide(); }
			}
		}
	});
})(jQuery);