Aurora.Slider = new Class({
	
	Implements: [ Options, Event ],
	
	options: {
		id: '',
		slides: [],
		navContainer: '',
		navButtons: [],
		height: 0
	},
	
	initialize: function( options )
	{
		this.setOptions( options );
		this.$el = $( this.options.id + '_container' );
		this.$nav = $( this.options.navContainer );
		
		this.$el.setStyles({
			overflow: 'hidden',
			position: 'relative',
			clear: 'both',
			width: '100%'
		});
		
		// this.$spacer
		
		if ( this.options.height )
			this.$el.setStyle( 'height', this.options.height );
		
		this.slidesById = {};
		this.slidesByKey = {};
		
		var show = this.show.bind( this );
		
		this.options.slides.each( function(s,i) {
			
			s.i = i;
			this.slidesById[ s.id ] = s;
			this.slidesByKey[ s.key ] = s;
			
			s.$el = $( s.id );
			s.$el.setStyles({
				display: 'none',
				position: 'absolute'
			});
			
			if ( this.$nav )
			{
				s.$nav = new Element( 'a', {
						'class': 'normal',
						href: "#" + s.key,
						html: '<span class="wrap1"><span class="wrap2">' + s.label || s.key + '</span></span>'
					} )
					.addEvent( 'click', function() {
						show( s.id );
						(function() { window.scrollTo( 0, 0 ); }).delay( 1 );
					})
					.inject( this.$nav );
			}
			
		}, this );
		
		this.start();
	},
	
	start: function()
	{
		this.show( 0 );
		
		// modification, first slide was not showing
		$( 'slide_Home' ).setStyle( 'position', 'relative' );
	},
	
	show: function( i )
	{
		var slide = this.options.slides[ i || 0 ];
		
		var width = this.$el.getSize().x;
		var height = this.$el.getSize().y;
		
		if ( !slide )
		{
			if ( this.slidesById[ i ] )
				var slide = this.slidesById[ i ];
			else if ( this.slidesByKey[ i ] )
				var slide = this.slidesByKey[ i ];
		}	
		
		if ( !slide )
		{
			alert( 'Aurora.Slides Error: Slide ' + i + ' could not be found in the Slides array.' );
			return;
		}
		
		// console.log( navButtons );
		

	        if ( slide.enableNext )
        	    navButtons.next.setStyle( 'display', 'block' );
        	else
        	    navButtons.next.setStyle( 'display', 'none' );
        	    
           	if ( slide.enableHome )
        	    navButtons.home.setStyle( 'display', 'block' );
        	else
        	    navButtons.home.setStyle( 'display', 'none' ); 
        	    
        	if ( slide.enablePrevious )
        	    navButtons.previous.setStyle( 'display', 'block' );
        	else
        	    navButtons.previous.setStyle( 'display', 'none' );
		
		
		if ( this.currentSlide == slide )
			return this;
		
		if ( this.currentSlide )
		{
			var direction = ( this.currentSlide.i < slide.i ) ? -1 : 1;
			
			if ( this.currentSlide.$nav )
				this.currentSlide.$nav.removeClass( 'current' ).addClass( 'normal' );
			
			this.currentSlide.$el.setStyles({
				width: width
			}).get( 'tween' )
				.setOptions({ link: 'cancel', duration: 400, transition: Fx.Transitions.Quint.easeOut })
				.start( 'top', height * direction )
				.chain( function() { this.element.setStyle( 'display', 'none' ); });
		
			slide.$el.setStyles({
				display: 'block',
				width: width,
				'top': height * direction * -1
			}).get( 'tween' )
				.setOptions({ link: 'cancel', duration: 400, transition: Fx.Transitions.Quint.easeOut })
				.start( 'top', 0 );
		
		}
		else
		{
			slide.$el.setStyles({
				display: 'block',
				'top': 0
			});
		}
		
		if ( slide.$nav )
			slide.$nav.removeClass( 'normal' ).addClass( 'current' );
		
		this.currentSlide = slide;
		
		return this;
	},
	
	next: function()
	{
		if ( !this.currentSlide || this.currentSlide.i >= this.options.slides.length - 1 )
			return this.show( 0 );
		else
			return this.show( this.currentSlide.i + 1 );
	},
	
	previous: function()
	{
		if ( !this.currentSlide )
			return this.show( 0 );
		else if ( this.currentSlide.i == 0 )
			return this.show( this.options.slides.length - 1 )
		else
			return this.show( this.currentSlide.i - 1 );
	}
	
});