var demo = new Class({
	    initialize: function(){
	      this.el = $('show');
	      // We attach our event listener to each of the demos.
  		  $$('#demos li').each(function(li, i){
  		    li.set('events', {'click': this.start.pass(i + 1, this)});
  		  }, this)
  		  // Start our default demo.
	      this.start();
	    },
	    
	    start: function(p){
        var data = {};
        // If there is an existing Slideshow instance we will want to destroy it completely.
        // Usually we can use the "load" method to simply load in new data.
        // However the demos here  require a complete new, customized Slideshow instance which is why we will have to opt for the "destroy".
        if (this.show)
          this.show.destroy('empty');
 	      switch(p){
	        case 1: // CSS-based transitions: Infinite effects.
	          [
	            'Useful with PNG images where the alpha channel could otherwise interfere with the show.'
	          ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
    			  this.show = new Slideshow(this.el, data, { captions: true, classes: ['', '', '', '', '', '', '', 'alternate-images'], controller: true, duration: 1250, height: 400, hu: 'images/', overlap: false, thumbnails: true, transition: Fx.Transitions.Back.easeInOut, width: 500});
    			  break;
    			  
    			case 2: // Slideshow extension: Ken Burns show.
          [
            'For example <code>pan: [25, 75]</code> would randomly pan each slide between 25% and 75%...',
            'Slideshow is extensible: use this extension of write your own!'
          ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
  			  this.show = new Slideshow.KenBurns(this.el, data, { captions: true, controller: true, delay: 4000, duration: 1000, height: 400, hu: 'images/', thumbnails: true, width: 500, zoom: 25 });
  			  break;
    			
    			case 3: // Thumbnails: Intelligent and auto-scrolling.
          [
               'Combine with thumbnails for a very cool effect.'
          ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
  			  this.show = new Slideshow(this.el, data, { captions: true, classes: ['', '', '', '', '', '', '', '', '', '', 'alternate-thumbnails'], controller: true, duration: 1250, height: 400, hu: 'images/', random: true, thumbnails: true, transition: Fx.Transitions.Back.easeOut, width: 500, zoom: 25 });
  			  break;
	          
    			case 4: // Slideshow extension: Push show.
          [
             'Slideshow is extensible: use this extension of write your own!'
          ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
  			  this.show = new Slideshow.Push(this.el, data, { captions: true, controller: true, delay: 2500, duration: 2000, height: 400, hu: 'images/', transition: Fx.Transitions.Elastic.easeOut, width: 500, zoom: 25 });
  			  break;
	          
    			case 5: // Controller: Accessible and style-able.
          [           
            'The letter <code>P</code> to toggle pause / play.'
          ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
    			this.show = new Slideshow(this.el, data, { captions: true, classes: ['', '', '', '', '', '', '', '', '', 'alternate-controller'], controller: {transition: Fx.Transitions.Back.easeInOut}, duration: 1000, height: 400, hu: 'images/', linked: true, thumbnails: true, width: 500 });
    			this.show.slideshow.retrieve('images').getElements('a').set('rel', 'lightbox');
    			var box = new Lightbox({ 
    			  'onClose': function(){ this.pause(false); }.bind(this.show), 
    			  'onOpen': function(){ this.pause(true); }.bind(this.show) 
    			});
    			box.image.addEvent('click', function(){ this.close(); }.bind(box));	        
  			  break;

    			case 6: // Slideshow extension: Flash show.
          [            
            'Slideshow is extensible: use this extension of write your own!'
           ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
    			this.show = new Slideshow.Flash(this.el, data, { captions: true, color: ['#EC2415', '#7EBBFF'], controller: true, delay: 3000, duration: 3000, height: 400, hu: 'images/', width: 500 });
   			  break;

      			case 7: // Hyperlink your show: Lightbox mashup.
            [             
              'Pair that with a script like <strong>Lightbox</strong> for the effect seen here.'
            ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
      			this.show = new Slideshow.KenBurns(this.el, data, { captions: true, controller: true, delay: 4000, duration: 1000, height: 400, hu: 'images/', linked: true, thumbnails: true, width: 500, zoom: 0 });
      			this.show.slideshow.retrieve('images').getElements('a').set('rel', 'lightbox');
      			var box = new Lightbox({ 
      			  'onClose': function(){ this.pause(false); }.bind(this.show), 
      			  'onOpen': function(){ this.pause(true); }.bind(this.show) 
      			});
      			box.image.addEvent('click', function(){ this.close(); }.bind(box));	        
    			  break;

      			case 8: // Slideshow extension: Fold show.
            [           
              'Slideshow is extensible: use this extension of write your own!'
             ].each(function(str, i){ this[(i + 1) + '.jpg'] = { 'caption': str }; }, data);    			  
      			this.show = new Slideshow.Fold(this.el, data, { captions: true, center: false, controller: true, duration: 1000, height: 400, hu: 'images/', transition: Fx.Transitions.Bounce.easeOut, width: 500 });
     			  break;

	        default:
	          // This is the default show that launches when the page is first loaded.
	          // This show is loaded without any data and parses in the existing HTML images in order to create the show.
      			this.show = new Slideshow.KenBurns(this.el, null, { captions: true, controller: true, delay: 4000, duration: 1000, height: 400, hu: 'images/', thumbnails: true, width: 500, zoom: 0 });
  	      }
  	      
  	    // This last little bit just inserts our thumbnails "fuzzy edge" overlays.
  	    if (this.show.options.thumbnails){
   	      ['a', 'b'].each(function(p){ 
    			  new Element('div', { 'class': 'overlay ' + p }).inject(this.show.slideshow.retrieve('thumbnails'));
          }, this);
  	    }
	    }
	  })