/* VSM Very Simple Modal 1.0 ==============================================
 * Updated: 03/10/2010
 *
 * Author: Gianluca Buoncompagni
 * URL: http://gianlucabuoncompagni.net
 * Required files: jQuery 1.3+ Core 
 * License: MIT License (http://www.opensource.org/licenses/mit-license.php)
 
 * HOW TO USE 
 Open a modal window by calling openModal() with the desired settings on click.
 
 	// search in page for a hidden div with id = modal and opens it
 	SCRIPT ------------------
	$('a').click(function(){
		$(this).openModal(); 					
	});
	
	// opens the #remoteDiv content found in ajax.html page, with a custom overlay color, a preload spinner and an additional close button. A callback function is triggered when the modal gets closed.	
	SCRIPT -----------------------------
	$('a').click(function(){
		$(this).openModal({
			ovColor: #fff,
			extPage: 'ajax.html',
			target: '#remoteDiv',
			spinner: 'img/preloader.gif',
			addClose: '#closeButton',
			callback: function(){
				alert('Modal closed!')
				}
			}); 					
	});
	
	// settings can be given to link attributes href and /or rel	
	HTML -------------------------
	<a href="#test">Open</a>		// opens #test found in page
	<a href="test.html">Open</a>	// opens #default found in remote page test.html
	<a href="test2.php" rel="#externalContent">Open</a> // opens #externalContent found in remote page test2.php
	SCRIPT -----------------------
	$('a').click(function(){
		$(this).openModal(); // opens different contents based on link attributes					
	});
	
	// modal window can be opened on page load by assigning it to a DOM element (ie. html, body, etc.)	
	SCRIPT -----------------------
	$('body').openModal({
		extPage:'test_remote.html',
		target:'#settings'
	});

	
 * DEFAULT SETTINGS:
 * ovColor     			// Overlay color (default: '#000')        
 * ovOpacity   			// Transparency level	(default: '0.5')
 * target					// DOM element to be loaded as modal content (default: '#modal')
 * closeOnOverlay			// Clicking on overlay div closes the modal (default: true)

 * OPTIONAL SETTINGS:
 * extPage         		// External page to be opened by remote call	         
 * spinner					// Preload image with path relative to document
 * addClose					// DOM element to be used as additional close trigger	   
 * prepend					// Hook to function to be called before opening modal
 * callback     			// Hook to function to be called once the content has been loaded
 * onModalClose			// Hook to function to be called once the modal has been closed
 * ========================================================================= */

