// JavaScript Document

(function($) {

	$.nvsOverlay= { 
		show : function (options) { 
		// default settings	
			var defaults = {
				background: 'black',
				speed: 1500,
				transparancy: '0.5',
				callback: false
			};	
			options = $.extend(defaults, options);
		
		//hide elements that show through the overlay in IE 6
			if($.browser.msie && $.browser.version <= 6) {
				$('embed, object, select').css({ 'visibility' : 'hidden' });
			} 
			
		//get window/ document height		
			oheight = this.overlayHeight();
			
		//add overlay to the DOM
			$('<div></div>').attr({
							id: 'nvs_overlay' 
							})
						.css({
							position: 'absolute',
							top: 0,
							left: 0,
							height: oheight,
							width: '100%',
							zIndex: '9999',
							opacity: '0',
							background: options.background
							})
						.appendTo('body')
						.fadeTo(options.speed, options.transparancy, options.callback);
	
		// resize, reposition the overlay when window resizes or scrolls
			$(window).bind('resize', this.overlayResize);		},
			
		hide :	function () { 
			if($('#nvs_overlay')){
				$('#nvs_overlay').fadeTo('slow', 0, function () { 
					$('#nvs_overlay').remove(); 
					$('embed, object, select').css({ 'visibility' : 'visible' }); 
				});
			}
			$(window).unbind('resize', this.overlayResize);
		},
		
		overlayResize : function() {
			oheight = $.nvsOverlay.overlayHeight();
			$('#nvs_overlay').css({ width: 0, height: 0 });
			$('#nvs_overlay').css({	width: '100%', height: oheight });
		},
		
		overlayHeight : function () {
			if($(document).height() > $(window).height()) {
				oHeight = $(document).height()
			} else {
				oHeight = $(window).height();	
			}
			
			return oHeight;
		}
		
	}
	
})(jQuery);

(function($) {

	$.nvsPopup= { 
		
		show : function (options) { 
		// default settings	
			var defaults = {
				background: 'white',
				width: '250px',
				height: '250px',
				padding: '10px',
				callback: false
			};	
			
			options = $.extend(defaults, options);
		
		//add popup to the DOM	
			$('<div></div>').attr({
					id: 'nvs_popup_container' 
				}).css({
					position: 'absolute',
					top: $(document).scrollTop() + (($(window).height())/20),
					left: '0px',
					width: '100%',
					textAlign: 'center',
					zIndex: '10000'
				}).appendTo('body');
			
			$('<div></div>').attr({
					id: 'nvs_popup' 
				}).css({
					position: 'relative',
					background: options.background,
					width: options.width, 
					height: options.height,
					padding: options.padding,
					opacity: '0',
					margin: '0 auto'
				}).appendTo('#nvs_popup_container').fadeTo(1000, 1, options.callback)
			
			$(window).bind('scroll', this.popUpScroll);
		},
		
		//resize the popup
		resize : function (options,callback) {
			var defaults = {
				width: false,
				height: false,
				speed: 500
			};	
			
			options = $.extend(defaults, options);
			$('#nvs_popup').animate({width: options.width, height: options.height}, options.speed, callback); 
		},
		
		//reposition popup on scrolling		
		popUpScroll : function () { 
			$('#nvs_popup_container').stop();
			$('#nvs_popup_container').animate({top: $(document).scrollTop() + (($(window).height())/10)},500,"easeOutBack");
		}
		
	}
	
})(jQuery);



