var SlideShowController = Class.create( StaticUIComponent, {
  initialize:function( $super, id, screen, slides ){
			this.previous_button = null;
			this.next_button = null;
			this.slides = slides;
			this.current = 0;
			this.screen = screen;
			this.dots = [];
			this.duration = 3;
			this.autoExecutor = null;
      $super( $( id ) );
  },

	preloadSlides: function() {
		this.slides.each( function( s ) {
			s.img = new Element( 'img', { src:s.src } );
		} );
	},
	
	previous: function( e ) {
		this.showByIndex( this.current > 0 ? this.current - 1 : this.slides.length - 1 );
	},
	
	next: function( e ) {
		this.showByIndex( this.current < this.slides.length - 1 ? this.current + 1 : 0 );
	},
	
	showByIndex: function( index ) {
		this.dots[ this.current ].enable();
		this.dots[ index ].disable();
		this.screen.src = this.slides[ index ].src;
		this.screen.showSlide( this.slides[ index ] );
		this.current = index;
	},
	
	play: function( duration ) {
		if ( duration ) {
			this.duration = duration;
		}
		
		this.autoExecutor = new PeriodicalExecuter( this.next.bind( this ), this.duration );
	},
	
	stop: function() {
		this.autoExecutor.stop();
	},
	
  installUI: function() {
    this.previous_button = new IconButton( 'previous' );
		this.previous_button.observe( 'actionPerformed', this.previous.bind( this ) );
		
		this.next_button = new IconButton( 'next' );
		this.next_button.observe( 'actionPerformed', this.next.bind( this ) );
		
		var dot_panel = new LightComponent( { id:'dots' } );
		
		var self = this;
		var i = 0;
		this.slides.each( function( slide ) {
			var dot = new IconButton( 'dot', { classNames:['slim'] } );
			dot.observe( 'actionPerformed', self.showByIndex.bind( self, i ) );
			self.dots.push( dot_panel.insert( dot ) );
			i++;
		});
		
		this.dots[ this.current ].disable();
		
		var padding = ( 400 - ( 56 + 16 + 16 * this.dots.length ) ) / 2;
		this.e.style.paddingLeft = padding + 'px';
		this.e.style.width = ( 400 - padding )  + 'px';
		
		this.insert( this.previous_button );
		this.insert( dot_panel );
		this.insert( this.next_button );
  }
});

var SlideShowScreen = Class.create( StaticUIComponent, {
  initialize:function( $super, id ){
      $super( $( id ) );
  },

	showSlide: function( slide ) {
		this.e.src = slide.src;
	}
});

var NavigationController = Class.create( StaticUIComponent, {
  initialize:function( $super, id, urls, current ){
			this.previous_button = null;
			this.next_button = null;
			this.urls = urls;
			this.current = current;
			this.screen = screen;
			this.dots = [];
      $super( $( id ) );
  },
	
	previous: function( e ) {
		this.showByIndex( this.current > 0 ? this.current - 1 : this.urls.length - 1 );
	},
	
	next: function( e ) {
		this.showByIndex( this.current < this.urls.length - 1 ? this.current + 1 : 0 );
	},
	
	showByIndex: function( index ) {
		this.dots[ this.current ].enable();
		this.dots[ index ].disable();
		window.location = (this.urls[ index ]+'.html');
    // this.screen.src = this.slides[ index ].src;
    // this.screen.showSlide( this.slides[ index ] );
    // this.current = index;
	},
	
  installUI: function() {
    this.previous_button = new IconButton( 'previous' );
		this.previous_button.observe( 'actionPerformed', this.previous.bind( this ) );
		
		this.next_button = new IconButton( 'next' );
		this.next_button.observe( 'actionPerformed', this.next.bind( this ) );
		
		var dot_panel = new LightComponent( { id:'dots' } );
		
		var self = this;
		var i = 0;
		this.urls.each( function( url ) {
			var dot = new IconButton( 'dot', { classNames:['slim'] } );
			dot.observe( 'actionPerformed', self.showByIndex.bind( self, i ) );
			self.dots.push( dot_panel.insert( dot ) );
			i++;
		});
		
		this.dots[ this.current ].disable();
		
		var padding = ( 400 - ( 56 + 16 + 16 * this.dots.length ) ) / 2;
		this.e.style.paddingLeft = padding + 'px';
		this.e.style.width = ( 400 - padding )  + 'px';
		
		this.insert( this.previous_button );
		this.insert( dot_panel );
		this.insert( this.next_button );
  }
});