var HomeBanner = new Class( {
	
	  banners: [ 'collections', 'visit', 'learn', 'exhibits', 'about_us' ]
	, path: 'resource/mainestatemuseum/image/hero/'
	, container: null
	, duration: 5000
	
	, cursor: 0
	
	, initialize: function( ) {
	  	this.banners.each(
	  		function( slug, i ) {
				this.banners[ i ] = Asset.image(
					auri( this.path+'home_'+slug+'.jpg' )
				);
				this.banners[ i ].store( 'href', auri( slug+'/' ) );
			}.bind( this )
		);
	  }
	
	, start: function( ) {
		this.container = $( 'Hero' );
		var back = this.container.getElements( 'img' )[0];
		var front = new Element( 'img', { src: back.src } );
		
		this.container.store( 'back', back );
		this.container.store( 'front', front );
		
		var a = new Element( 'a', { href: this.banners[0].retrieve( 'href' ) } );
		a.adopt( back, front );
		
		this.container.grab( a );
		this.swap.periodical( this.duration, this );
	  }
	
	, swap: function( ) {
		var current = this.current( );
		var next = this.next( );
		
		if( next.complete ) {
			var back = this.container.retrieve( 'back' );
			var front = this.container.retrieve( 'front' );
			
			front.set( 'src', current.get( 'src' ) );
			front.setStyle( 'opacity', 1 );
			back.set( 'src', next.get( 'src' ) );
			
			front.fade( 'out' );
			front.getParent( 'a' ).set( 'href', next.retrieve( 'href' ) );
			this.cursor++;
		}
	  }
	
	, current: function( ) {
		return this.banners[ this.cursor ];
	  }
	
	, next: function( ) {
		var cursor = this.cursor + 1;
		
		if( cursor >= this.banners.length ) {
			cursor = 0;
			this.cursor = -1;
		}
		
		return this.banners[ cursor ];
	  }
	
} );

window.addEvent( 'domready', function( ) {
	new HomeBanner( ).start( );
} );