/**
 * NVS_ALBUM
 * 
 * @author		Sebastiaan Smid <sebastiaan@netvlies.nl>
 * 
 * Optional parameters:
 * @category		jQuery Plugin
 * @package			Netvlies Album
 * @version			1.0
 * @requires		nvs_popup.js, nvs_overlay.js, jquery-easing.js
 *
 */
 
 (function($) {
	
	/**
	* Shows the album in a popup on an overlay
	* Mixed object: 
	*		overlayBackground:		(string) css,
	*		overlayTransparancy: 	(decimal) between 0 and 1,
	*		overlaySpeed:			(int time) milliseconds,
	*		popUpBackground:		(string) css,
	*		imageBtnPrev:			(string) Path and the name of the prev button image,
	*		imageBtnNext:			(string) Path and the name of the next button image,
	*		imageBtnClose:			(string) Path and the name of the next button image,
	
	* @param 	Object	Mixed
	* 
	*/
	
	$.fn.nvsAlbum = function(options) {
		var defaults = { 
		// Overlay config
	    	overlayBackground:		'black',
			overlayTransparancy: 	0.5,
			overlaySpeed:			500,
			popUpBackground:		'white',
			imageBtnPrev:			'img/photoalbum_nav-left.gif',			// (string) Path and the name of the prev button image
			imageBtnNext:			'img/photoalbum_nav-right.gif',			// (string) Path and the name of the next button image
			imageBtnClose:			'img/photoalbum_nav-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: 'white url(img/lightbox-ico-loading.gif) no-repeat center center',
				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({ 
					left: 0, 
					float: 'left',
					background: 'url(img/x.gif) repeat'
				}).appendTo('#nvs_album_navigation');
			$('<div>').attr({ id: 'nvs_album_nav-right' }).css({ 
					right: 0, 
					float: 'right',
					background: 'url(img/x.gif) repeat'
				}).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',
					background: options.popUpBackground
				}).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');
			
			$('#nvs_album_image-details').append('<div id="nvs_album_image-print"><span id="nvs_album_image-print_btn">Print de foto</span></div>');

			$('<div>').attr({ id: 'nvs_album_image-close' }).css({ 
					position: 'absolute',
					display: 'none', 
					bottom: '10px',
					right: '10px'
				}).html("sluiten").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() {
			var objImagePreloader = new Image();
			objImagePreloader.onload = function() {
				$('#nvs_album-image').attr('src',options.imageArray[options.activeImage][0]);
				_resize_nvs_popup(objImagePreloader.width,objImagePreloader.height);
				$('#nvs_album_image-numbers').html('Afbeelding '+(options.activeImage+1)+' van '+options.imageArray.length);
				$('#nvs_album_image-description').html("");
				$('#nvs_album_image-description').html(options.imageArray[options.activeImage][1]);
				//	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-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) { 
				/*  If statement needed because it created an lbiOffset undefined when 
					closing the album while it was sliding down the image-details.
					(maybe do _add_events() in here and remove those events before animating)
				*/
				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').hover(
					function() { $('#nvs_album_nav-right').css({ background: 'url('+options.imageBtnNext+') no-repeat right 20%' }); }, 
					function() { $('#nvs_album_nav-right').css({ background: 'url(img/x.gif) repeat' }); } 
				);
				
				$('#nvs_album_nav-left').hover(
					function() { $(this).css({ background: 'url('+options.imageBtnPrev+') no-repeat left 20%' }); }, 
					function() { $(this).css({ background: 'url(img/x.gif) repeat' }); } 
				);
				
				$('#nvs_album_nav-right').click(function() {
					$(this).css({background: 'url(img/x.gif) repeat' });
					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() { 
					$(this).css({background: 'url(img/x.gif) repeat' });
					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-print_btn').click(function() {
					
					$('link[@rel*=style][@title]').each(function(i) {
						this.disabled = true;
						if (this.getAttribute('title') == 'fotoprint') this.disabled = false;
					});
					
					$('<img>').attr({ id: 'nvs_album-print-image', src: $('#nvs_album-image').attr('src') }).css({ visibility: 'visible'}).appendTo('body');
					
					window.print();
					$('#nvs_album-print-image').remove();
					$('link[@rel*=style][@title]').each(function(i) {
						this.disabled = false;
						if (this.getAttribute('title') == 'fotoprint') this.disabled = true;
					});

				});
				$(document).bind('keydown', _keyboard_action);
			}
		}
		
		function _removeNavigation() {
			$('#nvs_album_image-close').hide();
			$('#nvs_album_nav-left, #nvs_album_nav-right, #nvs_album_image-print_btn').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);