/**
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) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).

Dependencies:
	Mootools 1.2 Core: Fx.Morph, Fx.Tween, Selectors, Element.Dimensions.
	Mootools 1.2 More: Assets.
*/

Slideshow = new Class({
  Implements: [Chain, Events, Options],
	
  options: {/*
		onComplete: $empty,
		onEnd: $empty,
		onStart: $empty,*/
    captions: false,
    center: true,
    classes: [],
    controller: false,
    delay: 2000,
    duration: 750,
    fast: false,
    height: false,
    href: '',
    hu: '',
    linked: false,
    loader: {
      'animate': ['css/loader-#.png', 12]
      },
    loop: true,
    match: /\?slide=(\d+)$/,
    overlap: true,
    paused: false,
    properties: ['href', 'rel', 'rev', 'title'],
    random: false,
    replace: [/(\.[^\.]+)$/, 't$1'],
    resize: 'width',
    slide: 0,
    thumbnails: false,
    titles: true,
    transition: function(p){
      return -(Math.cos(Math.PI * p) - 1) / 2;
    },
    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.slideshow = $(el);
    if (!this.slideshow)
      return;
    this.slideshow.set('styles', {
      'display': 'block',
      'position': 'relative',
      'z-index': 0
    });
    var match = window.location.href.match(this.options.match);
    this.slide = (this.options.match && match) ? match[1].toInt() : this.options.slide;
    this.counter = this.delay = this.transition = 0;
    this.direction = 'left';
    this.paused = false;
    if (!this.options.overlap)
      this.options.duration *= 2;
    var anchor = this.slideshow.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 = 2;
			
    // styles
		
    var keys = ['slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'images', 'captions', 'controller', 'thumbnails', 'hidden', 'visible', 'inactive', 'active', 'loader'];
    var 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.slideshow.getElements(this.classes.get('thumbnails') + ' img');
      this.slideshow.getElements(this.classes.get('images') + ' img').each(function(img, i){
        var src = img.get('src');
        var caption = $pick(img.get('alt'), img.get('title'), '');
        var parent = img.getParent();
        var properties = (parent.get('tag') == 'a') ? parent.getProperties : {};
        var href = img.getParent().get('href') || '';
        var thumbnail = (thumbnails[i]) ? thumbnails[i].get('src') : '';
        data[src] = {
          'caption': caption,
          'href': href,
          'thumbnail': thumbnail
        };
      });
    }
    var loaded = this.load(data);
    if (!loaded)
      return;
		
    // events
		
    this.events = $H({
      'keydown': [],
      'keyup': [],
      'mousemove': []
    });
    var keyup = function(e){
      switch(e.key){
        case 'left':
          this.prev(e.shift);
          break;
        case 'right':
          this.next(e.shift);
          break;
        case 'p':
          this.pause();
          break;
      }
    }.bind(this);
    this.events.keyup.push(keyup);
    document.addEvent('keyup', keyup);

    // required elements
			
    var el = this.slideshow.getElement(this.classes.get('images'));
    var images = (el) ? el.empty() : new Element('div', {
      'class': this.classes.get('images').substr(1)
      }).inject(this.slideshow);
    var div = images.getSize();
    this.height = this.options.height || div.y;
    this.width = this.options.width || div.x;
    images.set({
      'styles': {
        'display': 'block',
        'height': this.height,
        'overflow': 'hidden',
        'position': 'relative',
        'width': this.width
        }
      });
  this.slideshow.store('images', images);
  this.a = this.image = this.slideshow.getElement('img') || new Element('img');
  if (Browser.Engine.trident && Browser.Engine.version > 4)
    this.a.style.msInterpolationMode = 'bicubic';
  this.a.set('styles', {
    'display': 'none',
    'position': 'absolute',
    'zIndex': 1
  });
  this.b = this.a.clone();
  [this.a, this.b].each(function(img){
    anchor.clone().cloneEvents(anchor).grab(img).inject(images);
  });
		
  // optional elements
		
  if (this.options.captions)
    this._captions();
  if (this.options.controller)
    this._controller();
  if (this.options.loader)
    this._loader();
  if (this.options.thumbnails)
    this._thumbnails();
			
  // begin show
		
  this._preload();
},
	
/**
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){
  if ((this.slide - 1 + this.data.images.length) % this.data.images.length == n || $time() < this.transition)
    return;
  $clear(this.timer);
  this.delay = 0;
  this.direction = (direction) ? direction : ((n < this.slide) ? 'right' : 'left');
  this.slide = n;
  if (this.preloader)
    this.preloader = this.preloader.destroy();
  this._preload(this.options.fast == 2 || (this.options.fast == 1 && this.paused));
},

/**
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 it's a random show get the previous slide from the showed array

      if (this.showed.i < 2)
        return;
      this.showed.i -= 2;
      n = this.showed.array[this.showed.i];
    }
    else
      n = (this.slide - 2 + 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 ($chk(p))
    this.paused = (p) ? false : true;
  if (this.paused){
    this.paused = false;
    this.delay = this.transition = 0;
    this.timer = this._preload.delay(100, this);
    [this.a, this.b].each(function(img){
      ['morph', 'tween'].each(function(p){
        if (this.retrieve(p)) this.get(p).resume();
      }, img);
    });
    if (this.options.controller)
      this.slideshow.getElement('.' + this.classes.pause).removeClass(this.classes.play);
  }
  else {
    this.paused = true;
    this.delay = Number.MAX_VALUE;
    this.transition = 0;
    $clear(this.timer);
    [this.a, this.b].each(function(img){
      ['morph', 'tween'].each(function(p){
        if (this.retrieve(p)) this.get(p).pause();
      }, img);
    });
    if (this.options.controller)
      this.slideshow.getElement('.' + this.classes.pause).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 ($type(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': []
  };
  for (var image in data){
    var obj = data[image] || {};
    var caption = (obj.caption) ? obj.caption.trim() : '';
    var href = (obj.href) ? obj.href.trim() : ((this.options.linked) ? this.options.hu + image : this.options.href);
    var thumbnail = (obj.thumbnail) ? obj.thumbnail.trim() : image.replace(this.options.replace[0], this.options.replace[1]);
    this.data.images.push(image);
    this.data.captions.push(caption);
    this.data.hrefs.push(href);
    this.data.thumbnails.push(thumbnail);
  }
  if (this.options.random)
    this.slide = $random(0, this.data.images.length - 1);
		
  // only run when data is loaded dynamically into an existing slideshow instance
		
  if (this.options.thumbnails && this.slideshow.retrieve('thumbnails'))
    this._thumbnails();
  if (this.slideshow.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.transition = 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){
  this.events.each(function(array, e){
    array.each(function(fn){
      document.removeEvent(e, fn);
    });
  });
  this.pause(1);
  if (this.options.loader)
    $clear(this.slideshow.retrieve('loader').retrieve('timer'));
  if (this.options.thumbnails)
    $clear(this.slideshow.retrieve('thumbnails').retrieve('timer'));
  this.slideshow.uid = Native.UID++;
  if (p)
    this.slideshow[p]();
},
	
/**
Private method: preload
	Preloads the next slide in the show, once loaded triggers the show, updates captions, thumbnails, etc.
*/

_preload: function(fast){
  if (!this.preloader)
    this.preloader = new Asset.image(this.options.hu + this.data.images[this.slide], {
      'onload': function(){
        this.store('loaded', true);
      }
    });
if (this.preloader.retrieve('loaded') && $time() > this.delay && $time() > this.transition){
  if (this.stopped){
    if (this.options.captions)
      this.slideshow.retrieve('captions').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': 'auto',
    'visibility': 'hidden',
    'width': 'auto',
    'zIndex': this.counter
    });
  ['src', 'height', 'width'].each(function(prop){
    this.image.set(prop, this.preloader.get(prop));
  }, this);
  this._resize(this.image);
  this._center(this.image);
  var anchor = this.image.getParent();
  if (this.data.hrefs[this.slide])
    anchor.set('href', this.data.hrefs[this.slide]);
  else
    anchor.erase('href');
  var text = (this.data.captions[this.slide])
  ? this.data.captions[this.slide].replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'")
  : '';
  this.image.set('alt', text);
  if (this.options.titles)
    anchor.set('title', text);
  if (this.options.loader)
    this.slideshow.retrieve('loader').fireEvent('hide');
  if (this.options.captions)
    this.slideshow.retrieve('captions').fireEvent('update', fast);
  if (this.options.thumbnails)
    this.slideshow.retrieve('thumbnails').fireEvent('update', fast);
  this._show(fast);
  this._loaded();
} 
else {
  if ($time() > this.delay && this.options.loader)
    this.slideshow.retrieve('loader').fireEvent('show');
  this.timer = (this.paused && this.preloader.retrieve('loaded')) ? null : this._preload.delay(100, this, fast);
}
},

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

_show: function(fast){
  if (!this.image.retrieve('morph')){
    var options = (this.options.overlap) ? {
      'duration': this.options.duration,
      'link': 'cancel'
    } : {
      'duration': this.options.duration / 2,
      'link': 'chain'
    };
    $$(this.a, this.b).set('morph', $merge(options, {
      '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'));
  var visible = this.classes.get('images', 'visible');
  var 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(hidden, visible){
        this.image.get('morph').set(hidden).start(visible);
      }.pass([hidden, visible], this);
      hidden = this.classes.get('images', ((this.direction == 'left') ? 'prev' : 'next'));
      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(){
  this.counter++;
  this.delay = (this.paused) ? Number.MAX_VALUE : $time() + this.options.duration + this.options.delay;
  this.direction = 'left';
  this.transition = (this.options.fast == 2 || (this.options.fast == 1 && this.paused)) ? 0 : $time() + this.options.duration;
  if (this.slide + 1 == this.data.images.length && !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 = $random(0, this.data.images.length - 1);
    }
    else
      this.slide = this.showed.array[this.showed.i];
  }
  else
    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._preload();
},

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

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

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

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

/**
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.firstrun = false;
    this.pause(1);
  }
  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.
*/

_captions: function(){
  if (this.options.captions === true)
    this.options.captions = {};
  var el = this.slideshow.getElement(this.classes.get('captions'));
  var captions = (el) ? el.empty() : new Element('div', {
    'class': this.classes.get('captions').substr(1)
    }).inject(this.slideshow);
  captions.set({
    'events': {
      'update': function(fast){
        var captions = this.slideshow.retrieve('captions');
        var empty = (this.data.captions[this.slide] === '');
        if (fast){
          var p = (empty) ? 'hidden' : 'visible';
          captions.set('html', this.data.captions[this.slide]).get('morph').cancel().set(this.classes.get('captions', p));
        }
        else {
          var fn = (empty) ? $empty : function(n){
            this.slideshow.retrieve('captions').set('html', this.data.captions[n]).morph(this.classes.get('captions', 'visible'))
          }.pass(this.slide, this);
          captions.get('morph').cancel().start(this.classes.get('captions', 'hidden')).chain(fn);
        }
      }.bind(this)
    },
    'morph': $merge(this.options.captions, {
      'link': 'chain'
    })
  });
  this.slideshow.store('captions', captions);
},

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

_controller: function(){
  if (this.options.controller === true)
    this.options.controller = {};
  var el = this.slideshow.getElement(this.classes.get('controller'));
  var controller = (el) ? el.empty() : new Element('div', {
    'class': this.classes.get('controller').substr(1)
    }).inject(this.slideshow);
  var ul = new Element('ul').inject(controller);
  $H({
    'first': 'Shift + Leftwards Arrow',
    'prev': 'Leftwards Arrow',
    'pause': 'P',
    'next': 'Rightwards Arrow',
    'last': 'Shift + Rightwards Arrow'
  }).each(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.slideshow.retrieve(action, new Element('a', {
      'title': ((action == 'pause') ? this.classes.play.capitalize() + ' / ' : '') + this.classes[action].capitalize() + ' [' + accesskey + ']'
    }).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)
    });
  }, this);
  controller.set({
    'events': {
      'hide': function(hidden){
        if (!this.retrieve('hidden'))
          this.store('hidden', true).morph(hidden);
      }.pass(this.classes.get('controller', 'hidden'), controller),
      'show': function(visible){
        if (this.retrieve('hidden'))
          this.store('hidden', false).morph(visible);
      }.pass(this.classes.get('controller', 'visible'), controller)
    },
    'morph': $merge(this.options.controller, {
      'link': 'cancel'
    })
  }).store('hidden', false);
  var keydown = function(e){
    if (['left', 'right', 'p'].contains(e.key)){
      var controller = this.slideshow.retrieve('controller');
      if (controller.retrieve('hidden'))
        controller.get('morph').set(this.classes.get('controller', 'visible'));
      switch(e.key){
        case 'left':
          this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseenter');
          break;
        case 'right':
          this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseenter');
          break;
        default:
          this.slideshow.retrieve('pause').fireEvent('mouseenter');
          break;
      }
    }
  }.bind(this);
  this.events.keydown.push(keydown);
  var keyup = function(e){
    if (['left', 'right', 'p'].contains(e.key)){
      var controller = this.slideshow.retrieve('controller');
      if (controller.retrieve('hidden'))
        controller.store('hidden', false).fireEvent('hide');
      switch(e.key){
        case 'left':
          this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseleave');
          break;
        case 'right':
          this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseleave');
          break;
        default:
          this.slideshow.retrieve('pause').fireEvent('mouseleave');
          break;
      }
    }
  }.bind(this);
  this.events.keyup.push(keyup);
  var mousemove = function(e){
    var images = this.slideshow.retrieve('images').getCoordinates();
    if (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom)
      this.slideshow.retrieve('controller').fireEvent('show');
    else
      this.slideshow.retrieve('controller').fireEvent('hide');
  }.bind(this);
  this.events.mousemove.push(mousemove);
  document.addEvents({
    'keydown': keydown,
    'keyup': keyup,
    'mousemove': mousemove
  });
  this.slideshow.retrieve('controller', controller).fireEvent('hide');
},

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

