/**
 * EXT:mfarvatolightbox/res/js/lightbox.js
 * @author Philipp Maas <maas@medienfabrik.de>
 */

$(function() {
	// check if lightbox is avaliable
	if($('#lightbox.overlay').length>0) {
		// vars
		var lightbox_thumbs_items = 5; // TODO!
				
		// append lightbox to body
		$('body').append($('#lightbox.overlay'));
		
		// init
		$('#lightbox.overlay .thumbs .scrollable').scrollable({vertical: true});
		$('#lightbox.overlay .display .scrollable').scrollable();
		
		// get base
		var base = lightboxGetBases();
		
		// overlay
		$('a[rel]').overlay({
			top:20,
			mask:'#ccc',
			effect:'apple',
			onLoad: function() {
				// goto current
				var trigger = this.getTrigger();
				var link = trigger.attr('href').split('#');
				
				lightboxChange(lightboxGetCurrentById('#'+link[1]));
			},
			onClose: function() {
				// hide image
				base['image']['api'].getItems().eq(0).hide();
				
				// hide description
				base['description'].animate({opacity:0}, 0);
				
				// hide downloads
				base['download'].animate({opacity:0}, 0);
				
				// remove all current marks
				base['thumbs'].find('.current').removeClass('current');
			}
		});
		
		// enable nav
		lightboxEnableNav();
	}
	
	/**
	 * lightboxEnableNav
	 */
	function lightboxEnableNav() {
		// display - preview
		$('.overlay .display .browse.prev').bind('click', function() {
			var prev = lightboxGetPrev();
			lightboxChange(prev);
			return false
		});
		
		// display - next
		$('.overlay .display .browse.next').bind('click', function() {
			var next = lightboxGetNext();
			lightboxChange(next);
			return false;
		});
		
		// display - change
		$('.overlay .thumbs .scrollable a.photo').bind('click', function() {
			var root = $(this).parent();
			
			var position 	= root.index()+1;
			var pane 		= root.parent().index();
			
			var image_nr 	= (pane*lightbox_thumbs_items)+position;
						
			lightboxChange(image_nr);
			
			return false;
		});
	}
	
	/**
	 * lightboxDisableNav
	 */
	function lightboxDisableNav() {
		// display - preview
		$('.overlay .display .browse.prev').unbind('click');
		
		// display - next
		$('.overlay .display .browse.next').unbind('click');
		
		// thubms - click
		$('.overlay .thumbs .scrollable a.photo').unbind('click');
		$('.overlay .thumbs .scrollable a.photo').bind('click', function(){ return false });
	}
	
	/**
	 * lightboxChange
	 * @param int image_nr
	 */
	function lightboxChange(new_image_nr) {
		
		var current_image_nr = lightboxGetCurrent();
		
		// check if current!=new image
		if(new_image_nr!=current_image_nr) {
			
			// disable navigation
			lightboxDisableNav();
			
			// new image details
			var new_image_details = lightboxGetImageDetails(new_image_nr);
			
			// show loader
			base['image'].parent().find('.loading').fadeIn('fast');
			
			// hide description
			base['description'].animate({opacity:0}, 50);
			
			// hide download
			base['download'].animate({opacity:0}, 50);
			
			// load new image
			var new_image = new Image();
			
			new_image.onload = function() {
				var item = '<div><span class="holder"><img src="'+new_image_details['url']+'" alt="" /></span></div>';
								
				// choose direction
				if(new_image_nr<current_image_nr) {				
					// add new image
					base['image']['api'].addItemBefore(item).begin();
					
					// remove old image
					base['image']['api'].getItems().eq(1).delay(500).queue(function() { 
						$(this).remove();
						
						// enable navigation
						lightboxEnableNav();
					});
				}
				else {				
					// add new image
					base['image']['api'].addItem(item).end();
					
					// remove old image
					base['image']['api'].getItems().eq(0).delay(500).queue(function() { 
						$(this).remove();
						base['image']['api'].begin(0);
						
						// enable navigation
						lightboxEnableNav();
					});
				}
				
				// move thumbs
				base['thumbs']['api'].seekTo(new_image_details['pane'], 400);
				
				// add/remove 'current' classes 
				base['thumbs'].find('.current').removeClass('current');
				new_image_details['ref'].addClass('current');
				
				// change + show description
				base['description'].html(new_image_details['description']);
				base['description'].animate({opacity:1}, 400)
				
				// change + show download
				base['download'].html(new_image_details['download']);
				base['download'].animate({opacity:1}, 400);
				
				// hide loader
				base['image'].parent().find('.loading').fadeOut('fast');
			};
			
			new_image.src = new_image_details['url'];
		}
	}
	
	/**
	 * lightboxGetCurrent
	 */
	function lightboxGetCurrent() {
		var index 	= base['thumbs'].find('.current').index()+1;
		var pane 	= base['thumbs'].find('.current').parent().index()*lightbox_thumbs_items;
		
		return pane+index;
	}
	
	/**
	 * lightboxGetCurrentById
	 */
	function lightboxGetCurrentById(id) {
		var index 	= base['thumbs'].find(id).index()+1;
		var pane 	= base['thumbs'].find(id).parent().index()*lightbox_thumbs_items;
		
		return pane+index;
	}
	
	/**
	 * lightboxGetMax
	 */
	function lightboxGetMax() {
		var size = base['thumbs'].find('a.photo').size();
		
		return size;
	}
	
	/**
	 * lightboxGetPrev
	 */
	function lightboxGetPrev() {
		var current = lightboxGetCurrent();
		var max 	= lightboxGetMax();
		
		var prev 	= (current<=1)?max:current-1;
		
		return prev;
	}
	
	/**
	 * lightboxGetNext
	 */
	function lightboxGetNext() {
		var current = lightboxGetCurrent();
		var max 	= lightboxGetMax();
		
		var next 	= (current==max)?1:current+1;
		
		return next;
	}
	
	/**
	 * lightboxGetImageDetails
	 * @param int image_nr
	 */
	function lightboxGetImageDetails(image_nr) {
		var pane = Math.ceil(image_nr/lightbox_thumbs_items)-1;
		var position = image_nr-(pane*lightbox_thumbs_items)-1;
		
		var image = new Array();
		image['ref'] 			= base['thumbs'].find('.items > div').eq(pane).find('.pane').eq(position);
		image['id'] 			= image['ref'].attr('id');
		image['url']			= image['ref'].find('a.photo').attr('href');
		image['description']	= image['ref'].find('.description').html();
		image['download']		= image['ref'].find('.download').html();
		image['pane']			= pane;
		
		return image;
	}
	
	/**
	 * lightboxGetBase
	 */
	function lightboxGetBases() {
		var base = new Array();
		
		base['overlay']			= $('#lightbox.overlay');
		
		base['image'] 			= base['overlay'].find('.display .image .scrollable');
		base['image']['api']	= base['image'].data('scrollable');
		
		base['description'] 	= base['overlay'].find('.meta .description');
		
		base['download'] 		= base['overlay'].find('.meta .download');
		
		base['thumbs'] 			= base['overlay'].find('.thumbs .scrollable');
		base['thumbs']['api']	= base['thumbs'].data('scrollable');
		
		return base;
	}
});