/**
Script: Slideshow.js
  Slideshow - A javascript class for Mootools to stream and animate the presentation of images on your website.

License:
  MIT-style license.

Copyright:
  Copyright (c) 2011 [Aeron Glemann](http://www.electricprism.com/aeron/).

Dependencies:
  Mootools 1.3.1 Core: Fx.Morph, Fx.Tween, Selectors, Element.Dimensions.
  Mootools 1.3.1.1 More: Assets.
*/
(function(){
  WhenPaused = 1 << 0;
  WhenPlaying = 1 << 1;
  OnStart = 1 << 2;
  
  Slideshow = new Class({
    Implements: [Chain, Events, Options],

    options: {/*
      onComplete: $empty,
      onEnd: $empty,
      onStart: $empty,*/
        accesskeys: {'first': {'key': 'shift left', 'label': 'Shift + Leftwards Arrow'}, 'prev': {'key': 'left', 'label': 'Leftwards Arrow'}, 'pause': {'key': 'p', 'label': 'P'}, 'next': {'key': 'right', 'label': 'Rightwards Arrow'}, 'last': {'key': 'shift right', 'label': 'Shift + Rightwards Arrow'}},
      captions: true,
      center: true,
      classes: [/*'slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'images', 'captions', 'controller', 'thumbnails', 'hidden', 'visible', 'inactive', 'active', 'loader'*/],
      controller: true,
      data: null,
      delay: 2000,
      duration: 1000,
      fast: false,
      height: false,
      href: '',
      hu: '',
      linked: false,
      loader: true,
      loop: true,
      match: /\?slide=(\d+)$/,
      overlap: true,
      paused: false,
      random: false,
      replace: [/(\.[^\.]+)$/, 't$1'],
      resize: 'fill',
      slide: 0,
      thumbnails: true,
      titles: false,
      transition: 'sine:in:out',
      width: false
    },

  /**
  Constructor: initialize
    Creates an instance of the Slideshow class.

  Arguments:
    element - (element) The wrapper element.
    data - (array or object) The images and optional thumbnails, captions and links for the show.
    options - (object) The options below.

  Syntax:
    var myShow = new Slideshow(element, data, options);
  */

    initialize: function(el, data, options){
      this.setOptions(options);
      this.el = document.id(el);
      if (!this.el) 
        return;
      var match = window.location.href.match(this.options.match);
      this.slide = this._slide = this.options.match && match ? match[1].toInt() 
        : this.options.slide;
      this.counter = this.timeToNextTransition = this.timeToTransitionComplete = 0;
      this.direction = 'left';
      this.cache = {};
      this.paused = false;
      if (!this.options.overlap)
        this.options.duration *= 2;
      var anchor = this.el.getElement('a') || new Element('a');
      if (!this.options.href)
        this.options.href = anchor.get('href') || '';
      if (this.options.hu.length && !this.options.hu.test(/\/$/)) 
        this.options.hu += '/';
      if (this.options.fast === true)
        this.options.fast = WhenPaused | WhenPlaying;

      // styles

      var keys = 'slideshow first prev play pause next last images captions controller thumbnails hidden visible inactive active loader'.split(' '),
        values = keys.map(function(key, i){
          return this.options.classes[i] || key;
        }, this);
      this.classes = values.associate(keys);
      this.classes.get = function(){
        var str = '.' + this.slideshow;
        for (var i = 0, l = arguments.length; i < l; i++)
          str += '-' + this[arguments[i]];
        return str;
      }.bind(this.classes);

      // data  
      
      if (!data){
        this.options.hu = '';
        data = {};
        var thumbnails = this.el.getElements(this.classes.get('thumbnails') + ' img');
        this.el.getElements(this.classes.get('images') + ' img').each(function(img, i){
          var src = img.src,
            caption = img.alt || img.title,
            href = img.getParent().href,
            thumbnail = thumbnails[i] ? thumbnails[i].src 
              : '';
          data[src] = {'caption': caption, 'href': href, 'thumbnail': thumbnail};
        });
      }
      var loaded = this.load(data);
      if (!loaded)
        return; 

      // events

      this.events = {};
      this.events.push = function(type, fn){
        if (!this[type])
          this[type] = [];
        this[type].push(fn);
        document.addEvent(type, fn);
        return this;
      }.bind(this.events);

      this.accesskeys = {};
      for (action in this.options.accesskeys){
        var obj = this.options.accesskeys[action];
        this.accesskeys[action] = accesskey = {'label': obj.label};
        ['shift', 'control', 'alt'].each(function(modifier){
          var re = new RegExp(modifier, 'i');
          accesskey[modifier] = obj.key.test(re);
          obj.key = obj.key.replace(re, '');
        });
        accesskey.key = obj.key.trim();
      }

      this.events.push('keyup', function(e){
        Object.each(this.accesskeys, function(accesskey, action){
          if (e.key == accesskey.key && e.shift == accesskey.shift && e.control == accesskey.control && e.alt == accesskey.alt)
            this[action]();
        }, this);      
      }.bind(this));   

      // required elements

      var el = this.el.getElement(this.classes.get('images')),
        img = this.el.getElement('img') || new Element('img'),
        images = el ? el.empty() 
          : new Element('div', {'class': this.classes.get('images').substr(1)}).inject(this.el),
        div = images.getSize();
      this.height = this.options.height || div.y;    
      this.width = this.options.width || div.x;
      images.set({'styles': {'height': this.height, 'width': this.width}});
      this.el.store('images', images);
      this.a = this.image = img;
      if (Browser.ie && Browser.version >= 7)
        this.a.style.msInterpolationMode = 'bicubic';
      this.a.set('styles', {'display': 'none'});
      this.b = this.a.clone();
      [this.a, this.b].each(function(img){
        anchor.clone().cloneEvents(anchor).grab(img).inject(images);
      });

      // optional elements

      this.options.captions && new Caption(this);
      this.options.controller && new Controller(this);
      this.options.loader && new Loader(this);
      this.options.thumbnails && new Thumbnails(this);

      // begin show

      this._preload(this.options.fast & OnStart);
    },

  /**
  Public method: go
    Jump directly to a slide in the show.

  Arguments:
    n - (integer) The index number of the image to jump to, 0 being the first image in the show.

  Syntax:
    myShow.go(n);  
  */

    go: function(n, direction){
      var nextSlide = (this.slide + this.data.images.length) % this.data.images.length;
      if (n == nextSlide || Date.now() < this.timeToTransitionComplete)
        return;    
      clearTimeout(this.timer);
      this.timeToNextTransition = 0;    
      this.direction = direction ? direction 
        : n < this._slide ? 'right' 
        : 'left';
      this.slide = this._slide = n;
      if (this.preloader) 
        this.preloader = this.preloader.destroy();
      this._preload((this.options.fast & WhenPlaying) || (this.paused && this.options.fast & WhenPaused));
    },

  /**
  Public method: first
    Goes to the first image in the show.

  Syntax:
    myShow.first();  
  */

    first: function(){
      this.prev(true); 
    },

  /**
  Public method: prev
    Goes to the previous image in the show.

  Syntax:
    myShow.prev();  
  */

    prev: function(first){
      var n = 0;
      if (!first){
        if (this.options.random){
          if (this.showed.i < 2)
            return;
          this.showed.i -= 2;
          n = this.showed.array[this.showed.i];
        }
        else
          n = (this.slide - 1 + this.data.images.length) % this.data.images.length;                  
      }
      this.go(n, 'right');
    },

  /**
  Public method: pause
    Toggles play / pause state of the show.

  Arguments:
    p - (undefined, 1 or 0) Call pause with no arguments to toggle the pause state. Call pause(1) to force pause, or pause(0) to force play.

  Syntax:
    myShow.pause(p);  
  */

    pause: function(p){
      if (p != undefined)
        this.paused = p ? false 
          : true;
      if (this.paused){ // play
        this.paused = false;
        this.timeToTransitionComplete = Date.now() + this.timeToTransitionComplete;    
        this.timer = this._preload.delay(50, this);
        [this.a, this.b].each(function(img){
          ['morph', 'tween'].each(function(p){
            if (this.retrieve(p)) this.get(p).resume();
          }, img);
        });
        this.controller && this.el.retrieve('pause').getParent().removeClass(this.classes.play);
      } 
      else { // pause
        this.paused = true;
        this.timeToTransitionComplete = this.timeToTransitionComplete - Date.now();
        clearTimeout(this.timer);
        [this.a, this.b].each(function(img){
          ['morph', 'tween'].each(function(p){
            if (this.retrieve(p)) this.get(p).pause();
          }, img);
        });
        this.controller && this.el.retrieve('pause').getParent().addClass(this.classes.play);
      }
    },

  /**
  Public method: next
    Goes to the next image in the show.

  Syntax:
    myShow.next();  
  */

    next: function(last){
      var n = last ? this.data.images.length - 1 
        : this._slide;
      this.go(n, 'left');
    },

  /**
  Public method: last
    Goes to the last image in the show.

  Syntax:
    myShow.last();  
  */

    last: function(){
      this.next(true); 
    },

  /**
  Public method: load
    Loads a new data set into the show: will stop the current show, rewind and rebuild thumbnails if applicable.

  Arguments:
    data - (array or object) The images and optional thumbnails, captions and links for the show.

  Syntax:
    myShow.load(data);
  */

    load: function(data){
      this.firstrun = true;
      this.showed = {'array': [], 'i': 0};
      if (typeOf(data) == 'array'){
        this.options.captions = false;      
        data = new Array(data.length).associate(data.map(function(image, i){ return image + '?' + i })); 
      }
      this.data = {'images': [], 'captions': [], 'hrefs': [], 'thumbnails': [], 'targets': [], 'titles': []};
      for (var image in data){
        var obj = data[image] || {},
          image = this.options.hu + image,
          caption = obj.caption ? obj.caption.trim() 
            : '',
          href = obj.href ? obj.href.trim() 
            : this.options.linked ? image 
            : this.options.href,
          target = obj.target ? obj.target.trim() 
            : '_self',
          thumbnail = obj.thumbnail ? this.options.hu + obj.thumbnail.trim() 
            : image.replace(this.options.replace[0], this.options.replace[1]),
          title = caption.replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'");
        this.data.images.push(image);
        this.data.captions.push(caption);
        this.data.hrefs.push(href);
        this.data.targets.push(target);
        this.data.thumbnails.push(thumbnail);
        this.data.titles.push(title);
      }
      if (this.options.random)
        this.slide = this._slide = Number.random(0, this.data.images.length - 1);

      // only run when data is loaded dynamically into an existing slideshow instance

      if (this.options.thumbnails && this.el.retrieve('thumbnails'))
        this._thumbnails();
      if (this.el.retrieve('images')){
        [this.a, this.b].each(function(img){
          ['morph', 'tween'].each(function(p){
            if (this.retrieve(p)) this.get(p).cancel();
          }, img);
        });
        this.slide = this._slide = this.timeToTransitionComplete = 0;
        this.go(0);    
      }
      return this.data.images.length;
    },

  /**
  Public method: destroy
    Destroys a Slideshow instance.

  Arguments:
    p - (string) The images and optional thumbnails, captions and links for the show.

  Syntax:
    myShow.destroy(p);
  */

    destroy: function(p){
      Object.each(this.events, function(array, e){
        if ('each' in array)
          array.each(function(fn){ document.removeEvent(e, fn); });
      });
      this.pause(1);
      'caption loader thumbnails'.split(' ').each(function(i, timer){
        this.options[i] && (timer = this[i].retrieve('timer')) && clearTimeout(timer);
      }, this);
      typeOf(this.el[p]) == 'function' && this.el[p]();
      delete this.el.uid;
    },

  /**
  Private method: preload
    Preloads the next slide in the show, once loaded triggers the show, updates captions, thumbnails, etc.
  */

    _preload: function(fast){
      var src = this.data.images[this._slide].replace(/([^?]+).*/, '$1'),
        cached = loaded = !!this.cache[src];
      if (!cached){
        if (!this.preloader)
           this.preloader = new Asset.image(src, {
            'onerror': function(){
              // do something
            },
            'onload': function(){
              this.store('loaded', true);
            }
          });
        loaded = this.preloader.retrieve('loaded') && this.preloader.get('width');
      }
      if (loaded && Date.now() > this.timeToNextTransition && Date.now() > this.timeToTransitionComplete){
        var src = this.data.images[this._slide].replace(/([^?]+).*/, '$1');
        if (this.preloader){
          this.cache[src] = {
            'height': this.preloader.get('height'),
            'src': src,
            'width': this.preloader.get('width')
          }
        }
        if (this.stopped){
          if (this.options.captions)
            this.caption.get('morph').cancel().start(this.classes.get('captions', 'hidden'));
          this.pause(1);
          if (this.end)
            this.fireEvent('end');
          this.stopped = this.end = false;
          return;        
        }
        this.image = this.counter % 2 ? this.b 
          : this.a;
        this.image.set('styles', {'display': 'block', 'height': null, 'visibility': 'hidden', 'width': null, 'zIndex': this.counter});
        this.image.set(this.cache[src]);
        this.image.width = this.cache[src].width;
        this.image.height = this.cache[src].height;
        this.options.resize && this._resize(this.image);
        this.options.center && this._center(this.image);
        var anchor = this.image.getParent();
        if (this.data.hrefs[this._slide]){
          anchor.set('href', this.data.hrefs[this._slide]);
          anchor.set('target', this.data.targets[this._slide]);      
        } 
        else {
          anchor.erase('href');
          anchor.erase('target');
        }
        var title = this.data.titles[this._slide];
        this.image.set('alt', title);    
        this.options.titles && anchor.set('title', title);
        this.options.loader && this.loader.fireEvent('hide');
        this.options.captions && this.caption.fireEvent('update', fast);        
        this.options.thumbnails && this.thumbnails.fireEvent('update', fast);       
        this._show(fast);
        this._loaded(fast);
      } 
      else {
        if (Date.now() > this.timeToNextTransition && this.options.loader)
          this.loader.fireEvent('show');
        this.timer = this._preload.delay(50, this, fast); 
      }
    },

  /**
  Private method: show
    Does the slideshow effect.
  */

    _show: function(fast){
      if (!this.image.retrieve('morph')){
        var options =  this.options.overlap ? {'link': 'cancel'} : {'link': 'chain'};
        $$(this.a, this.b).set('morph', Object.merge(options, {'duration': this.options.duration, 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'transition': this.options.transition}));
      }
      var hidden = this.classes.get('images', (this.direction == 'left' ? 'next' 
        : 'prev')),
        visible = this.classes.get('images', 'visible'),
        img = this.counter % 2 ? this.a 
          : this.b;
      if (fast){      
        img.get('morph').cancel().set(hidden);
        this.image.get('morph').cancel().set(visible);       
      } 
      else {
        if (this.options.overlap){
          img.get('morph').set(visible);
          this.image.get('morph').set(hidden).start(visible);
        } 
        else {
          var fn = function(visible){
            this.image.get('morph').start(visible);
          }.pass(visible, this);
          if (this.firstrun)
            return fn();
          hidden = this.classes.get('images', (this.direction == 'left' ? 'prev' 
            : 'next'));
          this.image.get('morph').set(hidden);        
          img.get('morph').set(visible).start(hidden).chain(fn);
        }
      }
    },

  /**
  Private method: loaded
    Run after the current image has been loaded, sets up the next image to be shown.
  */

    _loaded: function(fast){
      this.counter++;
      this.timeToNextTransition = Date.now() + this.options.duration + this.options.delay;
      this.direction = 'left';      
      this.timeToTransitionComplete = fast ? 0 
        : Date.now() + this.options.duration;
      if (this._slide == (this.data.images.length - 1) && !this.options.loop && !this.options.random)
        this.stopped = this.end = true;
      if (this.options.random){
        this.showed.i++;
        if (this.showed.i >= this.showed.array.length){
          var n = this._slide;
          if (this.showed.array.getLast() != n) this.showed.array.push(n);
          while (this._slide == n)
            this.slide = this._slide = Number.random(0, this.data.images.length - 1);        
        }
        else
          this.slide = this._slide = this.showed.array[this.showed.i];
      }
      else {
        this.slide = this._slide;
        this._slide = (this.slide + 1) % this.data.images.length;
      }
      if (this.image.getStyle('visibility') != 'visible')
        (function(){ this.image.setStyle('visibility', 'visible'); }).delay(1, this);      
      if (this.preloader) 
        this.preloader = this.preloader.destroy();
      this.paused || this._preload();
    },

  /**
  Private method: center
    Center an image.
  */

    _center: function(img){
      var size = img.getSize(), 
        h = size.y, w = size.x; 
      img.set('styles', {'left': (w - this.width) / -2, 'top': (h - this.height) / -2});
    },

  /**
  Private method: resize
    Resizes an image.
  */

    _resize: function(img){
      var h = img.get('height').toFloat(), w = img.get('width').toFloat(),
        dh = this.height / h, dw = this.width / w;
      if (this.options.resize == 'fit')
        dh = dw = dh > dw ? dw 
          : dh;
      if (this.options.resize == 'fill')
        dh = dw = dh > dw ? dh 
          : dw;
      img.set('styles', {'height': Math.ceil(h * dh), 'width': Math.ceil(w * dw)});
    },

  /**
  Private method: start
    Callback on start of slide change.
  */

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

  /**
  Private method: complete
    Callback on start of slide change.
  */

    _complete: function(){
      if (this.firstrun && this.options.paused)
        this.pause(1);
      this.firstrun = false;
      this.fireEvent('complete');
    }  
  });

  /**
  Private method: captions
    Builds the optional caption element, adds interactivity.
    This method can safely be removed if the captions option is not enabled.
  */

  var Caption = new Class({
    Implements: [Chain, Events, Options],

    options: {/*
      duration: 500,
      fps: 50,
      transition: 'sine:in:out',
      unit: false, */
      delay: 0,
      link: 'cancel'      
    },

    initialize: function(slideshow){
      if (!slideshow)
        return;
      var options = slideshow.options.captions;
      if (options === true)
        options = {};
      this.setOptions(options);
      var el = slideshow.el.getElement(slideshow.classes.get('captions')),
        caption = el ? el.dispose().empty()
          : new Element('div', {'class': slideshow.classes.get('captions').substr(1)});
      slideshow.caption = caption;
      caption.set({
          'aria-busy': false,
          'aria-hidden': false,
        'events': { 'update': this.update.bind(slideshow) },
        'morph': this.options,
        'role': 'description'
      }).store('delay', this.options.delay);
        if (!caption.get('id'))
          caption.set('id', 'Slideshow-' + Date.now());
        slideshow.el.retrieve('images').set('aria-labelledby', caption.get('id'));
      caption.inject(slideshow.el);
    },

    update: function(fast){
        var empty = !this.data.captions[this._slide].length, timer;
      if (timer = this.caption.retrieve('timer'))
        clearTimeout(timer);
        if (fast){
          var p = empty ? 'hidden' 
        : 'visible';
          this.caption.set({'aria-hidden': empty, 'html': this.data.captions[this._slide]}).get('morph').cancel().set(this.classes.get('captions', p));
        }
        else {
          var fn1 = empty ? function(){} 
        : function(caption){
        this.caption.store('timer', setTimeout(function(caption){
              this.caption.set('html', caption).morph(this.classes.get('captions', 'visible'));
        }.pass(caption, this), this.caption.retrieve('delay')));
          }.pass(this.data.captions[this._slide], this);    
          var fn2 = function(){ 
            this.caption.set('aria-busy', false); 
          }.bind(this);
          this.caption.set('aria-busy', true).get('morph').cancel().start(this.classes.get('captions', 'hidden')).chain(fn1, fn2);
        }
    }
  });

  /**
  Private method: controller
    Builds the optional controller element, adds interactivity.
    This method can safely be removed if the controller option is not enabled.
  */

  var Controller = new Class({
    Implements: [Chain, Events, Options],

    options: {/*
      duration: 500,
      fps: 50,
      transition: 'sine:in:out',
      unit: false, */
      link: 'cancel'      
    },

    initialize: function(slideshow){
      if (!slideshow)
        return;
      var options = slideshow.options.captions;
      if (options === true)
        options = {};
      this.setOptions(options);
      var el = slideshow.el.getElement(slideshow.classes.get('controller')),
        controller = el ? el.dispose().empty()
          : new Element('div', {'class': slideshow.classes.get('controller').substr(1)});
      slideshow.controller = controller;
      controller.set({
        'aria-hidden': false, 
        'role': 'menubar'
      });
      var ul = new Element('ul', {'role': 'menu'}).inject(controller),
        i = 0;
      Object.each(slideshow.accesskeys, function(accesskey, action){
        var li = new Element('li', {
          'class': (action == 'pause' && this.options.paused) ? this.classes.play + ' ' + this.classes[action] 
            : this.classes[action]
        }).inject(ul);
        var a = this.el.retrieve(action, new Element('a', {
          'role': 'menuitem', 'tabindex': i++, 'title': accesskey.label
        }).inject(li));
        a.set('events', {
          'click': function(action){
            this[action]()
          }.pass(action, this),
          'mouseenter': function(active){
            this.addClass(active)
          }.pass(this.classes.active, a),
          'mouseleave': function(active){
            this.removeClass(active)
          }.pass(this.classes.active, a)
        });    
      }, slideshow);
      controller.set({
        'events': {
          'hide': this.hide.pass(slideshow.classes.get('controller', 'hidden'), controller),
          'show': this.show.pass(slideshow.classes.get('controller', 'visible'), controller)
        },
        'morph': this.options
      }).store('hidden', false);
      slideshow.events
        .push('keydown', this.keydown.bind(slideshow))
        .push('keyup',  this.keyup.bind(slideshow))
        .push('mousemove',  this.mousemove.bind(slideshow));
      controller.inject(slideshow.el).fireEvent('hide');
    },

    hide: function(hidden){
      if (this.get('aria-hidden') == 'false')
        this.set('aria-hidden', true).morph(hidden);
    },

    keydown: function(e){
      Object.each(this.accesskeys, function(accesskey, action){
        if (e.key == accesskey.key && e.shift == accesskey.shift && e.control == accesskey.control && e.alt == accesskey.alt){
          if (this.controller.get('aria-hidden') == 'true')
            this.controller.get('morph').set(this.classes.get('controller', 'visible'));
          this.el.retrieve(action).fireEvent('mouseenter');
        }          
      }, this);    
    },

    keyup: function(e){
      Object.each(this.accesskeys, function(accesskey, action){
        if (e.key == accesskey.key && e.shift == accesskey.shift && e.control == accesskey.control && e.alt == accesskey.alt){
          if (this.controller.get('aria-hidden') == 'true')
            this.controller.set('aria-hidden', false).fireEvent('hide'); 
          this.el.retrieve(action).fireEvent('mouseleave');
        }          
      }, this);      
    },

    mousemove: function(e){
      var images = this.el.retrieve('images').getCoordinates(),
        action = (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom) ? 'show' 
          : 'hide';
      this.controller.fireEvent(action);
    },

    show: function(visible){
      if (this.get('aria-hidden') == 'true')
        this.set('aria-hidden', false).morph(visible);
    }
  });

  /**
  Private method: loader
    Builds the optional loader element, adds interactivity.
    This method can safely be removed if the loader option is not enabled.
  */

  var Loader = new Class({
    Implements: [Chain, Events, Options],

    options: {/*
      duration: 500,
      transition: 'sine:in:out',
      unit: false, */
      fps: 20,
      link: 'cancel'      
    },

    initialize: function(slideshow){
      if (!slideshow)
        return;
      var options = slideshow.options.loader;
      if (options === true)
        options = {};
      this.setOptions(options);
      var loader = new Element('div', {
        'aria-hidden': false,
        'class': slideshow.classes.get('loader').substr(1),        
        'morph': this.options,
        'role': 'progressbar'
      }).store('animate', false).store('i', 0).store('delay', 1000 / this.options.fps).inject(slideshow.el);
      slideshow.loader = loader;
      var url = loader.getStyle('backgroundImage').replace(/url\(['"]?(.*?)['"]?\)/, '$1').trim();
      if (url){
        if (url.test(/\.png$/) && Browser.ie && Browser.version < 7)
          loader.setStyles({'backgroundImage': 'none', 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + url + '", sizingMethod="crop")'});          
        new Asset.image(url, {'onload': function(){
          var size = loader.getSize(),
            width = this.get('width'), 
            height = this.get('height');
          if (width > size.x)
            loader.store('x', size.x).store('animate', 'x').store('frames', (width / size.x).toInt());
          if (height > size.y)
            loader.store('y', size.y).store('animate', 'y').store('frames', (height / size.y).toInt());
        }});
      }
      loader.set('events', {
        'animate': this.animate.bind(loader),
        'hide': this.hide.pass(slideshow.classes.get('loader', 'hidden'), loader),
        'show': this.show.pass(slideshow.classes.get('loader', 'visible'), loader)
      });
      loader.fireEvent('hide');
    },

    animate: function(){
      var animate = this.retrieve('animate');
      if (!animate)
        return;
      var i = (this.retrieve('i').toInt() + 1) % this.retrieve('frames');
      this.store('i', i);
      var n = (i * this.retrieve(animate)) + 'px';
      if (animate == 'x')
        this.setStyle('backgroundPosition', n + ' 0px');      
      if (animate == 'y')
        this.setStyle('backgroundPosition', '0px ' + n);      
    },

    hide: function(hidden){
      if (this.get('aria-hidden') == 'false'){
        this.set('aria-hidden', true).morph(hidden);
        if (this.retrieve('animate'))
          clearTimeout(this.retrieve('timer'));
      }
    },

    show: function(visible){
      if (this.get('aria-hidden') == 'true'){
        this.set('aria-hidden', false).morph(visible);
        if (this.retrieve('animate')){
          this.store('timer', function(){ 
            this.fireEvent('animate') 
          }.periodical(this.retrieve('delay'), this));      
        }
      }
    }
  });

  /**
  Private method: thumbnails
    Builds the optional thumbnails element, adds interactivity.
    This method can safely be removed if the thumbnails option is not enabled.
  */

  var Thumbnails = new Class({
    Implements: [Chain, Events, Options],

    options: {/*
      duration: 500,
      transition: 'sine:in:out',
      unit: false, */
      columns: null,
      fps: 50,
      link: 'cancel',
      position: null,
      rows: null,
      scroll: null
    },

    initialize: function(slideshow){
      var options = (slideshow.options.thumbnails === true) ? {} 
        : slideshow.options.thumbnails;
      this.setOptions(options);
      var el = slideshow.el.getElement(slideshow.classes.get('thumbnails')),
        thumbnails = el ? el.empty() 
          : new Element('div', {'class': slideshow.classes.get('thumbnails').substr(1)});
      slideshow.thumbnails = thumbnails;
      thumbnails.set({'role': 'menubar', 'styles': {'overflow': 'hidden'}});
      var uid = thumbnails.retrieve('uid', 'Slideshow-' + Date.now()),
        ul = new Element('ul', {'role': 'menu', 'styles': {'left': 0, 'position': 'absolute', 'top': 0}, 'tween': {'link': 'cancel'}}).inject(thumbnails);
      slideshow.data.thumbnails.each(function(thumbnail, i){
        var li = new Element('li', {'id': uid + i}).inject(ul),
          a = new Element('a', {
            'class': slideshow.classes.get('thumbnails', 'hidden').substr(1),
            'events': {
              'click': this.click.pass(i, slideshow)
            },
            'href': slideshow.data.images[i],
            'morph': this.options,
            'role': 'menuitem',
            'tabindex': i
          }).store('uid', i).inject(li);
        if (slideshow.options.titles)
          a.set('title', slideshow.data.titles[i]);
        new Asset.image(thumbnail, {
          'onload': this.onload.pass(i, slideshow)
        }).inject(a);
      }, this);
      thumbnails.set('events', {
        'scroll': this.scroll.bind(thumbnails),
        'update': this.update.bind(slideshow)
      });
      var coords = thumbnails.getCoordinates();
      if (!options.scroll)
        options.scroll = (coords.height > coords.width) ? 'y' 
          : 'x';
      var props = (options.scroll == 'y') ? 'top bottom height y width'.split(' ') 
        : 'left right width x height'.split(' ');
      thumbnails.store('props', props).store('delay', 1000 / this.options.fps);
      slideshow.events.push('mousemove', this.mousemove.bind(thumbnails));
      thumbnails.inject(slideshow.el);
    },

    click: function(i){
      this.go(i); 
      return false; 
    },

    mousemove: function(e){
      var coords = this.getCoordinates();
      if (e.page.x > coords.left && e.page.x < coords.right && e.page.y > coords.top && e.page.y < coords.bottom){
        this.store('page', e.page);      
        if (!this.retrieve('mouseover')){
          this.store('mouseover', true);
          this.store('timer', function(){this.fireEvent('scroll');}.periodical(this.retrieve('delay'), this));
        }
      }
      else {
        if (this.retrieve('mouseover')){
          this.store('mouseover', false);        
          clearTimeout(this.retrieve('timer'));
        }
      }      
    },

    onload: function(i){
      var thumbnails = this.thumbnails,
        a = thumbnails.getElements('a')[i];
      if (a){
        (function(a){
          var visible = i == this.slide ? 'active' 
            : 'inactive';          
          a.store('loaded', true).get('morph').set(this.classes.get('thumbnails', 'hidden')).start(this.classes.get('thumbnails', visible));  
        }).delay(Math.max(1000 / this.data.thumbnails.length, 100), this, a);
      }          
      if (thumbnails.retrieve('limit'))
        return;
      var props = thumbnails.retrieve('props'), 
        options = this.options.thumbnails,
        pos = props[1], 
        length = props[2], 
        width = props[4],
        li = thumbnails.getElement('li:nth-child(' + (i + 1) + ')').getCoordinates();
      if (options.columns || options.rows){
        thumbnails.setStyles({'height': this.height, 'width': this.width});
        if (options.columns.toInt())
          thumbnails.setStyle('width', li.width * options.columns.toInt());
        if (options.rows.toInt())
          thumbnails.setStyle('height', li.height * options.rows.toInt());
      }
      var div = thumbnails.getCoordinates();
      if (options.position){
        if (options.position.test(/bottom|top/))
          thumbnails.setStyles({'bottom': 'auto', 'top': 'auto'}).setStyle(options.position, -div.height);
        if (options.position.test(/left|right/))
          thumbnails.setStyles({'left': 'auto', 'right': 'auto'}).setStyle(options.position, -div.width);
      }
      var units = Math.floor(div[width] / li[width]),
        x = Math.ceil(this.data.images.length / units),
        r = this.data.images.length % units,
        len = x * li[length],
        ul = thumbnails.getElement('ul').setStyle(length, len);
      ul.getElements('li').setStyles({'height': li.height, 'width': li.width});
      thumbnails.store('limit', div[length] - len);
    },

    scroll: function(n, fast){
      var div = this.getCoordinates(),
        ul = this.getElement('ul').getPosition(),
        props = this.retrieve('props'),
        axis = props[3], delta, pos = props[0], size = props[2], value,      
        tween = this.getElement('ul').set('tween', {'property': pos}).get('tween');  
      if (n != undefined){
        var uid = this.retrieve('uid'),
          li = document.id(uid + n).getCoordinates();
        delta = div[pos] + (div[size] / 2) - (li[size] / 2) - li[pos];
        value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
        tween[fast ? 'set' : 'start'](value);
      }
      else{
        var area = div[props[2]] / 3, 
          page = this.retrieve('page'), 
          velocity = -(this.retrieve('delay') * 0.01);      
        if (page[axis] < (div[pos] + area))
          delta = (page[axis] - div[pos] - area) * velocity;
        else if (page[axis] > (div[pos] + div[size] - area))
          delta = (page[axis] - div[pos] - div[size] + area) * velocity;      
        if (delta){      
          value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
          tween.set(value);
        }
      }        
    },

    update: function(fast){
      var thumbnails = this.thumbnails,
        uid = thumbnails.retrieve('uid');
      thumbnails.getElements('a').each(function(a, i){
        if (a.retrieve('loaded')){
          if (a.retrieve('uid') == this._slide){
            if (!a.retrieve('active', false)){
              a.store('active', true);
              var active = this.classes.get('thumbnails', 'active');              
              if (fast) a.get('morph').set(active);
              else a.morph(active);
            }
          } 
          else {
            if (a.retrieve('active', true)){
              a.store('active', false);
              var inactive = this.classes.get('thumbnails', 'inactive');            
              if (fast) a.get('morph').set(inactive);
              else a.morph(inactive);
            }
          }
        }
      }, this);
      if (!thumbnails.retrieve('mouseover'))
        thumbnails.fireEvent('scroll', [this._slide, fast]);
    }
  });
})();