// JavaScript Document
//<![CDATA[
	  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.
	          [
	            'CSS-based transitions: Infinite effects!',
	            'Slideshow is powered by <a href="http://www.mootools.net/">Mootools 1.2</a> Morph technology...',
	            'A true separation of behavior and style...',
	            'Define slide transitions in your stylesheet independant of the javascript...',
	            'Combine styles for an infinite variation of effects...',
	            'In addition image overlapping is now optional...',
	            'With image overlap disabled one image will transition out before the next transitions in...',
	            '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: 'back:in:out', width: 500});
    			  break;
    			  
    			case 2: // Slideshow extension: Ken Burns show.
          [
            'Slideshow extension: Ken Burns show!',
            'Includes panning and zooming effects...',
            'The extension takes two additional options <code>zoom</code> and <code>pan</code>...',
            'The <code>zoom</code> option zooms the slide 1× to 2× the size of the show...',
            'The <code>pan</code> option pans the slide 0% to 100% of it\'s overflow...',
            'Zooming-only and panning-only shows are possible by setting the opposing option to 0...',
            'Both options additionally accept a range of values in the form of an array...',
            '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: 5000, duration: 2000, height: 400, hu: 'images/', thumbnails: true, width: 500, zoom: 50 });
  			  break;
    			
    			case 3: // Thumbnails: Intelligent and auto-scrolling.
          [
            'Thumbnails: Intelligent and auto-scrolling (random show)!',
            'Thumbnails are bigger, stronger, faster...',
            'Customize the regexp to generate your thumbnails based on image filenames...',
            'Or set specific filenames for thumbnails in the data object for each image...',
            'The thumbnails element will automatically scroll it\'s overflow...',
            'Thumbnails are smart too...',
            'Slideshow knows if your thumbnails are portrait or landscape, multiple rows or columns...',
            'Also introducing: random shows...',
            '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: 'back:out', width: 500, zoom: 25 });
  			  break;
	          
    			case 4: // Slideshow extension: Push show.
          [
            'Slideshow extension: Push show!',
            'Includes a pushing effect that <em>pushes</em> one image out with another...',
            'Note this extension requires Mootools compiled with Fx.Elements...',
            'Combine with Fx.Transitions for a very cool effect...',
            '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: 'elastic:out', width: 500, zoom: 25 });
  			  break;
	          
    			case 5: // Controller: Accessible and style-able.
          [
            'Controller: Accessible and style-able!',
            'Slideshow includes a feature-complete controller...',
            'Completely style-able with CSS...',
            'Create your own controller as shown in the example...',
            'Or with only previous / next arrows like Lightbox...',
            'Customize CSS classes to affect how the controller appears / disappears...',
            'Slideshow is also accessible...',
            'Control the show with accesskeys...',
            '<code>LEFT</code> and <code>RIGHT</code> arrow keys for the previous and next slides (with <code>SHIFT</code> for first and last)...',
            '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: 'back:in:out'}, 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 extension: Flash show!',
            'Includes a flashing color effect...',
            'The extensions takes an additional option <code>color</code>...',
            'Either a single value: <code>color: "#FFF"</code>...',
            'Or an array: <code>color: ["#FFF", "#000"]</code>...',
            'The values of which are applied incrementally to the slides in the 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.
            [
              'Hyperlink your show: Lightbox mashup!',
              'Click to view the full-size image in a modal window above the show...',
              'Slideshow includes plenty of hyperlinking options...',
              'If your show has a default URL the class will use that for each image...',
              'Default URL\'s can be set in the HTML or via the <code>href</code> option...',
              'Override the default value by passing in individual URL\'s in the data object...',
              'Or via the <code>linked</code> option...',
              'Which will automatically link each image to it\'s full-size counterpart...',
              '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.
            [
              'New Slideshow extension: Fold show!',
              'Inspired by jQuery\'s <em>Fold FX</em>...',
              'Adds a folding effect...',
              'Works for non-overlapping and fast shows too...',
              '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: 'bounce:out', 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);
  	    }
	    }
	  })	
	//]]>