(function($){	
   $.fn.openModal = function (sets) {
      settings = jQuery.extend({         
		   ovColor: '#000',     		
		   ovOpacity: '0.5',    		
		   defaultTarget: '#modal',	
		   target: '',  					
		   extPage: '',         		
		   spinner: '', 					
		   addClose: '',					
		   prepend: '',					
		   callback: '',     			
		   onModalClose: '',				
		   closeOnOverlay: true
      }, sets);
		
      // IE detect
      var ie6 = $.browser.msie && parseInt($.browser.version) == 6 && typeof window['XMLHttpRequest'] != "object";
      
      return this.each(function () {
		// INIT OVERLAY -------------------------------------------
		var href = $(this).attr('href');
	   var rel = $(this).attr('rel');
	   var bodyHeight = $('body').outerHeight();
	   var viewportHeight = $(window).height();
	   var viewportWidth = $(window).width();
	   var scrollTop = $('html').scrollTop();
	   var base = '<div id="vsmOverlay" /><div id="vsmHorizon" />';
	   var horizon = '#vsmHorizon';
	   var overlay = '#vsmOverlay';
		var closeBtn = '#vsmClose';

         if (ie6) { // ie6 					
            var globalPosition = 'absolute';
            var centralPos = scrollTop + (viewportHeight / 2);
         } else {
            var globalPosition = 'fixed';
            var centralPos = viewportHeight / 2;
         };
         $('body').append(base);
         $(overlay).css({
            'width': '100%',
            'height': bodyHeight + 'px',
            'z-index': '5000',
            'background': settings.ovColor,
            'position': globalPosition,
            'top': '0',
            'left': '0',
            'text-align': 'center',
            'filter': 'alpha(opacity=' + settings.ovOpacity * 100 + ')',
            '-khtml-opacity': settings.ovOpacity,
            '-moz-opacity': settings.ovOpacity,
            'opacity': settings.ovOpacity
         });
         $(horizon).css({
            'width': '100%',
            'height': '50px',
            'z-index': '5001',
            'position': globalPosition,
            'top': centralPos + 'px',
            'left': '0',
            'text-align': 'center',
            'overflow': 'visible',
            'background': 'url("'+ settings.spinner +'") 50% 50% no-repeat'
         });
         if(settings.spinner){
         	$(horizon).css({         
            'background': 'url("'+ settings.spinner +'") 50% 50% no-repeat'
         	});
      	};
         
         
         
         if(href != undefined && href != ''){  
         	if (href.length > 1 && href.substr(0, 1) == '#') {         	
	         	// local ----------------------
	         	// console.log('onclick local');
	         	if(settings.target == ''){
	         		settings.target = href;
	         	}	         		 
	         	loadLocal();       	
         	}else{
	         	// remote ----------------------	
	         	// console.log('onclick remote');
	         	settings.extPage=href;
	         	loadRemote();
         	} 
         }else{
         	// onload ----------------------         	
         	if(settings.extPage !=''){ 
         		// console.log('onload remote'); 
         	   loadRemote();    	
         	}else{
         		// console.log('onload local');
         		loadLocal();
         	}
         };
                  
         function loadRemote(){   
         	settings.mode='remote';      	 
	         if(settings.target ==''){
         		settings.target = settings.defaultTarget;
         		if(rel != undefined && rel != ''){
	         	settings.target = rel;
	         	};	  
         	}     
         	var remoteContent = settings.extPage+' '+settings.target;
         	// console.log(remoteContent);
			
         	$(horizon).load(remoteContent, function () {
            	showModal(settings.target);
            });
         }
         
         function loadLocal(){
         	settings.mode='local';
         	if(settings.target ==''){
         		settings.target = settings.defaultTarget;
         	}
         	$(settings.target).appendTo(horizon);
	         showModal(settings.target);
         }
         
         function showModal(el) {   
         	var modalHeight = $(el).outerHeight();         	
         	if (modalHeight == 0) {
               alert('Error: Can\'t find the content to open!');
               closeModal();
               return;
            };
            if (settings.prepend != '') {
               settings.prepend(); // prepend function call
            }
            setPosition(el);         	
            $(el).css({
               'margin': '0 auto',     
               'position': 'relative',
	        	'top': (-1)*(Math.abs(modalHeight/2)) + 'px',         
               'display': 'block',
               'opacity': '0'
            }).append('<a href="#" id="vsmClose">Close</a>').animate({
               'opacity': '1'
            }, 500, function () {
               if (!$.support.opacity) {
                  $(this).get(0).style.removeAttribute('filter'); // IE png Fix
               }
               if (settings.callback != '') {
                  settings.callback(); // richiamo la callback
               }
            });
         };
         
        function setPosition(el){
        	var modalHeight = $(el).outerHeight();
        	var modalWidth = $(el).outerWidth();
         	var deltaHeight = viewportHeight-modalHeight;
         	var deltaWidth = viewportWidth-modalWidth;
         	if(deltaHeight <=0 || deltaWidth <=0){ // if modal is taller or larger  than viewport put it on top and allow scroll  		
            	$(horizon).css({            
            		'position': 'absolute',
            		'top': Math.abs(modalHeight/2) + 'px'     
        		 });
     		}
        };
        
         // close 
         var closeTriggers = closeBtn;
         if(settings.closeOnOverlay==true){
         	closeTriggers += ', '+overlay
         }
         if(settings.addClose!=''){
         	closeTriggers += ', '+settings.addClose
         }
         $(closeTriggers).live('click', closeModal); 
                 
         function closeModal() {
         	if(settings.mode=='local'){
		    	$(settings.target).appendTo('body').hide(); 
         	}
			$(overlay+', '+horizon+', '+closeBtn).remove();
			// reset settings
			settings.target='';
			settings.extPage='';
			
			if (settings.onModalClose != '') {
				settings.onModalClose(); // callback
			}			
         	return false;
         };
         
      });
   };
   //=========================================
})(jQuery);