/*
---

script: Gallery.js

description: Controller class for ThumbnailGrid and Ryan Florence's SlideShow (https://github.com/rpflorence/SlideShow)

license: MIT-style license.

authors: Rolf Langenhuijzen

requires: [ThumbnailGrid, SlideShow.ImagePreloading]

provides: Gallery

...
*/

;(function(){

var Gallery = this.Gallery = new Class({

	Implements: [Events, Options],

	options: {
		/*
		onEnabled: function(){},
		onDisabled: function(){},
    onClick: function(){},
    onSetCurrent: function(){},

		onShow: function(){},
		onShowComplete: function(){},
		onReverse: function(){},
		onPlay: function(){},
		onPause: function(){},

    onSetupSlideShow: function(){},
    onCreateSlide: function(){},
    onLoadImage: function(){},
    onLoadImageComplete: function(){},
		*/
		initialIndex: 0,
		ThumbnailGridOptions: {
			thumbnailContainerSelector: 'li',
			useSpinner: false,
			spinnerOptions: {}
    },
	  slideshowWrapper: null,
	  slideshowContainerId: 'slideshow',
	  slideshowContainerClass: 'slideshow',
	  slideClass: 'slide',
	  showSlideOnClick: true,
    SlideShowOptions: {
			delay: 7000,
			transition: 'crossFade',
			duration: 500,
			autoplay: false,
			dataAttribute: 'data-slideshow',
			selector: '> *',
			useSpinner: false,
			spinnerTarget: null
    }
	},

  initialize: function(thumbnailsContainer, options){
		this.setOptions(options);
		this.options.SlideShowOptions.initialSlideIndex = this.options.ThumbnailGridOptions.initialThumbnailIndex = this.options.initialIndex;
		this.thumbnailsContainer = document.id(thumbnailsContainer);
		this.thumbnailGrid = null;
		this.slideshowWrapper = document.id(this.options.slideshowWrapper) || document.id(document.body);
		this.slideshow = null;

    this.bound = {
      thumbnailClick: this.thumbnailClick.bind(this)
    };

    this.setup().start();
	},

  setup: function(){
    this.makeThumbnailGrid().setupSlideShow().createSlides().makeSlideShow();
    return this;
  },

  refresh: function(){
    this.thumbnailGrid.setup(0);
    this.removeSlides().createSlides().makeSlideShow().start();
  },

	makeThumbnailGrid: function(){
    var options = {
			onEnabled: this.fireEvent('enabled'),
      onClick: this.bound.thumbnailClick
    };
    Object.append(options, this.options.ThumbnailGridOptions);
	  this.thumbnailGrid = new ThumbnailGrid(this.thumbnailsContainer, options);
		return this;
	},

  thumbnailClick: function(event, index, clicked){
    this.fireEvent('click', [event, index, clicked]);
    if (this.slideshow == null) return false;
    this.slideshow.loadImage(index, this.options.showSlideOnClick);
		return this;
  },

  setupSlideShow: function(){
		var container = document.id(this.options.slideshowContainerId);
    if (container) container.destroy();
    container = new Element('div', {
			id: this.options.slideshowContainerId,
			'class': this.options.slideshowContainerClass
		});
		this.slideshowWrapper.grab(container, 'top');
		this.slideshowContainer = container; //document.id(this.options.slideshowContainerId);
		this.fireEvent('setupSlideShow');
		return this;
  },

  removeSlides: function(){
    this.slideshowContainer.empty();
    return this;
  },

	createSlides: function(){
    this.thumbnailGrid.collection.each(function(thumbnail){
			this.createSlide(thumbnail);
		}.bind(this));
		return this;
	},

	createSlide: function(thumbnail){
	  var slideContents = thumbnail.getData('slide');
	  if (!slideContents) return this;
		var slide = new Element('div', { 'class': this.options.slideClass }),
			transitionClass = thumbnail.get('data-class');
		slide.setData('slide', slideContents);
    if (transitionClass) slide.addClass(transitionClass);
		this.slideshowContainer.grab(slide);
		this.fireEvent('createSlide', slide);
		return this;
	},
	
  makeSlideShow: function(){
    var options = {
      onReverse: this.fireEvent('reverse'),
      onPlay: this.fireEvent('play'),
      onPause: this.fireEvent('pause'),
      onShow: function(slideData){
        this.thumbnailGrid.disable();
        if (slideData.next.index !== this.thumbnailGrid.current) this.thumbnailGrid.setCurrent(slideData.next.index);
        this.fireEvent('show', slideData);
      }.bind(this),
      onShowComplete: function(slideData){
        this.thumbnailGrid.enable();
        this.fireEvent('showComplete', slideData);
      }.bind(this),
      onLoadImage: function(slide, index){
        //if(this.options.ThumbnailGridOptions.useSpinner) this.thumbnailGrid.collection[index].spin();
        this.fireEvent('loadImage', index);
      }.bind(this),
      onLoadImageComplete: function(index, options){
        //if(this.options.ThumbnailGridOptions.useSpinner) this.thumbnailGrid.collection[index].unspin();
        this.fireEvent('loadImageComplete', [index, options]);
      }.bind(this)
    };
    Object.append(options, this.options.SlideShowOptions);

    this.slideshow = new SlideShow.ImagePreloading(this.options.slideshowContainerId, options);
    return this;
  },

  start: function(){
    if (this.slideshow == null) return false;
    this.slideshow.loadImage(this.thumbnailGrid.current, true);
		return this;
  }

});

})();