/**

 * 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/nvsalbum_nav-left.gif',			// (string) Path and the name of the prev button image

			imageBtnNext:			'img/nvsalbum_nav-right.gif',			// (string) Path and the name of the next button image

			imageBtnClose:			'img/nvsalbum_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: 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',

					textAlign: 'left',

					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');

			$('<img>').attr({ id: 'nvs_album_image-close', src: options.imageBtnClose }).css({ 

					position: 'absolute',

					cursor: 'pointer', 

					display: 'none', 

					bottom: '15px',

					right: '10px'

				}).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);

				//	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('' + options.imageArray[options.activeImage][1]);

					$('#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').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);

							});

							

						}							  

				});

				

				$(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);