// # microfiche.js v1.8.0
//
// ## usage
//
//     $('.my-slideshow').microfiche();
//     $('.my-slideshow').microfiche({ cyclic: true, button: false });
//     $('.my-slideshow').microfiche({ slidebypages: 1 });
//
// ## options
//
// the following options can be passed the first time `microfiche` is called
// on an element.
//
// ### cyclic
//
// if true, microfiche wraps around at front and beginning of the slideshow.
// this option is false by default.
//
//     $('.my-slideshow').microfiche({ cyclic: true });
//
// ### buttons
//
// if true, microfiche will create previous/next buttons.
// this option is true by default.
//
//     $('.my-slideshow').microfiche({ buttons: false });
//
// ### bullets
//
// if true, microfiche will create bullets for the pages available.
// this option is also true by default.
//
//     $('.my-slideshow').microfiche({ bullets: false });
//
// ## commands
//
// the following commands can be run on a microfiche'd element at any point,
// including in the first call.
//
// ### slidebypages
//
// slides `n` screenfuls (negative `n` goes backwards).
//
//     $('.my-slideshow').microfiche({ slidebypages: n });
//
// ### slidetopage
//
// slides to the `nth` screenful.
//
//     $('.my-slideshow').microfiche({ slidetopage: n });
//
// ### slidetopoint
//
// slides to point `x` (rounded and constrained appropriately).
//
//     $('.my-slideshow).microfiche({ slidetopoint: x });
//
// ### jumptopoint
//
// jumps without animation to point x (again, rounded and constrained).
//
//     $('.my-slideshow').microfiche({ jumptopoint: x });
//
// ### autoplay
//
// automatically advances every `n` seconds.
//
//     $('.my-slideshow').microfiche({ autoplay: n });
//
// ### autopause
//
// automatically pause autoplay when the user hovers over the carousel.
//
//     $('.my-slideshow').microfiche({ autoplay: n, autopause: true });
//
// ### refresh
//
// to refresh an existing microfiche’s controls and content to adjust
// to a new container size, call the `refresh` method.
//
//     $('.my-slideshow').microfiche({ refresh: true });
//
// ### refreshonresize
//
// automatically refresh microfiche filmstrip and controls on window 
// resize event. set `true` to refresh with a 250ms debounce, or specify 
// a custom debounce rate in ms. the default value is false.
//
//    $('.my-slideshow').microfiche({ refreshonresize: 100 });
//
// ### destroy
//
// destroys the microfiche instance and clear related events
//
//    $('my-slideshow').microfiche({ destroy: true });
//    // or
//    $('my-slideshow').data('microfiche').destroy();
//
// ### noscrollalign
//
// defines left, right, or center filmstrip alignment in the event that
// all items are visible on screen and no scrolling is required.
//
//    $('.my-slideshow').microfiche({ noscrollalign: 'left' });
//