(function($) {
	
	$.fn.nvsAlbum = function(options) {
		var defaults = { 
		// Overlay config
	    	overlayBackground:		'black',
			overlayTransparancy: 	0.5,
			overlaySpeed:			500,
			popUpBackground:		'white',
			popUpBackgroundImage:	'/img/lightbox-ico-loading.gif',
			imageDetailsBackground: 'white',
			imageBtnPrev:			'/img/lightbox-btn-prev.gif',			// (string) Path and the name of the prev button image
			imageBtnNext:			'/img/lightbox-btn-next.gif',			// (string) Path and the name of the next button image
			imageBtnClose:			'/img/lightbox-btn-close.gif',
			imageArray:				[],
			activeImage:			0
		}
	
		var options = $.extend(defaults, options);
		var jQueryMatchedObj = this; 
				
		function _initialize() {
			// remove focus from clicked element
			this.blur();
			_start(this,jQueryMatchedObj);
			// stop following the anchor
			return false; 
		}
		
		
		function _start(objClicked,jQueryMatchedObj) { 
		// Reset total images in imageArray & activeImage
			options.imageArray.length = 0;
			options.activeImage = 0;

		// show the nvsOverlay
			$.nvsOverlay.show({ 
				background: options.overlayBackground, 
				transparancy: options.overlayTransparancy, 
				speed: options.overlaySpeed  
			});
		// show the nvsPopup
			$.nvsPopup.show({ 
				background: options.popUpBackground,
				callback: function() { 
					_draw_nvsAlbum(objClicked); 
				}
			}); 
		}
		
		function _draw_nvsAlbum(objClicked) {
		// add album image to nvs_popup
			$('<img>').attr({ id: 'nvs_album-image' }).css({
					position: 'relative', 
					opacity: 0
				}).appendTo('#nvs_popup');
			
		// add album navigation to nvs_popup
			$('<div>').attr({ id: 'nvs_album_navigation' }).css({ 
					position: 'absolute', 
					display: 'none',
					top: 0, 
					left: 0, 
					height: '100%', 
					width: '100%'
				}).appendTo('#nvs_popup');
			$('<div>').attr({ id: 'nvs_album_nav-left' }).css({ 
					background: 'url('+options.imageBtnPrev+') no-repeat left 20%', 
					left: 0, 
					float: 'left'
				}).appendTo('#nvs_album_navigation');
			$('<div>').attr({ id: 'nvs_album_nav-right' }).css({ 
					background: 'url('+options.imageBtnNext+') no-repeat right 20%', 
					right: 0, 
					float: 'right'
				}).appendTo('#nvs_album_navigation');
			
			$('#nvs_album_nav-left, #nvs_album_nav-right').css({ 
					cursor: 'pointer', 
					width: '49%', 
					height: '100%' });
															   
		// add image details to nvs_popup
			$('<div>').attr({ id: 'nvs_album_image-details'}).css({
					position: 'relative', 
					display: 'none',
					padding: '10px 0',
					textAlign: 'left',
					background: options.imageDetailsBackground
				}).appendTo('#nvs_popup');
		//	$('<div>').attr({ id: 'nvs_album_image-description'}).appendTo('#nvs_album_image-details');
			$('<div>').attr({ id: 'nvs_album_image-numbers'}).appendTo('#nvs_album_image-details');
			$('<img>').attr({ id: 'nvs_album_image-close', src: options.imageBtnClose }).css({ 
					position: 'absolute',
					display: 'none', 
					bottom: '12px',
					right: '12px',
					cursor: 'pointer'
				}).appendTo('#nvs_popup');


  			if ( jQueryMatchedObj.length == 1 ) {
				options.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
			} else {
				// Add an Array with the href and title atributess		
				for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
					options.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
				}
			}
			while ( options.imageArray[options.activeImage][0] != objClicked.getAttribute('href') ) {
				options.activeImage++;
			}

		// Show photo
			_add_events();
			image_to_view();
		}
		
		function image_to_view() {
		 	$('#nvs_popup').css({background: options.popUpBackground +' url('+ options.popUpBackgroundImage + ') no-repeat center center'});
			var objImagePreloader = new Image();
			objImagePreloader.onload = function() {
				$('#nvs_album-image').attr('src',options.imageArray[options.activeImage][0]);
				$('#nvs_popup').css({background: options.popUpBackground });
				_resize_nvs_popup(objImagePreloader.width,objImagePreloader.height);
				$('#nvs_album_image-numbers').html('Afbeelding '+(options.activeImage+1)+' van '+options.imageArray.length);
				//	clear onLoad, IE behaves strange with animated gifs otherwise
				objImagePreloader.onload=function(){};
			};
			objImagePreloader.src = options.imageArray[options.activeImage][0];	
		}
		
		function _resize_nvs_popup(w,h) {
			$.nvsPopup.resize({width: w, height: h, speed: 500 }, function(){ 
				$('#nvs_album-image').fadeTo(500, 1, function() { 
					$('#nvs_album-image').css("opacity", "");
					$('#nvs_popup').css({height: 'auto'});
				//	$('#nvs_album_image-description').html('Ruimte voor<br> een tekst m.b.t de foto');
					$('#nvs_album_image-details').slideDown(250, function() { 
						_addNavigation();
						$('#nvs_album_image-close').show();
						$('#nvs_album_navigation').show();
					});
				});
			});
		}		
		
		function _add_events() {
		// close album when nvs_overlay, nvs_popup_container or nvs_album_nav-close are clicked
			$('#nvs_overlay, #nvs_popup_container, #nvs_album_image-close').click( function () { _finish(); });
		// do nothing when clicked on the nvs_popup
			$('#nvs_popup').click( function() { return false; });
		}
		
		function _addNavigation() {	
			if($('#nvs_album-image').length > 0) {
				lbiOffset =  $('#nvs_album-image').position();

				$('#nvs_album_navigation').css({ 
					top: lbiOffset['top'], 
					left: lbiOffset['left'], 
					width: $('#nvs_album-image').width(), 
					height :$('#nvs_album-image').height() 
				});
				
				if(options.activeImage != ( options.imageArray.length - 1 ) ) { 
					$('#nvs_album_nav-right').show();
				} else {
					$('#nvs_album_nav-right').hide();	
				}
				if(options.activeImage != 0 ) { 
					$('#nvs_album_nav-left').show(); 
				} else { 
					$('#nvs_album_nav-left').hide(); 
				}
		
				$('#nvs_album_nav-right').click(function() {
					if ( options.activeImage != ( options.imageArray.length - 1 ) ) {
						_removeNavigation();
						options.activeImage = options.activeImage + 1;
						$('#nvs_album_navigation').hide();
						$('#nvs_album_image-details').slideUp(250, function () {
							$('#nvs_popup').css({height: $('#nvs_popup').height()});
							$('#nvs_album-image').fadeTo(250, 0, image_to_view);
						});
					}								  
				});
				$('#nvs_album_nav-left').click(function() { 
						if ( options.activeImage != 0 ) {
							_removeNavigation();
							options.activeImage = options.activeImage - 1;
							$('#nvs_album_navigation').hide();
							$('#nvs_album_image-details').slideUp(250, function () {
								$('#nvs_popup').css({height: $('#nvs_popup').height()});
								$('#nvs_album-image').fadeTo(250, 0, image_to_view);
							});
							
						}							  
				});
				/*
				$('#nvs_album_image-close').click( function () { 
					_finish(); 
					return false;
				});*/
				$(document).bind('keydown', _keyboard_action);
			}
		}
		
		function _removeNavigation() {
		
			$('#nvs_album_image-close').hide();
			$('#nvs_album_nav-left, #nvs_album_nav-right').unbind();
			$(document).unbind('keydown', _keyboard_action);
		}
		
		function _keyboard_action(objEvent) {
			switch(objEvent.keyCode) {
			// key ESC
				case 27: 	_finish(); 
							break;
			// key X
				case 88:	_finish();
							break;
			// arrow left (<-)
				case 37:	
							if ( options.activeImage != 0 ) {
								_removeNavigation();
								options.activeImage = options.activeImage - 1;
								$('#nvs_album_navigation').hide();
								$('#nvs_album_image-details').slideUp(250, function () {
									$('#nvs_popup').css({height: $('#nvs_popup').height()});
									$('#nvs_album-image').fadeTo(250, 0, image_to_view);
								});
							}
							break;
			// arrow right (->)
				case 39:	if ( options.activeImage != ( options.imageArray.length - 1 ) ) {
								_removeNavigation();
								options.activeImage = options.activeImage + 1;
								$('#nvs_album_navigation').hide();
								$('#nvs_album_image-details').slideUp(250, function () {
									$('#nvs_popup').css({height: $('#nvs_popup').height()});
									$('#nvs_album-image').fadeTo(250, 0, image_to_view);
								});
							}
							break;
				default: 	break;
			}
		}
		
		function _finish() {
			$(document).unbind('keydown', _keyboard_action);
			$('#nvs_popup_container').fadeTo('fast', 0, function () { 
					$.nvsOverlay.hide(); 
					$('#nvs_popup_container').remove() 
				});
		}
		
		return this.unbind('click').click(_initialize);
	}
	
})(jQuery);