/******************************************************************/
/*            Plugin JQUERY  --  Ventana modal_DW(v.0.1)          */
/******************************************************************/
/*                   Hecho el dia: 10/06/2010                     */
/*              Modificado el dia:                                */
/*  Este plugin, aplicado sobre cualquier capa, hará que la capa  */
/*  sea ocultada y clonada (para que no sea obstrusivo), de forma */
/*     que puede ser mostrada luego en forma de ventana modal     */
/******************************************************************/

/* LISTA BUGS POR ARREGLAR */
/* - Es recomendable que si hay mas de una modal, y una de ellas se tiene que mostrar al inicio, esta sea la primera! */
/* - Cada capa tiene su propia capa oscurecer, debido a la confusion cuando el efecto es distinto en cada una  */

(function($) {
	$.fn.modal = function(options) {
		var defaults = {
			nombre_ventana:		"modal1",	/* Nombre de la clase de la nueva ventana (Clon ventana original). Puede tener distinto css que la original indicando CSS distinto al original. */
			activador: 			null,		/* Link externo que hace que se active la ventana modal (def. null que indica que no hay activador). */
			mostrar:			false,		/* Flag que indica si es visible o no al cargar la página. */
			opacidad: 			0.5,		/* Opacidad que se aplica a la capa oscurecer (de '0' a '1'). */
			ancho:				500,		/* Ancho ventana clon por defecto. */
			cerrar: 			"a.cerrar",	/* Botón cerrar ventana (debe ir dentro de la ventana). */
			velocidad_efecto:	850,		/* Velocidad en ms de los efectos. */
			efecto:				1,			/* Efecto deseado para mostrar-ocultar elemento (2-Slide / 3-Show / Def. Fade). */
			ocultar_flash:		false,		/* Ocultar elementos flash. */
			animacion_resize:	false		/* Flag que indica si la hacer scroll o redimensionar pantalla la ventala se animara para colocarse. */
		};
		/* Extendemos nuevas opciones. */
		var options = $.extend(defaults, options);
		/* Devolvemos resultado (recorremos todos los elementos tipos). */
    	return this.each(function() {
			/* Objeto actual. */
			obj = $(this);
			/* Inicializamos variables. */
			var ventana			= options.nombre_ventana;
			var oscurecer		= "oscurecer_"+options.nombre_ventana;
			var activador 		= options.activador;
			var boton_cerrar	= options.cerrar;
			var body 			= obj.html();
			/* Definimos funciones: Mostrar / Ocultar. */
			/* Evento MOSTRAR diálogo. */
			var Mostrar = function(){
				/* Ocultamos elementos Flash si se ha indicado. */
				if (options.ocultar_flash) $('#Playerholder, #Player, embed, object').css({'visibility' : 'hidden'});
				/* Aplicamos efecto (según selección). */
				switch(options.efecto) {
					/* Efecto > Slides. */
					case 2:
						$('.' + ventana).slideDown(options.velocidad_efecto);
						$('#' + oscurecer).slideDown(options.velocidad_efecto);
						break;
					/* Efecto > Show. */
					case 3:
						$('.' + ventana).show(options.velocidad_efecto);
						$('#' + oscurecer).show(options.velocidad_efecto);
						break;
					/* Efecto > Fade. */
					default:
						$('.' + ventana).fadeIn(options.velocidad_efecto);
						$('#' + oscurecer).fadeIn(options.velocidad_efecto);
				}
			};
			/* Evento OCULTAR diálogo. */
			var Ocultar = function() {
				/* Aplicamos efecto (según selección). */
				switch(options.efecto) {
					/* Efecto > Slides. */
					case 2:
						$('.' + ventana).slideUp(options.velocidad_efecto);
						$('#' + oscurecer).slideUp(options.velocidad_efecto, function(){FlashOculta()});
						break;
					/* Efecto > Show. */
					case 3:
						$('.' + ventana).hide(options.velocidad_efecto);
						$('#' + oscurecer).hide(options.velocidad_efecto, function(){FlashOculta()});
						break;
					/* Efecto > Fade. */
					default:
						$('.' + ventana).fadeOut(options.velocidad_efecto);
						$('#' + oscurecer).fadeOut(options.velocidad_efecto, function(){FlashOculta()});
				}
			};
			/* Extendemos funcionalidad mostrar / ocultar para poder llamarla desde el objeto. */
			jQuery.fn.extend({
				mostrar: function(){Mostrar();},
				ocultar: function(){Ocultar();}
			});
			/* Evento ocultar elementos flash. */
			var FlashOculta = function () {
				/* Si se ha indicado ocultar o mostrar > mostramos. */
				if (options.ocultar_flash) $('#Playerholder, #Player, embed, object').css({'visibility' : 'visible'});
			}
			/* Ocultamos objeto. */
			obj.hide();
			/* Clonamos antes del body y borramos la capa > Insertamos la capa oscurecer antes de la clonada. */
			$('<div id="' +  oscurecer + '">&nbsp;</div>').prependTo('body');
			obj.clone().attr('class', ventana).insertAfter('#' + oscurecer);
			obj.remove();
			/* Apliacamos opacidad y estilos necesario a oscurecer. */
			$('#' + oscurecer).css({'position' : 'absolute', 'top' : '0','left' : '0','background-color' : "#000", 'width' : "100%", 'margin' : "0", 'height' : $("html").height(), 'opacity' : options.opacidad, 'z-index' : "99"});
			/* Ocultamos oscurecer. */
			$('#'+oscurecer).hide();
			/* Aplicamos estilos necesarios a la ventana CLONADA y posicionamos. */
			$('.' + ventana).css({'position' : 'absolute', 'margin' : "0", 'top' : (($(window).height() / 2 - $('.' + ventana).height() / 2) + $(window).scrollTop()) + "px", 'left' : "50%", 'width' : options.ancho , 'margin' : "0 0 0 -" + (options.ancho / 2) + "px", 'z-index' : '10000'});
			/* Mostramos activador si existe. */
			if (activador != null) $(activador).show();
			/* Mostramos cerrar que deberá estar oculto por definición en el CSS (no-intrusivo en sin javascript). */
			$(boton_cerrar).show();
			/* > Evento clic en cerrar > cierra ventana CLONADA. */
			$(boton_cerrar).click(function(){
				Ocultar();
				return(false);
			});
			/* > Evento activador (si existe) > recoloca la ventana y muestra la CLONADA. */
			if (activador != null) {
				$(activador).click(function() {
					$(window).resize();
					Mostrar();
					return(false);
				});
			}
			/* > Evento en oscurecer > ocultamos todo. */
			$('#' + oscurecer).click(function() {
				Ocultar();
				return(false);
			});
			/* Al redimensionar el navegador > centramos. */
			$(window).resize(function() {
				/* Obtenemos la mitad de la altura de la ventana. */
				var mitadAltura = $('.' + ventana).height() / 2;
				/* Le sumamos la cantidad de la página "scrolleada" > Si la anamazion_resize esta activada hacemos animación. */
				if (options.animacion_resize) {
					$('.' + ventana).animate({top: ($(window).height() / 2 - mitadAltura) + $(window).scrollTop() + "px"}, {duration : 300, queue : false});
				/* Sin animación > posicionamos. */
				} else $('.' + ventana).css('top' , (($(window).height() / 2 - mitadAltura) + $(window).scrollTop()));
				/* Posicionamos oscurecer. */
				$('#' + oscurecer).css('top', 0);
				/* Si el alto del document es menor al de la ventana > utilizamos windows.height. */
				if ($(document).height()>$(window).height()) $('#' + oscurecer).css('height', ($(document).height()));
				else $('#' + oscurecer).css('height', ($(window).height()));
			});
			/* Recolocamos en el centro > Si hay un scroll. */
			$(window).scroll(function() {
				$(window).resize();
			});
			/* Si se ha indicado mostrar > mostramos al abrir página. */
			if (options.mostrar == true) {
				$(window).resize();
				Mostrar();
			}
		});
	};
})(jQuery);