/*
 * 	Interactive Foto Carousel v1.0
 *
 *	This interactive Foto Carousel is the property of the Universiteit Twente.
 * 	Do not copy without permission.
 *
 * 	Written by Olivier Hermanus - 2009.8.16
 * 
 */

var FotoGallery = (function($) {
	
	/*
	 * Constants
	 *
	 */
	
	var _T = {
		foto: '<a href=\'#\' fotos:nr=\'$nr\' class=\'foto-small\'><img src=\'$src\' alt=\'$alt\' /></a>',
		current: '<a href=\'$href\'><img src=\'$src\' alt=\'$alt\' longdesc=\'$longdesc\' /></a>',
		previous: '<a href=\'#\' class=\'control previous\'>Prev</a>',
		next: '<a href=\'#\' class=\'control next\'>Next</a>'
	}
	
	var _S = {
		container: '.foto-carousel-container',
		carousel: '.foto-carousel-slider',
		current: '.foto-large',
		foto: '.foto-small',
		stories: '.story-list',
		hover_state: 'hover',
		active_state: 'active',
		carousel_hover: 'foto-carousel-hover',
		carousel_active: 'foto-carousel-active',
		storylist_hover: 'foto-story-list-hover',
		storylist_active: 'foto-story-list-active'
	}
	
	var _F = {
		width: 44,
		height: 44
	}
	
	/*
	 *	Carousel instance.
	 *
	 */
	
	var Carousel = (function() {
		
		var stack = [];
		var view = [];
		var raw_fotos = [];
		var fotos = [];
		var current_item;
		var item_count;
		var should_play;
		
		return {
		    
		    next_suitable_item: function() {
		        if (Carousel.current_item == Carousel.item_count - 1) {
		            Carousel.current_item = 0;
		        } else {
		            Carousel.current_item += 1;
		        }
		        
		        return Carousel.current_item;
		    },
			
			load: function(fotos) {
			    Carousel.raw_fotos = fotos;
			    Carousel.fotos = [];
				for (var i = 0; i < fotos.length; i++) {
				    if (!Carousel.fotos[fotos[i].id]) {
				        Carousel.fotos[fotos[i].id] = [];
				    }

				    Carousel.fotos[fotos[i].id].push(fotos[i]);
			    }
			    
			    Carousel.current_item = 0;
			    Carousel.item_count = fotos.length;
			    Carousel.should_play = true;
			    
                Carousel.render(fotos);
                $('.foto-carousel, .foto-carousel-container .foto-cover').fadeTo(0, 0);
			},
			
			render: function(fotos) {
				
				/*
				 *	Empty the inner carousel
				 * 	Fill it with the current foto-stack
				 *
				 */
				
				var _c = $(_S.carousel).empty().css({ width: (fotos.length * _F.width) });
				var _f = null;
				var _s = 0;
				
				for (var i = 0; i < fotos.length; i++) {
					
					
					_f = $(_T.foto.replace('$src', fotos[i].thumb.src).replace('$alt', fotos[i].alt).replace('$nr', i));
					if (fotos[i].selected) {
					    Carousel.current_item = parseInt(i);
					    _s = i;
				    }
					
					view.push(_f);
					stack.push(fotos[i]);
					
					_f.click(function(e) {
					
						Carousel.select($(this).attr('fotos:nr'), _S.hover_state);
						e.preventDefault();
						
					});
					
					_c.append(_f);
					
				}
				
				if (fotos.length > 5) {
					
                    $('.foto-carousel').prepend($(_T.next).click(function(e) {
                     var _s = $('.selected').attr('fotos:nr');
                     Carousel.select(parseInt(_s) + 1, _S.hover_state);
                     e.preventDefault();
                    }));
                    
                    $('.foto-carousel').prepend($(_T.previous).click(function(e) {
                     var _s = $('.selected').attr('fotos:nr');
                     Carousel.select(parseInt(_s) - 1, _S.hover_state);
                     e.preventDefault();
                    }));
					
				}
				
                $('.foto-carousel-container, .story-list').mouseover(function() { 
                    Carousel.select(Carousel.current_item, _S.hover_state);
                    $('.foto-carousel').stop().fadeTo('fast', 1);
                }).mouseleave(function() { 
                    Carousel.select(Carousel.current_item, _S.active_state);
                    $('.foto-carousel').stop().fadeTo('fast', 0);
                });
                
                Carousel.select(_s, 'active');
				
				
			},
			
			select: function(i, type) {
			    Carousel.current_item = parseInt(i);
			    
			    if (type == _S.hover_state) {
			        Carousel.should_play = false;
			    } else {
			        Carousel.should_play = true;
			    }
			    
                $(_S.carousel + ' a').removeClass('slide-offset');
                for (var j = 0; j < stack.length; j++) {
                    if (stack[j].id != stack[i].id) {
                        view[j].css('display', 'none');
                        if (i > j) {view[j].addClass('slide-offset');}
                    } else {
                        view[j].css('display', 'inline');
                    }
                }
				
				i = (i < 0) ? 0 : (i >= stack.length) ? stack.length - 1 : i;
				$(_S.foto).removeClass('selected');
				$(_S.container).removeClass(_S.carousel_hover);
				$(_S.container).removeClass(_S.carousel_active);
				$(_S.container).addClass(type == _S.hover_state ? _S.carousel_hover : _S.carousel_active);
				view[i].addClass('selected');
				Current.render(stack[i].image);
				Carousel.slide(i);
				StoryList.select(stack[i].id, type);
			},
			
			slide: function(i) {
			    var invalid_count = $(_S.carousel + ' .slide-offset').length;
                var offset = 240 - (_F.width/2) - (_F.width * (i - invalid_count));
				$(_S.carousel).stop().animate({ marginLeft: offset });
				
			},
			
			selectById: function(id) {
				
				for (var i = 0; i < stack.length; i++) {
					if (stack[i].id == id) return i;
				}
				
				return 0;
				
			}
			
		}
		
	})();
	
	var Current = (function() {
		
		var view = [];
		
		return {
			
			render: function(foto) {
				
				var _f = $(_T.current.replace('$src', foto.src).replace('$alt', foto.alt).replace('$longdesc', foto.longdesc).replace('$href', foto.href));
				$(_S.current).html(_f);
				
			}
			
		}
		
	})();
	
	var StoryList = (function() {
		
		return {
			
			select: function(id, type) {
				
				$(_S.stories).find('li').removeClass('selected');
				$(_S.stories).find('[id=' + id + ']').addClass('selected');
				
				$(_S.stories).find('li').removeClass(_S.storylist_hover);
				$(_S.stories).find('li').removeClass(_S.storylist_active);
				$(_S.stories).find('[id=' + id + ']').addClass(type == _S.hover_state ? _S.storylist_hover : _S.storylist_active);
				
			}
			
		}
		
	})();
	
	return {
		
		/* 
		 * 	FotoGallery.load(address)
		 *	
		 *	Loads an array of fotos.
		 *
		 *	[{
		 *		image: {
		 *	 		src: String, // the location of the image
		 *			alt: String, // the alt-attribute of the image
		 * 			longdesc: Strong // the longdesc-attribute of the image
		 *		},
		 * 		thumb: {
		 *			src: String // the URL of a thumbnail
		 * 		}
		 *	}]
		 *
		 *
		 *
		 */
	
		load: function(address) {
			
			$.ajax({
				
				type: 'get',
				url: address,
				dataType: 'json',
				success: function(response) {
					
					Carousel.load(response);
					
				}				
			})
			
		},
		
		select: function(i, type) {
		    
			Carousel.select(i, type);
			
		},
		
		selectById: function(id, type) {
			
			Carousel.select(Carousel.selectById(id), type);
			
		},   
		
		play_next: function() {
		    if (Carousel.should_play) {
		        Carousel.select(Carousel.next_suitable_item(), 'active');
            }
		},
		
		init: function() {
		    $(_S.stories + ' li').mouseenter(function() {
        		FotoGallery.selectById($(this).attr('id'), 'hover');

        	});

        	$(_S.stories + ' li').mouseleave(function() {
        		FotoGallery.selectById($(this).attr('id'), 'active');

        	});

            setInterval("FotoGallery.play_next();", 5000);
		}
	}
	
})(jQuery);

jQuery(function() {
	
	FotoGallery.load(currentFeed);
	FotoGallery.init();
	
	
});