(function($) {
	/*	Modal plugin
		************
		Haal middels een ajax request de inhoud van de modal op.
		
		Gebruik
		*******
		Gebruik op a-tags (het href attribuut wordt gebruikt voor de te laden html)

			<a href="modalcontent.html" class="link_layer">Open modal</a>
		
		Options kan je op twee manieren invoeren.
		
		1. Via javascript
			<a href="modalcontent.html" class="link_layer">Open modal</a>
			
			$('a.link_layer').modal({
				width : 600,
				height : auto
			});
		
		2. Via het class attribuut
			<a href="modalcontent.html" class="link_layer {width : 600, height : auto}">Open modal</a>
			
			$('a.link_layer').modal()
		
		Callback
		********
		Na het laden van html in de modal kan er code gestart worden, bijvoorbeeld om events te hangen
		aan knoppen in de ingeladen html:
			
			$('a.link_layer').modal(function(){
				// Doe iets
			})
			
		of:
			
			$('a.link_layer').modal({width : 600},function(){
				// Doe iets
			})
		
		Als buiten de standaard .btnCloseModal er nog een knop moet zijn die ook de modal moet sluiten,
		bijvoorbeeld een "bewaar en sluit"-knop, dan moet dat op de volgende manier:
		
		$('a.link_layer').modal(function($modal,options){
			// Callback. Let op dat $modal en options in de argumenten staan.
			
			$modal.find('#btn_bewaar_en_sluit').click(function(){
				bewaarData();
				$.fn.modal.close_modal($modal,options)
			})
		});
	*/
	
	$.fn.modal = function(options,callback) {

		// Als alleen een functie als argument is gegeven, dan is dit de callback
		if (typeof options == 'function') {
			callback = options;
			options = {}
		}
		
		// build main options before element iteration
		var opts = $.extend({}, $.fn.modal.defaults, options);
		
		// iterate and reformat each matched element
		return this.each(function() {
			$this = $(this);
			
			// Maak #modalbg als die nog niet bestaat
			if ($('#modalBg').length == 0) $('<div id="modalBg"></div>').appendTo('body');
			
			// build element specific options
			var o = $.metadata ? $.extend({}, opts, $this.metadata()) : opts;
			
			// Hang het event aan de link
			$this.click(function(){
				// Maak .modal
				var $modal = $('<div class="modal" />');
				$modal.appendTo('body');
				
				// Stel de breedte in en verberg de modal voorlopig
				$modal.css({
					width : o.width,
					visibility : 'visible',
					opacity : 0
				});
				
				// Laad de content
				var href = $(this).attr('href').split('.'),
					suffix = href[href.length-1];
				
				if (suffix == 'jpg' || suffix == 'png' || suffix == 'gif') {
					// Het is een afbeelding
				} else {
					// Het is een HTML
					$modal.load($(this).attr('href'),function(){	// Klaar met laden.
						// Standaard events
						$modal.find('.btnCloseModal').click(function(){
							$.fn.modal.close_modal($modal,o)
							return false;
						})
					
						// Stel de hoogte van de modal in
						set_modal_height($modal,o)
					
						// Centreer de modal horizontaal
						$modal.css({
							marginLeft : Math.round(-($modal.width()/2))
						})
					
						// Body scrollbalk verbergen
						$('body').css('overflow','hidden');
						$('html').css('overflow','hidden');

						// Modal eerst visible maken, maar wel met opacity 0
						$modal.animate({opacity : 1},o.fadeSpeed);
						$('#modalBg').css({display : 'block', visibility : 'visible', opacity : 0});
					
						// Cufon z'n werk laten doen
						Cufon.replace('.modal h2', {fontFamily: 'Univers LT 57 Condensed'});
					
						// Fade in
						$('#modalBg').animate({opacity:o.bgOpacity},o.fadeSpeed)
					
						// Start de callback function als die er is
						if (callback) callback($modal,o);
					
						// Schaal modal background voor ie 6
						$.fn.modal.ie6();
					})
				};
				
				// Event op modalBg
				$('#modalBg').click(function(){
					$.fn.modal.close_modal($modal,o)
				})
				
				// Stop het default gedrag van de link
				return false;
			})
		});
	};
	
	// Private functions
	function set_modal_height($modal,o) {
		// De hoogte van de modal kan varieren. Als hij niet past binnen de viewport dan krijgt .modalMid een scrollbalk
		var vpHeight = $(window).height() - 40,
			topBottomHeight = $modal.find('.modalTop').height() + $modal.find('.modalBottom').height(),
			modalHeight = o.height;
			
		if (o.height == 'auto') {
			// Height moet zo groot zijn als ie nodig heeft (hoogte van de content)
			$modal.find('.modalMid').height('auto');
			
			// Totale hoogte die de content NODIG heeft (maar mischien niet krijg omdat de viewport te klein is)
			modalHeight = $modal.find('.modalMid').height() + topBottomHeight;
		}
		
		if (modalHeight > vpHeight) {
			// modalHeight moet kleiner
			modalHeight = vpHeight;
		}
		
		// Verschaal .modalMid in hoogte
		$modal.find('.modalMid').css({height : modalHeight - topBottomHeight})
		
		// In css class vastleggen dat er een scrollbalk getoond wordt.
		if ((modalHeight - topBottomHeight) < ($modal.find('.modalMid .content').height() + 20)) {
			// Speciaal voor IE7, waar de verdwenen scrollbalk nog steeds ruimte inneemt
			if (window.ie7) $modal.find('.modalMid > .content').width('auto');
			
			$modal.addClass('modalHasScroll');
		} else {
			$modal.removeClass('modalHasScroll');
			
			// Speciaal voor IE7, waar de verdwenen scrollbalk nog steeds ruimte inneemt
			if (window.ie7)  $modal.find('.modalMid > .content').width(o.width - 22);
		}
		
		// Centreer de modal verticaal
		$modal.css({marginTop : Math.round(-($modal.height()/2))})
	}
	
	// Public functions
	$.fn.modal.close_modal = function($modal,o) {
		// Fade .modal weg
		$modal.fadeOut(o.fadeSpeed, function(){
			// Vernietig .modal
			$modal.remove();
			
			// Voor IE6, ivm select-element z-index bug (zie css)
			$('body').removeClass('overlayTrue');
		});
		
		// Fade #modalBg weg
		$('#modalBg').fadeOut(o.fadeSpeed, function() {
			// Body scrollbalk tonen, maar niet als de userpanl de state_content_panel
			if (!$('#userPanel').hasClass('state_panel_content')) {
				$('body').css('overflow','');
				$('html').css('overflow','');
			};
		});
	};
	
	$.fn.modal.ie6 = function() {
		// Schaalt modal background voor IE 6
		if (window.ie6) {
			$('#modalBg').css({
				height : $(document).height()
			});
			
			$('.modal').css({
				marginTop: 0
			});
		};
	};
	
	// Default options
	$.fn.modal.defaults = {
		width : 300,
		height : 'auto',
		fadeSpeed : 500,
		bgOpacity : 0.5
	};
})(jQuery);