/*
MooSizer - a fullscreen Background/Slideshow MooTools Plugin

License:
  MIT-style license.

Credits:
  loosely based upon MooSizer by Markus Timtner ( <http://mtness.net> ) 2009-03-27 1100-1500 GMT+1
  refactured by posttoast ( <http://posttoast.nl> ) 2009-11-15
*/

var mooSizer = new Class({

  Implements: [Options, Events],
  options: {
    imageContainer: '',
    allowCropping: true,
    padding: 0,
    controlNext: '',
    controlPrevious: '',
    initialImageSize: ''
  },

  initialize: function(options){
    this.setOptions(options);

    window.addEvent('domready', function(){
      this.setupSlideshow();
    }.bind(this));

    window.addEvent('load', function(){
      this.prepareActiveImage();
    }.bind(this));

    window.addEvent('resize', function(){
      this.scaleImage();
    }.bind(this));

  },

  prepareActiveImage: function(){
    this.getImageSize();
    this.scaleImage();
    this.options.imageContainer.getFirst('.active').setStyle('visibility', 'visible');
  },

  getImageSize: function(){
    this.options.initialImageSize = this.options.imageContainer.getFirst('.active').getSize();
    this.options.imageAspectRatio = this.options.initialImageSize.y / this.options.initialImageSize.x;
  },

  scaleImage: function(){
    var image               = this.options.imageContainer.getFirst('.active');
    var initialImageWidth   = this.options.initialImageSize.x;
    var initialImageHeight  = this.options.initialImageSize.y;
    var browserSize         = window.getSize();
    var browserWidth        = browserSize.x;
    var browserHeight       = browserSize.y;
    var padding             = this.options.padding;
    var imageAspectRatio    = this.options.imageAspectRatio;

    var imageWidth = browserWidth - (padding * 2);
    var imageHeight = imageWidth * imageAspectRatio;

    if (imageHeight > browserHeight){
      imageHeight = browserHeight - (padding * 2);
      imageWidth = imageHeight / imageAspectRatio;
    }

    // Center the image
    var imagePositionLeft = (browserWidth - imageWidth) / 2;
    var imagePositionTop = (browserHeight - imageHeight) / 2;
    
    image.setStyles({
      'width': imageWidth,
      'top': imagePositionTop,
      'left': imagePositionLeft
    });

  },

  showNextImage: function(){
    var activeSlide = this.options.imageContainer.getFirst('.active');

      // Check if there is a next slide, otherwise return to first
      if (activeSlide.getNext()){
        var nextSlide = activeSlide.getNext();
      }else {
        var nextSlide = this.options.imageContainer.getFirst('img')
      }
      activeSlide.removeClass('active');
      nextSlide.addClass('active');
      // This really shouldn't be here, but I am in a hurry. TODO: add a callback function to this class!
      if ($('photoinfo')){
        var imageIdArray = nextSlide.getProperty('id').split('-');
        var imageId = imageIdArray[1];
        $('photoinfo').getElements('div').removeClass('active');
        $('photoinfo-'+imageId).addClass('active');
      }
      this.prepareActiveImage();
  },

  showPreviousImage: function(){
    var activeSlide = this.options.imageContainer.getFirst('.active');

    // Check if there is a previous slide, otherwise return to last
    if (activeSlide.getPrevious()){
      var previousSlide = activeSlide.getPrevious();
    }else {
      var previousSlide = this.options.imageContainer.getLast('img')
    }
    activeSlide.removeClass('active');
    previousSlide.addClass('active');
    // This really shouldn't be here, but I am in a hurry. TODO: add a callback function to this class!
      if ($('photoinfo')){
        var imageIdArray = previousSlide.getProperty('id').split('-');
        var imageId = imageIdArray[1];
        $('photoinfo').getElements('div').removeClass('active');
        $('photoinfo-'+imageId).addClass('active');
      }
    this.prepareActiveImage();
  },

  setupSlideshow: function(){
    // Activate the first slide
    this.options.imageContainer.getFirst('img').addClass('active');
    this.options.imageContainer.getFirst('img').setStyle('visibility', 'visible');

    var controlNext = this.options.controlNext;
    var controlPrevious = this.options.controlPrevious;
    var slideshowImages = this.options.imageContainer.getElements('img');

    controlNext.addEvent('click', function(){
      this.showNextImage();
    }.bind(this));

    controlPrevious.addEvent('click', function(){
      this.showPreviousImage();
    }.bind(this));

    // Add keyboard navigation
    window.addEvent('keyup', function(event){
			if (event.key == 'left'){
        this.showPreviousImage();
      }else if (event.key == 'right'){
        this.showNextImage();
      }
		}.bind(this));
  }

});