/*
---

script: NivooSlider.js

description: A nice image slider for MooTools.

license: MIT-style license

authors:
- Johannes Fischer

requires:
- core/1.3: '*'

provides:
- NivooSlider

...
 */

var NivooSlider = new Class({

    Implements: [Events, Options],

    caption: null,
  children: null,
    containerSize: 0,
  count: 0,
    currentSlide: 0,
    currentImage: '',
    effects: {
    // used for random effects
    common: ['fade', 'fold'],
    horizontal: ['sliceLeftUp', 'sliceLeftDown', 'sliceLeftRightDown', 'sliceLeftRightUp', 'sliceRightDown', 'sliceRightUp', 'wipeDown', 'wipeUp'],
    vertical: ['sliceDownLeft', 'sliceDownRight', 'sliceUpDownLeft', 'sliceUpDownRight', 'sliceUpLeft', 'sliceUpRight', 'wipeLeft', 'wipeRight']
  },
  holder: null,
  hover: false,
  interval: null,
  orientation: '',
    paused: false,
    running: false,
  slices: null,
  sliceSize: null,
    totalSlides: 0,

    options: {
        animSpeed: 500,
        autoPlay: true,
    directionNav: true,
    directionNavHide: false,
    directionNavWidth: '20%',
        effect: 'sliceDown', // TODO allow to pass an array with multiple effects
    interval: 3000,
    orientation: 'vertical',
    pauseOnHover: true,
    slices: 15,

    // not implemented yet
    directionNavPosition: 'inside|outside',
    preLoadImages: false

    //onFinish: function () {}
    //onLastSlide: function () {}
        //onStart: function () {}        
    },

    initialize: function (container, options)
    {
    this.container = $(container);

    this.setOptions(options);
    this.orientation = this.options.orientation;

    this.effects.horizontal.combine(this.effects.common);
    this.effects.vertical.combine(this.effects.common);

    this.initSlider();
    this.createSlices();
    if (this.options.autoPlay)
    {
      this.play();
    }
    },

  animate: function (slice, fxStyles, last)
    {
        var fx = slice.retrieve('fxInstance'),
            isLast = last !== undefined && last === true;

        fx.start(fxStyles).chain(function () {
      this.count += 1;
      if (this.count === this.options.slices || isLast)
      {
        this.running = false;

        // fire onFinish function
        this.finish();

        this.setBackgroundImage();
  
        this.count = 0;
        
        if (this.currentSlide === (this.totalSlides - 1))
        {
          this.lastSlide();
        }
      }
    }.bind(this));    
    },

  arrangeSlices: function (orientation)
  {
    var height,
            position,
            sliceSize,
            width;

    this.slices.each(function (el, i) {

      position = {
        left: orientation === 'vertical' ? this.sliceSize.x * i : 0,
        top: orientation === 'horizontal' ? this.sliceSize.y * i : 0
      };

      // set size & position
      if (orientation === 'horizontal')
      {
        height = i === this.options.slices - 1 ? this.containerSize.y - (this.sliceSize.y * i) : this.sliceSize.y;
        width = '100%';

        el.setStyles({
          height: height,
                    top: position.top,
                    width: width
                });
      }
      // if vertical
      else
      {
        height = 0;
        width = i === this.options.slices - 1 ? this.containerSize.x - (this.sliceSize.x * i) : this.sliceSize.x;

        el.setStyles({
          height: height,
          left: position.left,
          top: '',
                    width: width
                });
      }

            el.store('fxInstance', new Fx.Morph(el, {
                duration: this.options.animSpeed
            })).store('coordinates', Object.merge(position, {height: height, width: width}));
        }, this);
  },

  createCaption: function ()
  {
    this.caption = new Element('p', {
      styles: {
        opacity: 0
      }
    }).inject(this.holder);

    this.caption.store('fxInstance', new Fx.Morph(this.caption, {
      duration: 200,
      wait: false
    }));
  },

  createDirectionNav: function ()
  {
    var directionNavStyles,
            leftContainer,
            rightContainer,
            width;

    width = this.options.directionNavWidth;

    directionNavStyles = {
      height: this.containerSize.y,
      width: width
    };

    // create container
    leftContainer = new Element('div.direction-nav-left', {
      styles: directionNavStyles
    }).inject(this.holder);
    
    rightContainer = new Element('div.direction-nav-right', {
      styles: directionNavStyles
    }).inject(this.holder);
    
    // create controls

    this.leftNav = new Element('a', {
      events: {
        'click': function (e) {
          e.stop();
          if (this.options.autoPlay)
          {
            this.pause();
            if (!this.options.pauseOnHover)
            {
              this.play();
            }
          }
          this.previous();
        }.bind(this)  
      },
      href: '#',
      styles: {
        height: directionNavStyles.height
      }
    }).inject(leftContainer);
    
    this.rightNav = new Element('a', {
      events: {
        'click': function (e) {
          e.stop();
          if (this.options.autoPlay)
          {
            this.pause();
            if (!this.options.pauseOnHover)
            {
              this.play();
            }
          }
          this.next();
        }.bind(this)  
      },
      href: '#',
      styles: {
        height: directionNavStyles.height
      }
    }).inject(rightContainer);

    if (this.options.directionNavHide && this.options.directionNav)
    {
      $$(this.leftNav, this.rightNav).setStyle('opacity', 0);
      this.holder.addEvents({
        'mouseout': function () {
          $$(this.leftNav, this.rightNav).fade(0);
        }.bind(this),
        'mouseover': function () {
          $$(this.leftNav, this.rightNav).fade(1);  
        }.bind(this)
      });
    }
  },
    
  createLinkHolder: function ()
  {
    this.linkHolder = new Element('a.nivoo-link', {
      href: '#'
    }).inject(this.holder);
  },
  
    createSlices: function ()
    {
    this.sliceSize = {
      x: (this.containerSize.x / this.options.slices).round(),
      y: (this.containerSize.y / this.options.slices).round()
    };

    // effects that need one slice only
    if (['fade', 'wipeLeft', 'wipeRight'].contains(this.options.effect))
    {
      this.options.slices = 1;
    }

        this.options.slices.each(function (i) { 
            new Element('div.nivoo-slice').inject(this.holder);
        }, this);
    
    this.slices = this.getSlices();

    this.arrangeSlices(this.options.orientation);
    },
    
  getImages: function ()
  {
    return this.holder.getElements('img');  
  },
  
    getSlices: function ()
    {
        return this.holder.getElements('.nivoo-slice');    
    },
  
    initSlider: function ()
    {
    // wrap child elements
    this.holder = new Element('div.nivoo-slider-holder').adopt(this.container.getChildren()).inject(this.container);

        this.containerSize = this.holder.getSize();

        // Find our slider children
        this.children = this.getImages();

        this.totalSlides = this.children.length;

        this.children.setStyle('display', 'none');

        this.currentImage = this.children[0];

    // init LinkHolderand set link
    this.createLinkHolder();
    this.setLink();

        // Set first background
    this.holder.setStyle('background-image', 'url(' + this.currentImage.get('src') + ')');

    this.createCaption();

    this.showCaption();
    
    // attach pauseOnHover    
    if (this.options.pauseOnHover && this.options.autoPlay)
    {
      this.holder.addEvents({
        'mouseenter': function () {
          this.pause();
        }.bind(this),
        'mouseleave': function () {
          this.play();
        }.bind(this)
      });
    }

    // create directional navigation
    if (this.options.directionNav)
    {
      this.createDirectionNav();
    }
    },
  
  hideCaption: function ()
  {
    this.caption.retrieve('fxInstance').start({
      bottom: this.caption.getHeight() * -1,
      opacity: 0.5
    });
  },

  next: function ()
  {
    this.currentSlide += 1;

    if (this.currentSlide === this.totalSlides)
    {
      this.currentSlide = 0;
    }

    this.slide();
  },

  pause: function ()
  {
    window.clearInterval(this.interval);
  },

  play: function ()
  {
    this.interval = this.next.periodical(this.options.interval, this);
  },
  
  previous: function ()
  {
    if (this.options.autoPlay)
    {
      this.pause();
      if (!this.options.pauseOnHover)
      {
        this.play();
      }
    }

    this.currentSlide -= 1;

        if (this.currentSlide < 0)
    {
      this.currentSlide = (this.totalSlides - 1);
    }

    this.slide();
  },
  
  showCaption: function ()
  {
    var title = this.currentImage.get('title');

    if (!title)
    {
      this.hideCaption();
      return;
    }
    
    this.setCaptionText(title);

    this.caption.retrieve('fxInstance').start({
      bottom: 0,
      opacity: 1  
    });
  },
  
    slide: function (slideNo)
    {
    var coordinates,
            effect,
            orientation,
            slice,
            slices,
            styles,
            timeBuff;
    
    if (this.running)
    {
      return;
    }

    if (this.options.orientation === 'random')
    {
      orientation = ['horizontal', 'vertical'].getRandom();
    }
    else
    {
      orientation = this.options.orientation;
    }
    
    if (orientation !== this.orientation)
    {
      this.arrangeSlices(orientation);
      this.orientation = orientation;
    }

    if (slideNo !== undefined)
    {
      this.currentSlide = slideNo;
    }

        // Set currentImage
        this.currentImage = this.children[this.currentSlide];

        this.setLink();

        // Process caption
    this.showCaption();

    // TODO use this.slices within each loop instead
        slices = this.slices;
    timeBuff = 0;

    // reset slices
        this.slices.each(function (slice) {

      coordinates =  slice.retrieve('coordinates');

            slice.setStyles({
                background: 'url(' + this.currentImage.get('src') + ') no-repeat -' + coordinates.left + 'px ' + coordinates.top * -1 + 'px',
        bottom: '',
        height: coordinates.height,
        left: coordinates.left,
                opacity: 0,
        right: '',
        top: coordinates.top,
        width: coordinates.width
            });

      var property = orientation === 'horizontal' ? 'width' : 'height';

      slice.setStyle(property, 0);
        }, this);
    
    // fire onStart function
        this.start();
  
        // Run effects
        this.running = true;

    effect = this.options.effect;

    if (effect === 'random')
        {
            effect = this.effects[orientation].getRandom();
        }

    // vertical effects
        if (['sliceDownRight', 'sliceDownLeft'].contains(effect))
        {
            if (effect === 'sliceDownLeft')
            {
                slices = slices.reverse();
            }

            slices.each(function (slice) {
                slice.setStyle('top', 0);

                this.animate.delay(100 + timeBuff, this, [slice, {height: this.containerSize.y, opacity: 1}]);

                timeBuff += 50;
            }, this);
        }
        else if (['sliceUpRight', 'sliceUpLeft'].contains(effect))
        {
            if (effect === 'sliceUpLeft')
            {
                slices = slices.reverse();
            }

            slices.each(function (slice) {
                var fx = slice.retrieve('fxInstance');
                
                slice.setStyle('bottom', 0);

                this.animate.delay(100 + timeBuff, this, [slice, {height: this.containerSize.y, opacity: 1}]);

                timeBuff += 50;
            }, this);
        }
        else if (['sliceUpDownRight', 'sliceUpDownLeft'].contains(effect))
        {
            if (effect === 'sliceUpDownLeft')
            {
                slices = slices.reverse();
            }

            slices.each(function (slice, i) {
                if (i % 2 === 0)
                {
                    slice.setStyle('top', 0);
                }
                else
                {
                    slice.setStyles({
            bottom:  0,
            top: ''
          });
                }

                this.animate.delay(100 + timeBuff, this, [slice, {height: this.containerSize.y, opacity: 1}]);

                timeBuff += 50;
            }, this);
        }
    else if (['wipeLeft', 'wipeRight'].contains(effect))
        {
      styles = {
        height: this.containerSize.y,
        opacity: 1,
        width: 0
      };

      if (effect === 'wipeRight')
      {
        Object.append(styles, {
          backgroundPosition: 'top right',
          left: '',
          right: 0
        });
      }
      
      slice = slices[0];

      slice.setStyles(styles);
      this.animate(slice, {width: this.containerSize.x}, true);
        }

    // horizontal effects   
    else if (['sliceLeftUp', 'sliceLeftDown', 'sliceRightDown', 'sliceRightUp'].contains(effect))
    {
      if (effect === 'sliceLeftUp' || effect === 'sliceRightUp')
            {
                slices = slices.reverse();
            }
      
      if (effect === 'sliceRightDown' || effect === 'sliceRightUp')
      {
        slices.setStyles({
          left: '',
          right: 0
        });
      }
      else
      {
        slices.setStyles({
          left: 0,
          right: ''
        });
      }

            slices.each(function (slice) {    
                this.animate.delay(100 + timeBuff, this, [slice, {opacity: 1, width: this.containerSize.x}]);

                timeBuff += 50;
            }, this);
    }
    else if (['sliceLeftRightDown', 'sliceLeftRightUp'].contains(effect))
        {
            if (effect === 'sliceLeftRightUp')
            {
                slices = slices.reverse();
            }

            slices.each(function (slice, i) {
                if (i % 2 === 0)
                {
                    slice.setStyles({
            left: 0,
            right: ''
          });
                }
                else
                {
                    slice.setStyles({
            left: '',
            right: 0
          });
                }

                this.animate.delay(100 + timeBuff, this, [slice, {opacity: 1, width: this.containerSize.x}]);

                timeBuff += 50;
            }, this);
        }
    else if (['wipeDown', 'wipeUp'].contains(effect))
        {
      styles = {
        height: 0,
        opacity: 1,
        width: this.containerSize.x
      };

      if (effect === 'wipeUp')
      {
        Object.append(styles, {
          backgroundPosition: 'bottom left',
          bottom: 0,
          top: ''
        });
      }
      
      slice = slices[0];

      slice.setStyles(styles);
      this.animate(slice, {height: this.containerSize.y}, true);
        }

    // horizontal or vertical   
        else if (effect === 'fold')
        {
            slices.each(function (slice) {
        var fxStyles = {
          opacity: 1  
        };

        if (orientation === 'horizontal')
        {
          fxStyles.height = slice.getHeight();
  
          slice.setStyles({
            height: 0,
            width: this.containerSize.x
          });
        }
        else
        {
          fxStyles.width = slice.getWidth();
  
          slice.setStyles({
            height: this.containerSize.y,
            top: 0,
            width: 0
          });
        }

        this.animate.delay(100 + timeBuff, this, [slice, fxStyles]);        
                timeBuff += 50;
            }, this);
        }
        else  // if (effect == 'fade')
        {
      slice = slices[0];

      slice.setStyles({
        height: this.containerSize.y,
        width: this.containerSize.x 
      });

            this.animate(slice, {opacity: 1}, true);
        }
    },
   
  setBackgroundImage: function ()
  {
    this.holder.setStyle('background-image', 'url(' + this.currentImage.get('src') + ')');
  },
  
  setCaptionText: function (text)
  {
    this.caption.set('text', text);
  },
  
  setLink: function ()
  {
    //Set active link
    var clone,
            imageParent = this.currentImage.getParent();

        if (imageParent.get('tag') === 'a')
    {
      clone = imageParent.clone(false).cloneEvents(imageParent);
      clone.replaces(this.linkHolder);
      this.linkHolder = clone;
      this.linkHolder.addClass('nivoo-link').setStyle('display', 'block');
    }
    else
    {
      this.linkHolder.setStyle('display', 'none');
    }
  },   
    
    /**
     * Events
     */
    
    finish: function ()
    {
        this.fireEvent('finish');
    },

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

    start: function ()
    {
        this.fireEvent('start');
    }

});