(function() {

window.microfiche = function(options) { this.initialize(options); return this; };

microfiche.version = '1.8.0';

$.extend(microfiche.prototype, {

  // ## default options ##
  //
  // these may be overridden in the initializer.
  options: {
    autoplay        : false,
    autopause       : false,
    buttons         : true,
    bullets         : true,
    cyclic          : false,
    keyboard        : false,
    swipe           : true,
    clicktoadvance  : false,
    minduration     : 250,
    duration        : 500,
    maxduration     : 500,
    dragthreshold   : 25,
    elasticity      : 0.5,
    swipethreshold  : 0.125,
    refreshonresize : false,
    prevbuttonlabel : '←',
    nextbuttonlabel : '→',
    noscrollalign   : 'left'
  },

  // rather than relying on the literal position of `this.film`,
  // we keep a tab on the current destination.
  x: 0,


  // ## setup ##

  // build microfiche in steps.
  initialize: function(options) {
    this.options = $.extend({}, this.options, options);
    this.el = $(options.el);

    this.initialcontents = this.el.contents();

    this.el.data('microfiche', this);
    this.createfilm();
    this.createscreen();
    this.calibrate();

    if (this.film.width() <= this.screen.width()) {
      this.noscrollalign(this.options.noscrollalign);
      this.refreshonresize(this.options.refreshonresize);
      return;
    }

    this.createcontrols();
    this.enabletouch();
    this.enablekeyboard();
    this.enableclick();
    this.preparecyclic();

    this.run(this.options);
  },

  // we create our film element, which we’ll slide back and forth in the screen.
  // before appending any extra elements, we detach the existing children,
  // append them to film, and tell them to float so they’ll (hopefully) lay-out
  // nicely along the horizontal.
  createfilm: function() {
    this.film = $('<div class="microfiche-film">').
    css({ position: 'absolute' });
    this.el.children().appendto(this.film).css({ float: 'left' });
    this.preparefilm && this.preparefilm();
  },

  // the screen is created and appended to our element, then the film is
  // appended to the screen. screen manually takes its height from film.
  createscreen: function() {
    this.screen = $('<div class="microfiche-screen">').
    css({ position: 'relative', overflow: 'hidden' }).
    appendto(this.el).
    append(this.film);
  },

  // prepare duplicate content at either end, for our cyclic behaviour.
  preparecyclic: function() {
    if (!this.options.cyclic) return;

    var clonel = this.film.clone(),
        cloner = this.film.clone(),
        w = this.film.width();

    clonel.prependto(this.film).css({ position: 'absolute', left: -w + 'px' });
    cloner.appendto(this.film).css({ position: 'absolute', left: w + 'px' });
  },

  // this slightly strange process tries to ensure we don’t get any wrapping
  // in `this.film`, then fixes the dimensions of `this.film` and `this.screen`.
  calibrate: function() {
    this.screen.width(100000);

    var w = this.film.width(),
        h = this.film.height();

    this.film.width(w).height(h);
    this.screen.width('auto').height(h);
  },

  // create prev/next buttons and page bullets.
  createcontrols: function() {
    var self = this;

    this.controls = $('<span class="microfiche-controls" />').appendto(this.el);
    this.controls.on('click', 'a, button', function(e) { self.didclickcontrol(e) });

    if (this.options.bullets) this.createbullets();
    if (this.options.buttons) this.createbuttons();

    this.updatecontrols();
  },

  // create page bullets.
  createbullets: function() {
    var container = $('<span class="microfiche-bullets" />').appendto(this.controls);
    for (var i = 0; i < this.totalpagecount(); i++) {
      $('<button>')
      .addclass('microfiche-bullet')
      .attr('data-microfiche-page', i)
      .data('action', 'slidetopage')
      .data('arguments', [i])
      .html(i + 1)
      .appendto(container);
    }
  },

  // create prev/next buttons.
  createbuttons: function() {
    $('<button>')
    .addclass('microfiche-button microfiche-prev-button')
    .attr('rel', 'prev')
    .data('action', 'prev')
    .data('arguments', [])
    .html(this.options.prevbuttonlabel)
    .prependto(this.controls);

    $('<button>')
    .addclass('microfiche-button microfiche-next-button')
    .attr('rel', 'next')
    .data('action', 'next')
    .data('arguments', [])
    .html(this.options.nextbuttonlabel)
    .appendto(this.controls);
  },

  // add in the appropriate touch events. this requires a bit of scope-locking.
  enabletouch: function() {
    if (!this.options.swipe) return;

    var self = this;

    var thistouchstart = this.touchstart,
        thistouchmove = this.touchmove,
        thistouchend = this.touchend;

    this.touchstart = function() { thistouchstart.apply(self, arguments) };
    this.touchmove = function() { thistouchmove.apply(self, arguments) };
    this.touchend = function() { thistouchend.apply(self, arguments) };

    this.film.on('touchstart', this.touchstart);
  },

  // add in left-right keyboard events.
  enablekeyboard: function() {
    if (!this.options.keyboard) return;

    var self = this;

    this.screen.attr('data-microfiche-keyboard', true);
    var thisonkeydown = this.onkeydown;
    this.onkeydown = function() { thisonkeydown.apply(self, arguments) };

    $(document).on('keydown', this.onkeydown);
  },

  // add in mosuedown event.
  enableclick: function() {
    if (!this.options.clicktoadvance) return;

    var self = this;

    var thisonmousedown = this.onmousedown;
    this.onmousedown = function() { thisonmousedown.apply(self, arguments) };

    this.film.on('mousedown', this.onmousedown);
  },


  // ## user event handling ##

  // when anything in `this.controls` is clicked.
  didclickcontrol: function(e) {
    e.preventdefault();

    var control = $(e.target),
        action = control.data('action'),
        args = control.data('arguments');

    this[action].apply(this, args);
  },

  // when touch starts, record the origin point and time.
  touchstart: function(e) {
    var touches = e.originalevent.targettouches;

    if (!touches || touches.length > 1) return;

    this.touchstate = {
      then   : new date(),
      ox     : touches[0].pagex,
      oy     : touches[0].pagey,
      isdrag : false
    }

    $(document).on('touchmove', this.touchmove).
                on('touchend', this.touchend);
  },

  // touchmove begins by getting the deltas on both axis.
  //
  // if we’re not already in drag-mode, we check to see if the horizontal
  // delta is above the treshold. if the vertical delta crosses the threshold,
  // we duck out altogether.
  //
  // after that, we ask `this.film` to follow the touch, and record a few
  // details about position and velocity for good measure.
  touchmove: function(e) {
    var t = e.originalevent.targettouches[0],
        dx = t.pagex - this.touchstate.ox,
        dy = t.pagey - this.touchstate.oy;

    if (!this.touchstate.isdrag) {
      if (math.abs(dy) >= this.options.dragthreshold) {
        this.touchend();
        return;
      } else if (math.abs(dx) >= this.options.dragthreshold) {
        this.touchstate.isdrag = true;
      }
    }

    if (this.touchstate.isdrag) {
      e.preventdefault();

      var now = new date(),
          t = now - this.touchstate.then;

      this.touchstate.vx = (dx - this.touchstate.dx) / t;
      this.touchstate.vy = (dy - this.touchstate.dy) / t;
      this.touchstate.dx = dx;
      this.touchstate.dy = dy;
      this.touchstate.then = now;

      this.touchstate.cx = this.x - dx;

      if (!this.options.cyclic) {
        if (this.touchstate.cx < this.min()) {
          var bx = this.min() - this.touchstate.cx;
          bx = bx * this.options.elasticity;
          this.touchstate.cx = this.min() - bx;
        }

        if (this.touchstate.cx > this.max()) {
          var bx = this.touchstate.cx - this.max();
          bx = bx * this.options.elasticity;
          this.touchstate.cx = this.max() + bx;
        }
      }

      this.film.css({
        webkittransition: 'none',
        webkittransform: 'translate3d(' + -this.touchstate.cx + 'px, 0px, 0px)'
      });
    }
  },

  // when the touch is finished, we unbind events. if the touch was decided
  // to be a drag, we’ll deduce the new target value for x, ensure microfiche
  // knows about it, and animate into place.
  touchend: function(e) {
    $(document).off('touchmove', this.touchmove).
                off('touchend', this.touchend);

    if (this.touchstate.isdrag) {
      var dx = this.touchstate.dx,
           w = this.screenwidth(),
          vx = this.touchstate.vx,
          th = this.options.swipethreshold;

      if (dx <= -w * th) {
        this.slidebypages(1, vx);
      } else if (dx >= w * th) {
        this.slidebypages(-1, vx);
      } else {
        this.slidebypages(0);
      }
    }

  },

  // slide centermost instance of microfiche left / right on key press.
  onkeydown: function(e) {
    if (e.keycode !== 37 && e.keycode !== 39 || !this.iscentral('[data-microfiche-keyboard]')) return;
    if (e.keycode === 37) this.slidebypages(-1);
    else if (e.keycode === 39) this.slidebypages(1);
  },

  // advance microfiche on mousedown.
  onmousedown: function(e) {
    this.slidebypages(1);
  },

  // ## state update ##

  // enable/disable controls based on current position.
  updatecontrols: function() {
    if (this.options.bullets) this.updatebullets();
    if (this.options.buttons) this.updatebuttons();
  },

  // update selected state of bullets.
  updatebullets: function() {
    this.controls.find('.microfiche-bullet').removeclass('selected');
    this.controls.find('[data-microfiche-page="' + this.currentpageindex() + '"]').addclass('selected');
  },

  // update enabled state of prev/next buttons.
  updatebuttons: function() {
    if (this.options.cyclic) return;
    this.controls.find('[rel="prev"]').attr('disabled', this.x <= this.min());
    this.controls.find('[rel="next"]').attr('disabled', this.x >= this.max());
  },


  // ## helpers ##

  // round `x` to a factor of `screenwidth`.
  round: function(x) {
    var w = this.screenwidth();
    return math.round(x / w) * w;
  },

  // return `x` constrained between limits `min` and `max`.
  constrain: function(x, min, max) {
    if (min === undefined) min = this.min();
    if (max === undefined) max = this.max();
    return math.max(min, math.min(x, max));
  },

  // round and constrain `x`.
  roundandconstrain: function(x, min, max) {
    return this.constrain(this.round(x), min, max);
  },

  // returns true if the given point is within our upper/lower bounds.
  withinbounds: function(x) {
    return this.min() <= x && x <= this.max();
  },

  // returns the lower limit - simply 0.
  min: function() {
    return 0;
  },

  // returns the upper limit - the width of `this.film` less the width of
  // `this.screen`.
  max: function() {
    return this.film.width() - this.screenwidth();
  },

  // returns the current page index.
  currentpageindex: function() {
    return math.round(this.x / this.screenwidth());
  },

  // returns the number of pages.
  totalpagecount: function() {
    return math.ceil(this.film.width() / this.screenwidth());
  },

  // returns the width of the containing element.
  screenwidth: function() {
    return this.el.width();
  },

  // returns true if this microfiche instance is closest to the center of the screen
  iscentral: function(selector) {

    var closest = $($(selector || '.microfiche-screen').sort(function(a,b){
      return math.abs(1 - (($(window).scrolltop()+$(window).height()/2-$(a).height()/2) / $(a).offset().top)) - 
             math.abs(1 - (($(window).scrolltop()+$(window).height()/2-$(b).height()/2) / $(b).offset().top))
    })[0]).parent().data('microfiche');

    return (closest === this);
  },

  // ## internal methods for performing transitions ##

  // perform an instant transition to our new destination.
  jump: function() {
    this.el.trigger('microfiche:willmove');
    this.performjump();
    this.updatecontrols();
    this.el.trigger('microfiche:didmove');
  },

  // default jump transform.
  performjump: function() {
    this.film.css({ left: -this.x });
  },

  // sets up environment, but allows the real transition to be overridden.
  transition: function(duration) {
    var self = this;

    if (this.options.cyclic) this.handlewrappingtransition();

    if (duration == null) duration = this.options.duration;

    var callback = function() { self.aftertransition() };

    this.el.trigger('microfiche:willmove');

    settimeout(function() {
      self.performtransition(duration, callback);
    });
  },

  // handle what happens in cyclic mode if we’ve slipped off at either end.
  handlewrappingtransition: function() {
    if (this.x > this.max()) {
      this.x = this.min() - this.screenwidth();
      if (this.touchstate && this.touchstate.dx) this.x -= this.touchstate.dx;
      this.jump();
      this.x = this.min();
      this.updatecontrols();
    } else if (this.x < this.min()) {
      this.x = this.max() + this.screenwidth();
      if (this.touchstate && this.touchstate.dx) this.x -= this.touchstate.dx;
      this.jump();
      this.x = this.max();
      this.updatecontrols();
    }
  },

  // default transition animation.
  performtransition: function(duration, callback) {
    this.film.stop().animate({ left: -this.x + 'px' }, duration, callback);
  },

  // called when a transition finishes.
  aftertransition: function() {
    delete this.touchstate;
    this.el.trigger('microfiche:didmove');
  },


  // ## public api ##

  // slides by `n` pages. if `n` is negative, it will slide in reverse.
  //
  // also takes `vx`, which is the velocity on the x-axis. this is used
  // internally by the touch event handlers, but can be used to perform
  // a faster slide.
  slidebypages: function(n, vx) {
    var ox = this.x,
         w = this.screenwidth();

    this.x = this.constrain((math.round(this.x / w) + n) * w);

    if (this.options.cyclic && this.x == ox) this.x += n * w;

    if (vx) {
      var duration = this.constrain(
        math.abs((this.x - ox) / vx),
        this.options.minduration,
        this.options.maxduration
      );
    } else {
      var duration = this.options.duration;
    }

    this.updatecontrols();
    this.transition(duration);
  },

  // slides to the given `page`.
  slidetopage: function(page) {
    this.x = this.constrain(page * this.screenwidth());
    this.updatecontrols();
    this.transition();
  },

  // animate to the given point (constrained to an acceptable value).
  slidetopoint: function(x) {
    this.x = this.roundandconstrain(x);
    this.updatecontrols();
    this.transition();
  },

  // jump to the given `page`
  jumptopage: function(page) {
    this.x = this.constrain(page * this.screenwidth());
    this.updatecontrols();
    this.jump();
  },

  // jump to the given point (constrained to an acceptable value).
  jumptopoint: function(x) {
    this.x = this.roundandconstrain(x);
    this.updatecontrols();
    this.jump();
  },

  // slide to the previous screen’s-worth of slides.
  prev: function() {
    this.slidebypages(-1);
  },

  // slide to the next screen’s-worth of slides.
  next: function() {
    this.slidebypages(1);
  },

  // automatically call next every `n` seconds.
  autoplay: function(n) {
    if (this.autoplaytimeout) {
      clearinterval(this.autoplaytimeout);
      delete this.autoplaytimeout;
    }

    n = +n;

    if (isnan(n) || n <= 0) return;

    var self = this;
    this.autoplaytimeout = setinterval(function () {
      if (!self.pause) {
        self.next();
      }
    }, n * 1000);
  },

  // pause autoplay when hovering over carousel
  autopause: function () {
    var self = this;
    this.el.hover(function () {
      self.pause = true;
    }, function () {
      self.pause = false;
    });
  },

  // destroy the microfiche instance and clear related events
  destroy: function() {
    this.el.empty();
    this.el.off();
    this.clearresizehandler();
    this.el.removedata('microfiche');
  },

  // refresh the microfiche instance by deleting the contents and associated data,
  // then restoring the original contents, and re-initializing them. this is particularly
  // useful for refreshing microfiche on page or container element resize, as it will
  // redraw the controls if needed.
  refresh: function() {
    var options = this.el.data('microfiche').options,
        contents = this.getcontents();

    this.destroy();

    this.el.append(contents);
    new microfiche($.extend({ el: this.el }, options));

    return this.el;
  },

  getcontents: function() {
    if(this.contentschanged()) {
      return this.el.html();
    } else {
      return this.el.data('microfiche').initialcontents;
    }
  },

  // have the contents changed?
  contentschanged: function() {
    return this.el.find('.microfiche-screen').length === 0;
  },

  // refresh microfiche automatically on window resize
  refreshonresize: function(delay) {
    // overwrite previous settings
    this.options.refreshonresize = delay;
    if (this.resizehandler) this.clearresizehandler();

    if (delay === false) return;
    if (delay === true) delay = 250;

    var self = this,
               timeout;

    // debounce so microfiche will only refresh once for each time
    // a visitor resizes the window
    self.resizehandler = function() {
      if (timeout) cleartimeout(timeout);

      timeout = settimeout(function() {
        self.refresh();
      }, delay);
    };

    $(window).on('resize', self.resizehandler);
  },

  clearresizehandler: function() {
    $(window).off('resize', this.resizehandler);
  },

  noscrollalign: function(alignment) {
    if(this.film.width() > this.screen.width()) return;

    switch(alignment) {
      case 'center':
        this.film.css({ 
          left: '50%',
          marginleft: (this.film.width() / 2 * -1) + 'px', 
          right: 'auto'
        });
        break;

      case 'right':
        this.film.css({ 
          left: 'auto',
          marginleft: 'auto',
          right: 0 
        });
        break;

      default:
        this.film.css({ 
          left: 0,
          marginleft: 'auto',
          right: 'auto' 
        });
    }

  },

  // run given commands, for example:
  //
  //     microfiche.run({ slidebypages: 1 });
  //
  run: function(options) {
    for (var key in options) {
      var property = this[key];
      if ($.isfunction(property)) property.call(this, options[key]);
    }
  }

});

// ## webkit optimization ##
//
// a bit of feature detection for webkit transition support.
if (('webkitcssmatrix' in window && 'm11' in new webkitcssmatrix())) {
  // if we have webkit transition support, then override `preparefilm`
  // and `transition` to take advantage of hardware acceleration.
  $.extend(microfiche.prototype, {

    preparefilm: function() {
      this.film.css({ webkittransform: 'translate3d(0px, 0px, 0px)' });
    },

    performtransition: function(duration, callback) {
      this.film.one('webkittransitionend', callback).css({
        webkittransition: '-webkit-transform ' + duration + 'ms',
        webkittransform: 'translate3d(' + -this.x + 'px, 0px, 0px)'
      });
    },

    performjump: function() {
      this.film.css({
        webkittransition: '-webkit-transform 0ms',
        webkittransform: 'translate3d(' + -this.x + 'px, 0px, 0px)'
      });
    }

  });
}

// ## jquery.fn.microfiche ##
//
// creates microfiche elements and sends them commands.
jquery.fn.microfiche = function(options) {
  return this.each(function() {
    var microfiche = $(this).data('microfiche');

    if (microfiche) {
      microfiche.run(options);
    } else {
      new microfiche($.extend({ el: this }, options));
    }
  });
}

})();