_loader: function(){
  if (this.options.loader === true)
    this.options.loader = {};
  var loader = new Element('div', {
    'class': this.classes.get('loader').substr(1),
    'morph': $merge(this.options.loader, {
      'link': 'cancel'
    })
  }).store('hidden', false).store('i', 1).inject(this.slideshow.retrieve('images'));
  if (this.options.loader.animate){
    for (var i = 0; i < this.options.loader.animate[1]; i++)
      img = new Asset.image(this.options.loader.animate[0].replace(/#/, i));
    if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
      loader.setStyle('backgroundImage', 'none');
  }
  loader.set('events', {
    'animate': function(){
      var loader = this.slideshow.retrieve('loader');
      var i = (loader.retrieve('i').toInt() + 1) % this.options.loader.animate[1];
      loader.store('i', i);
      var img = this.options.loader.animate[0].replace(/#/, i);
      if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
        loader.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img + '", sizingMethod="scale")';
      else
        loader.setStyle('backgroundImage', 'url(' + img + ')');
    }.bind(this),
    'hide': function(){
      var loader = this.slideshow.retrieve('loader');
      if (!loader.retrieve('hidden')){
        loader.store('hidden', true).morph(this.classes.get('loader', 'hidden'));
        if (this.options.loader.animate)
          $clear(loader.retrieve('timer'));
      }
    }.bind(this),
    'show': function(){
      var loader = this.slideshow.retrieve('loader');
      if (loader.retrieve('hidden')){
        loader.store('hidden', false).morph(this.classes.get('loader', 'visible'));
        if (this.options.loader.animate)
          loader.store('timer', function(){
            this.fireEvent('animate');
          }.periodical(50, loader));
      }
    }.bind(this)
  });
  this.slideshow.retrieve('loader', loader).fireEvent('hide');
},
	
/**
Private method: thumbnails
	Builds the optional thumbnails element, adds interactivity.
	This method can safely be removed if the thumbnails option is not enabled.
*/

_thumbnails: function(){
  if (this.options.thumbnails === true)
    this.options.thumbnails = {};
  var el = this.slideshow.getElement(this.classes.get('thumbnails'));
  var thumbnails = (el) ? el.empty() : new Element('div', {
    'class': this.classes.get('thumbnails').substr(1)
    }).inject(this.slideshow);
  thumbnails.setStyle('overflow', 'hidden');
  var ul = new Element('ul', {
    'tween': {
      'link': 'cancel'
    }
  }).inject(thumbnails);
  this.data.thumbnails.each(function(thumbnail, i){
    var li = new Element('li').inject(ul);
    var a = new Element('a', {
      'events': {
        'click': function(i){
          this.go(i);
          return false;
        }.pass(i, this),
        'loaded': function(){
          this.data.thumbnails.pop();
          if (!this.data.thumbnails.length){
            var div = thumbnails.getCoordinates();
            var props = thumbnails.retrieve('props');
            var limit = 0, pos = props[1], size = props[2];
            thumbnails.getElements('li').each(function(li){
              var li = li.getCoordinates();
              if (li[pos] > limit) limit = li[pos];
            }, this);
            thumbnails.store('limit', div[size] + div[props[0]] - limit);
          }
        }.bind(this)
      },
      'href': this.options.hu + this.data.images[i],
      'morph': $merge(this.options.thumbnails, {
        'link': 'cancel'
      })
    }).inject(li);
    if (this.data.captions[i] && this.options.titles)
      a.set('title', this.data.captions[i].replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'"));
    var img = new Asset.image(this.options.hu + thumbnail, {
      'onload': function(){
        this.fireEvent('loaded');
      }.bind(a)
    }).inject(a);
  }, this);
  thumbnails.set('events', {
    'scroll': function(n, fast){
      var div = this.getCoordinates();
      var ul = this.getElement('ul').getPosition();
      var props = this.retrieve('props');
      var axis = props[3], delta, pos = props[0], size = props[2], value;
      var tween = this.getElement('ul').get('tween', {
        'property': pos
      });
      if ($chk(n)){
        var li = this.getElements('li')[n].getCoordinates();
        delta = div[pos] + (div[size] / 2) - (li[size] / 2) - li[pos]
        value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
        if (fast)
          tween.set(value);
        else
          tween.start(value);
      }
      else{
        var area = div[props[2]] / 3, page = this.retrieve('page'), velocity = -0.2;
        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);
        }
      }
    }.bind(thumbnails),
    'update': function(fast){
      var thumbnails = this.slideshow.retrieve('thumbnails');
      thumbnails.getElements('a').each(function(a, i){
        if (i == 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]);
    }.bind(this)
  })
  var div = thumbnails.getCoordinates();
  thumbnails.store('props', (div.height > div.width) ? ['top', 'bottom', 'height', 'y'] : ['left', 'right', 'width', 'x']);
  var mousemove = function(e){
    var div = this.getCoordinates();
    if (e.page.x > div.left && e.page.x < div.right && e.page.y > div.top && e.page.y < div.bottom){
      this.store('page', e.page);
      if (!this.retrieve('mouseover')){
        this.store('mouseover', true);
        this.store('timer', function(){
          this.fireEvent('scroll');
        }.periodical(50, this));
      }
    }
    else {
      if (this.retrieve('mouseover')){
        this.store('mouseover', false);
        $clear(this.retrieve('timer'));
      }
    }
  }.bind(thumbnails);
  this.events.mousemove.push(mousemove);
  document.addEvent('mousemove', mousemove);
  this.slideshow.store('thumbnails', thumbnails);
}
});