// JavaScript Document
/*
	 Lightbox escorpion
	 
*/

(function ($) {
	
	defaults = {
			minWidth  : 300,
			minHeight : 500,
			mTop      : 49,
			// mButton   : 40,
			mLeft     : 104,
			//mRight    : 129,
			href      : '',
			textClose : 'Cerrar'
		}
	

	$.fn.lightbox = function(options){
		
		
		var property = $.extend({}, defaults, options);			
		
		$(this).click(function(e){
		
			var url      =  ($(this).attr('href')) ? $(this).attr('href') : property.href;
		
			var title    =  ($(this).attr('title')) ? $(this).attr('title') : 'Escorpion'; 
		
			var lightbox = '<div id="lightboxTelon"></div>\
							<div id="lightbox">\
							<div id="contentIframe">\
									<iframe src="'+url+'" id="iframeLightbox"></iframe>\
							</div>\
							<div id="lightboxFooter">\
								<div id="lightboxTitle">'+title+'</div><a  href="#" id="lightboxClose">'+property.textClose+'</a>\
								<div class="clear"></div>\
							</div>\
						</div>';
						
				if (!$('#lightbox').size()){
						$('body').append(lightbox);
				}else{
					$('#iframeLightbox').attr("src",url);
				}
				
				$.fn.lightboxSize();
				
				e.preventDefault()
								
		})				
	}
	
	$(window).resize(function(){
		$.fn.lightboxSize();
	})

	$.fn.lightboxSize = function(options){
			
				var sizeWindow = Array($(window).width(),$(window).height());
				
				var property   = $.extend({}, defaults, options);			
				
				var wLightbox = sizeWindow[0]-(property.mLeft*2)
				var hLightbox = sizeWindow[1]-(property.mTop*2)
				
				var top = 0 , left = 0;
				 
				left = ((sizeWindow[0]/2) - (wLightbox /2))
				top  = ((sizeWindow[1]/2) - (hLightbox /2))
				
				var hContentIframe = 0, tmpH = 0;
				
				$('#lightboxTelon').css({
								  	width :  sizeWindow[0]+'px',
									height:  sizeWindow[1]+'px',
									opacity: 0.5
							   	})
				
				$('#lightboxTelon').fadeIn();
				
				hContentIframe =  (hLightbox- 56 - 30)
				
				$('#iframeLightbox').css({
								  	width :  '100%',
									height:  '100%'
							   	});
								
				$('#contentIframe').css({ height:  hContentIframe+'px'})				
									
				$('#lightbox').css({
								   'position':'fixed',
									top: top+'px',
									left : left+'px',
									width :  wLightbox+'px',
									height:  hLightbox+'px'
							   }).fadeIn()
					   
				 $('#lightboxClose, #lightboxTelon').unbind('click')
				 $('#lightboxClose, #lightboxTelon').click(function(){
							$('#lightbox').fadeOut('fast',function(){
									$('#lightboxTelon').fadeOut('fast',function(){
										$('#lightbox,#lightboxTelon').remove();
									});
							});
				 })
		}	

}(jQuery));