var Slideshow = new Class({
		
		Implements: [Options],
		
		options : {
			wrapper:	'',
			images: 	'',
		},
		
		initialize : function(options) {
			
			this.setOptions(options);
			this.options.images = $(options.wrapper).getElements('img');
			this.setup();
			
		},
		
		setup : function() {
			
			var self = this;
		
			// build navigation
			var navigation = new Element('div', {
				'id': self.options.wrapper.id + '-navigation',
				'class': 'ngg-navigation-bottom clearfix'
			}).inject($(self.options.wrapper), 'after');
			
			// wrapper 
			$(self.options.wrapper).getElement('.ngg-image-wrapper').setStyle('width', self.options.images.length*self.options.images[0].get('width') );
			
			var scroller = new Fx.Scroll(self.options.wrapper);
			
			self.options.images.each( function( item, index ) {
				
				item.addEvent('click', function() {
					
					if ( item.getNext('img') ) {
						
						scroller.toElement( item.getNext('img') );
					
					} else {
						
						scroller.toLeft();
					}
					
					$(navigation).getElements('a').removeClass('active');
					if ( $(navigation).getElements('a')[index+1] ) {
						$(navigation).getElements('a')[index+1].addClass('active');
					} else {
						$(navigation).getElements('a')[0].addClass('active');
					}
					
				});
				
				
				var link = new Element('a', {
					'href': '#',
					'html': index + 1,
					'events': {
				        'click': function(e){
							e.preventDefault();
							
							if ( index == 0 ) {
								scroller.toLeft();
							} else {
								scroller.toElement( item );
							}
							
							$(navigation).getElements('a').removeClass('active');
							this.addClass('active');
							
						},
					}
				}).inject(navigation);
			
			});
			
			navigation.getElement('a').addClass('active');
			
			
			
			
			
			
		}
		
		
		
		
		
	});