ThumbnailGrid.ForSlideShow = new Class({

  Extends: ThumbnailGrid,

	options: {
		/*
		onCreateSlide: function(){},
		onViewSlide: function(){},
		onShowComplete: function(){},
		*/
	  slideshowWrapper: document.body,
    slideshowContainerId: 'slideshow',
	  slideshowContainerClass: 'slideshow',
    slideClass: 'slide'
	},

  initialize: function(grid, options){
		if (options.slideshowWrapper) this.options.slideshowWrapper = options.slideshowWrapper;
		if (options.slideshowContainerId) this.options.slideshowContainerId = options.slideshowContainerId;
    this.slideshow = null;
    this.setupSlideshow();
		this.spinner = null;
    this.parent.apply(this, arguments);
  },

	setupSlideshow: function(){
	  //console.log('setupSlideshow');
		if (document.id(this.options.slideshowContainerId)) document.id(this.options.slideshowContainerId).destroy();
    var container = new Element('div', {
			id: this.options.slideshowContainerId,
			'class': this.options.slideshowContainerClass
		});
		container.set('opacity', 0); //temp
		document.id(this.options.slideshowWrapper).grab(container, 'top');
		return this;
	},

  processThumbnail: function(thumbnail){
    this.parent(thumbnail);
    var image = thumbnail.retrieve('original');
    //console.log('ext processThumbnail: ', image);
    this.createSlide(image);
    return this;
  },
  
	createSlide: function(image){
	  //console.log('createSlide: ', image);
		var slide = new Element('div', { 'class': this.options.slideClass });
		slide.set('data-src', image);
		document.id(this.options.slideshowContainerId).grab(slide);
		this.fireEvent('createSlide', slide);
		return this;
	},

  processCollection: function(){
    this.parent();
    this.initSlideShow();
		//Show first slide/image
		this.slideshow.loadImage(this.current, true);
  },

  initSlideShow: function(){
    this.slideshow = new SlideShow.Extended(this.options.slideshowContainerId);
		this.slideshow.addEvents({
			showComplete: this.showComplete.bind(this),
			loadImage: this.slideLoad.bind(this),
			loadImageComplete: this.slideLoadComplete.bind(this)
		});
		return this;
  },

	slideLoad: function(index){
		//console.log('(show spinner) loading image for slideshow, index: ', index);
		//this.spinner = new Spinner(this.collection[this.current]);
		//this.spinner.show();
	},

	slideLoadComplete: function(index){
		//console.log('(hide spinner) loading image for slideshow complete, index: ', index);
		//this.spinner.hide();
		if (index === this.current) this.viewSlide();
	},

  showComplete: function(){
    this.fireEvent('showComplete');
  },

  click: function(event){
    this.parent(event);
		if (this.slideshow.slideLoaded(this.slideshow.slides[this.current])) this.viewSlide();
			else this.slideshow.loadImage(this.current);
  },

  viewSlide: function(){
    this.fireEvent('viewSlide', this.slideshow.slides[this.current]);
  }

});