(function($) {
	/*	Van Oord gallery plugin
		***********************
		Maakt van een <ul> een gallery.
		
		De code moet er zo uitzien:
		
		<ul class="thumbs">
			<li>
				<a href="gfx/temp/foto1.jpg"><img src="gfx/temp/foto1_thumb.jpg" alt="Boomgaard 21" /></a>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis fringilla lectus, in porta mauris pelle
				</p>
			</li>
			...
		</ul>
		
		$('ul.thumbs').gallery()
		
	*/
	
	$.fn.gallery = function(options) {

		// build main options before element iteration
		var opts = $.extend({}, $.fn.gallery.defaults, options);
		
		// iterate and reformat each matched element
		return this.each(function() {
			$this = $(this);
			
			// build element specific options
			var o = $.metadata ? $.extend({}, opts, $this.metadata()) : opts;
			
			// Maak #modalbg als die nog niet bestaat
			if ($('#modalBg').length == 0) $('<div id="modalBg"></div>').appendTo('body');
			
			// Maak .gallery
			var $gallery = $('<div class="gallery" />');
			$gallery.appendTo('body');
			$gallery.data('open', false)
			
			// Laad en bouw html voor de gallery
			$gallery.load('/C48_gallery.html', function() {	// Klaar met laden.
				
				// Voeg thumbs toe
				$gallery.find('.filmStrip ul').append($this.html());
				
				// Geef iedere thumb een id
				$gallery.find('.filmStrip ul li').each(function(i) {
					$(this).data('num', i)
				})
				
				$this.find('li').each(function(i) {
					$(this).data('num', i)
				})
				
				if($gallery.find('.filmStrip ul li').length < 7) {
					$gallery.find('.filmStrip ul').addClass('allFit')
				}
				
				/*	Events
					******/
				
				// OP DE PAGINA: Event voor thumb
				$this.find('a').click(function() {
					showImg($(this).parent().data('num'), $gallery, o);
					
					// Stop het default gedrag van de link
					return false;
				});
				
				// IN DE GALLERY MODAL: Event voor thumb
				$gallery.find('.filmStrip ul li a').click(function () {
					showImg($(this).parent().data('num'), $gallery, o);
					
					// Stop het default gedrag van de link
					return false;
				})
				
				// IN DE GALLERY MODAL: Sluit button
				$gallery.find('.btnCloseGallery').click(function(){
					$.fn.gallery.close_gallery($gallery,o)
					
					// Stop het default gedrag van de link
					return false;
				})
				
				// IN DE GALLERY MODAL: next buttons
				$gallery.find('.btnNextPhoto, .btnNextPhotoTop').click(function() {
					nextImg($gallery, o);
					
					return false;
				})
				
				// IN DE GALLERY MODAL: previous buttons
				$gallery.find('.btnPrevPhoto, .btnPrevPhotoTop').click(function() {
					prevImg($gallery, o);
					
					return false;
				})
				
				$gallery.find('.btnPrevPhotoTop, .btnNextPhotoTop').css({
					visibility:'visible',
					opacity:0
				})
				
				$gallery.find('.btnPrevPhotoTop, .btnNextPhotoTop').hover(function() {
					if (!window.ie) {
						$(this).stop().animate({opacity:1}, 250);
					} else {
						$(this).css({opacity:1})
					}
				}, function() {
					if (!window.ie) {
						$(this).stop().animate({opacity:0}, 250);
					} else {
						$(this).css({opacity:0})
					}
				})
				
				// Event op modalBg
				$('#modalBg').click(function(){
					$.fn.gallery.close_gallery($gallery,o)
				})
			})
		});
	};
	
	// Private functions
	function showImg(imgNum, $gallery, o) {
		// Is de gallery al wel zichtbaar?
		if ($gallery.data('open') == false) $.fn.gallery.open_gallery($gallery,o);
		
		// Geef juiste thumb een active state
		$gallery.find('.filmStrip li').removeClass('active');
		$gallery.find('.filmStrip li:eq('+imgNum+')').addClass('active');
		
		$gallery.find('.photo img').attr('src', $gallery.find('.filmStrip li:eq('+imgNum+') a').attr('href')).load();
		
		var $active = $gallery.find('li.active'),
			totalNum = $gallery.find('li').length,
			targetX = -$active.position().left + 290;
		
		if(!$gallery.find('.filmStrip ul').hasClass('allFit')) {
			// Scroll naar juiste thumb
			$gallery.find('.scrollTrack ul').animate({
				left:targetX
			}, 250);
		}
		
		// Update title
		$gallery.find('h2 small').text('(foto '+($active.data('num')+1)+' van '+totalNum+')')
		$gallery.find('h2 span').text($active.find('img').attr('alt'));
	
		// Update description
		$gallery.find('.photoDescription').html($active.find('p').html())
	}
	
	function nextImg($gallery, o) {
		var $nextThumb = $gallery.find('.filmStrip li.active').next();
		
		if ($nextThumb.length == 0) {
			showImg(0, $gallery, o);
		} else {
			showImg($nextThumb.data('num'), $gallery, o);
		}
	}
	
	function prevImg($gallery, o) {
		var $prevThumb = $gallery.find('.filmStrip li.active').prev();
		
		if ($prevThumb.length == 0) {
			showImg($gallery.find('.filmStrip li').length-1, $gallery, o);
		} else {
			showImg($prevThumb.data('num'), $gallery, o);
		}
	}
	
	// Public functions
	$.fn.gallery.open_gallery = function($gallery,o) {
		$gallery.data('open', true)
		
		// Eerst verbergen
		$gallery.css({
			opacity : 0,
			visibility: 'visible',
			display: 'block'
		}).animate({opacity : 1},o.fadeSpeed);	// En dan pas infaden
		
		// Modal bg ook infaden
		$('#modalBg').css({display : 'block', visibility : 'visible', opacity : 0}).animate({opacity:o.bgOpacity},o.fadeSpeed)
		
		// Body scrollbalk verbergen
		$('body').css('overflow','hidden');
		$('html').css('overflow','hidden');
	}
	
	$.fn.gallery.close_gallery = function($gallery,o) {
		
		$gallery.data('open', false)
		
		// Fade .modal weg
		$gallery.fadeOut(o.fadeSpeed, function(){
			$('body').css('overflow','');
			$('html').css('overflow','');
		});
		
		// Fade #modalBg weg
		$('#modalBg').fadeOut(o.fadeSpeed);
	};
	
	// Default options
	$.fn.gallery.defaults = {
		fadeSpeed : 500,
		bgOpacity : 0.5
	};
})(jQuery);