(function($){
	$.fn.extend({
		modalPanel: function() {
			
			//Create our overlay object
			var overlay = $("<div id='modal-overlay'></div>");
			//Create our modal window
			var modalWindow = $("<div id='modal-window'></div>");
			var modalWindowclose = $("<a class=\"close-window\"></a>");
			var modalWindowtitulo = $("<div id='modal-titulo'><div class='titu_foto_txt_pq' style=float:right;display:block;background-color:#DC0067;font-size:x-small;font-color:#444;margin-top:-5px;padding:3px;z-index:103;>7777</div><div class='titu_foto_txt' align=left style=margin:2px;text-aling:left;></div><img src=estudioidea_pq.png align=right></div>");
			return this.each(function() {
				//Listen for clicks on objects passed to the plugin
				$(this).click(function(e) {
					
					if (typeof document.body.style.maxHeight === "undefined") { //if IE 6
						$("body","html").css({height: "100%", width: "100%"});
					}
					
					//Append the overlay to the document body
					$("body").append(overlay.click(function() { modalHide(); }))
					//Add a loader to our page
					$("body").append("<div id='modal-load'></div>");
					
					//Set the css and fade in our overlay
					overlay.css("opacity", 0.8);
					overlay.fadeIn(150);
					
					//Prevent the anchor link from loading
					e.preventDefault();
					
					//Activate a listener 
					$(document).keydown(handleEscape);	
					
					//Load the image
					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-100
						});	
						
						$("#modal-load").remove();
						modalWindow.append(img);

						
						$(this).addClass("modal-image");
						$(modalWindow).width(imageWidth*2);
						$(modalWindow).append(modalWindowtitulo);
						$("body").append(modalWindow);
						//alert(img.width+"..."+$("#modal-window").width());
						modalWindowclose.css({
						"margin-left": 0,
						"margin-top": 0
						});	
						//$(modalWindow).append(modalWindowtitulo);
						modalWindowtitulo.css({
						"margin-left": 0,
						"margin-top":0
						});	
					    $(modalWindow).append(modalWindowclose);
					    //alert(id_foto+"..."+contenido[id_foto]["txt_pie_foto"]);
						$(".titu_foto_txt_pq").html(contenido[id_foto]["txt_pie_foto"])
						$(".titu_foto_txt").html(contenido[id_foto]["txt_foto"])
					    $(".close-window").click(function(){modalHide();});
						modalWindow.fadeIn(150);
					})
					.attr({ src: this.href }).click(function() {
						modalHide();
					});
				});
			});
			
			//Our function for hiding the modalbox
			function modalHide() {
				$(document).unbind("keydown", handleEscape)
				var remove = function() { $(this).remove(); };
				overlay.fadeOut(remove);
			
				modalWindow
					.fadeOut(remove)
					.empty();
			}
			
			//Our function that listens for escape key.
			function handleEscape(e) {
				if (e.keyCode == 27) {
					modalHide();
				}
			}
		}
	});
})(jQuery);