Cycle vs BxSlider (v3)

/*!
 * jQuery Cycle Lite Plugin
 * http://malsup.com/jquery/cycle/lite/
 * Copyright (c) 2008-2012 M. Alsup
 * Version: 1.6 (02-MAY-2012)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires: jQuery v1.3.2 or later
 */
;
(function($) {
  "use strict";

  var ver = 'Lite-1.6';

  $.fn.cycle = function(options) {
    return this.each(function() {
      options = options || {};

      if (this.cycleTimeout) clearTimeout(this.cycleTimeout);

      this.cycleTimeout = 0;
      this.cyclePause = 0;

      var $cont = $(this);
      var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children();
      var els = $slides.get();
      if (els.length < 2) {
        if (window.console)
          console.log('terminating; too few slides: ' + els.length);
        return; // don't bother
      }

      // support metadata plugin (v1.0 and v2.0)
      var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
      var meta = $.isFunction($cont.data) ? $cont.data(opts.metaAttr) : null;
      if (meta)
        opts = $.extend(opts, meta);

      opts.before = opts.before ? [opts.before] : [];
      opts.after = opts.after ? [opts.after] : [];
      opts.after.unshift(function() {
        opts.busy = 0;
      });

      // allow shorthand overrides of width, height and timeout
      var cls = this.className;
      opts.width = parseInt((cls.match(/w:(\d+)/) || [])[1], 10) || opts.width;
      opts.height = parseInt((cls.match(/h:(\d+)/) || [])[1], 10) || opts.height;
      opts.timeout = parseInt((cls.match(/t:(\d+)/) || [])[1], 10) || opts.timeout;

      if ($cont.css('position') == 'static')
        $cont.css('position', 'relative');
      if (opts.width)
        $cont.width(opts.width);
      if (opts.height && opts.height != 'auto')
        $cont.height(opts.height);

      var first = 0;
      $slides.css({
        position: 'absolute',
        top: 0
      }).each(function(i) {
        $(this).css('z-index', els.length - i);
      });

      $(els[first]).css('opacity', 1).show(); // opacity bit needed to handle reinit case
      if ($.browser.msie) els[first].style.removeAttribute('filter');

      if (opts.fit && opts.width)
        $slides.width(opts.width);
      if (opts.fit && opts.height && opts.height != 'auto')
        $slides.height(opts.height);
      if (opts.pause)
        $cont.hover(function() {
          this.cyclePause = 1;
        }, function() {
          this.cyclePause = 0;
        });

      var txFn = $.fn.cycle.transitions[opts.fx];
      if (txFn)
        txFn($cont, $slides, opts);

      $slides.each(function() {
        var $el = $(this);
        this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
        this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
      });

      if (opts.cssFirst)
        $($slides[first]).css(opts.cssFirst);

      if (opts.timeout) {
        // ensure that timeout and speed settings are sane
        if (opts.speed.constructor == String)
          opts.speed = {
            slow: 600,
            fast: 200
          }[opts.speed] || 400;
        if (!opts.sync)
          opts.speed = opts.speed / 2;
        while ((opts.timeout - opts.speed) < 250)
          opts.timeout += opts.speed;
      }
      opts.speedIn = opts.speed;
      opts.speedOut = opts.speed;

      opts.slideCount = els.length;
      opts.currSlide = first;
      opts.nextSlide = 1;

      // fire artificial events
      var e0 = $slides[first];
      if (opts.before.length)
        opts.before[0].apply(e0, [e0, e0, opts, true]);
      if (opts.after.length > 1)
        opts.after[1].apply(e0, [e0, e0, opts, true]);

      if (opts.click && !opts.next)
        opts.next = opts.click;
      if (opts.next)
        $(opts.next).unbind('click.cycle').bind('click.cycle', function() {
          return advance(els, opts, opts.rev ? -1 : 1);
        });
      if (opts.prev)
        $(opts.prev).unbind('click.cycle').bind('click.cycle', function() {
          return advance(els, opts, opts.rev ? 1 : -1);
        });

      if (opts.timeout)
        this.cycleTimeout = setTimeout(function() {
          go(els, opts, 0, !opts.rev);
        }, opts.timeout + (opts.delay || 0));
    });
  };

  function go(els, opts, manual, fwd) {
    if (opts.busy)
      return;
    var p = els[0].parentNode,
      curr = els[opts.currSlide],
      next = els[opts.nextSlide];
    if (p.cycleTimeout === 0 && !manual)
      return;

    if (manual || !p.cyclePause) {
      if (opts.before.length)
        $.each(opts.before, function(i, o) {
          o.apply(next, [curr, next, opts, fwd]);
        });
      var after = function() {
        if ($.browser.msie)
          this.style.removeAttribute('filter');
        $.each(opts.after, function(i, o) {
          o.apply(next, [curr, next, opts, fwd]);
        });
        queueNext(opts);
      };

      if (opts.nextSlide != opts.currSlide) {
        opts.busy = 1;
        $.fn.cycle.custom(curr, next, opts, after);
      }
      var roll = (opts.nextSlide + 1) == els.length;
      opts.nextSlide = roll ? 0 : opts.nextSlide + 1;
      opts.currSlide = roll ? els.length - 1 : opts.nextSlide - 1;
    } else {
      queueNext(opts);
    }

    function queueNext(opts) {
      if (opts.timeout)
        p.cycleTimeout = setTimeout(function() {
          go(els, opts, 0, !opts.rev);
        }, opts.timeout);
    }
  }

  // advance slide forward or back

  function advance(els, opts, val) {
    var p = els[0].parentNode,
      timeout = p.cycleTimeout;
    if (timeout) {
      clearTimeout(timeout);
      p.cycleTimeout = 0;
    }
    opts.nextSlide = opts.currSlide + val;
    if (opts.nextSlide < 0) {
      opts.nextSlide = els.length - 1;
    } else if (opts.nextSlide >= els.length) {
      opts.nextSlide = 0;
    }
    go(els, opts, 1, val >= 0);
    return false;
  }

  $.fn.cycle.custom = function(curr, next, opts, cb) {
    var $l = $(curr),
      $n = $(next);
    $n.css(opts.cssBefore);
    var fn = function() {
      $n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb);
    };
    $l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
      $l.css(opts.cssAfter);
      if (!opts.sync)
        fn();
    });
    if (opts.sync)
      fn();
  };

  $.fn.cycle.transitions = {
    fade: function($cont, $slides, opts) {
      $slides.not(':eq(0)').hide();
      opts.cssBefore = {
        opacity: 0,
        display: 'block'
      };
      opts.cssAfter = {
        display: 'none'
      };
      opts.animOut = {
        opacity: 0
      };
      opts.animIn = {
        opacity: 1
      };
    },
    fadeout: function($cont, $slides, opts) {
      opts.before.push(function(curr, next, opts, fwd) {
        $(curr).css('zIndex', opts.slideCount + (fwd === true ? 1 : 0));
        $(next).css('zIndex', opts.slideCount + (fwd === true ? 0 : 1));
      });
      $slides.not(':eq(0)').hide();
      opts.cssBefore = {
        opacity: 1,
        display: 'block',
        zIndex: 1
      };
      opts.cssAfter = {
        display: 'none',
        zIndex: 0
      };
      opts.animOut = {
        opacity: 0
      };
      opts.animIn = {
        opacity: 1
      };
    }
  };

  $.fn.cycle.ver = function() {
    return ver;
  };

  // @see: http://malsup.com/jquery/cycle/lite/
  $.fn.cycle.defaults = {
    animIn: {},
    animOut: {},
    fx: 'fade',
    after: null,
    before: null,
    cssBefore: {},
    cssAfter: {},
    delay: 0,
    fit: 0,
    height: 'auto',
    metaAttr: 'cycle',
    next: null,
    pause: false,
    prev: null,
    speed: 1000,
    slideExpr: null,
    sync: true,
    timeout: 4000
  };

})(jQuery);

/**
 * jQuery bxSlider v3.0
 * http://bxslider.com
 *
 * Copyright 2011, Steven Wanderski
 * http://bxcreative.com
 *
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 */


(function($) {

  $.fn.bxSlider = function(options) {

    var defaults = {
      mode: 'horizontal', // 'horizontal', 'vertical', 'fade'
      infiniteLoop: true, // true, false - display first slide after last
      hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first
      controls: true, // true, false - previous and next controls
      speed: 500, // integer - in ms, duration of time slide transitions will occupy
      easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
      pager: false, // true / false - display a pager
      pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
      pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4
      pagerLocation: 'bottom', // 'bottom', 'top' - location of pager
      pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4
      pagerActiveClass: 'pager-active', // string - classname attached to the active pager link
      nextText: 'next', // string - text displayed for 'next' control
      nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg'
      nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
      prevText: 'prev', // string - text displayed for 'previous' control
      prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg'
      prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
      captions: false, // true, false - display image captions (reads the image 'title' tag)
      captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
      auto: false, // true, false - make slideshow change automatically
      autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse
      autoControls: false, // true, false - show 'start' and 'stop' controls for auto show
      autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
      autoStart: true, // true, false - if false show will wait for 'start' control to activate
      autoHover: false, // true, false - if true show will pause on mouseover
      autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
      pause: 3000, // integer - in ms, the duration between each slide transition
      startText: 'start', // string - text displayed for 'start' control
      startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg'
      stopText: 'stop', // string - text displayed for 'stop' control
      stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'
      ticker: false, // true, false - continuous motion ticker mode (think news ticker)
      // note: autoControls, autoControlsSelector, and autoHover apply to ticker!
      tickerSpeed: 5000, // float - use value between 1 and 5000 to determine ticker speed - the smaller the value the faster the ticker speed
      tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
      tickerHover: false, // true, false - if true ticker will pause on mouseover
      wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
      startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
      displaySlideQty: 1, // integer - number of slides to display at once
      moveSlideQty: 1, // integer - number of slides to move at once
      randomStart: false, // true, false - if true show will start on a random slide
      onBeforeSlide: function() {}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
      onAfterSlide: function() {}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
      onLastSlide: function() {}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
      onFirstSlide: function() {}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
      onNextSlide: function() {}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
      onPrevSlide: function() {}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
      buildPager: null // function(slideIndex, slideHtmlObject){ return string; } - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
    }

    var options = $.extend(defaults, options);

    // cache the base element
    var base = this;
    // initialize (and localize) all variables
    var $parent = '';
    var $origElement = '';
    var $children = '';
    var $outerWrapper = '';
    var $firstChild = '';
    var childrenWidth = '';
    var childrenOuterWidth = '';
    var wrapperWidth = '';
    var wrapperHeight = '';
    var $pager = '';
    var interval = '';
    var $autoControls = '';
    var $stopHtml = '';
    var $startContent = '';
    var $stopContent = '';
    var autoPlaying = true;
    var loaded = false;
    var childrenMaxWidth = 0;
    var childrenMaxHeight = 0;
    var currentSlide = 0;
    var origLeft = 0;
    var origTop = 0;
    var origShowWidth = 0;
    var origShowHeight = 0;
    var tickerLeft = 0;
    var tickerTop = 0;
    var isWorking = false;

    var firstSlide = 0;
    var lastSlide = $children.length - 1;


    // PUBLIC FUNCTIONS

    /**
     * Go to specified slide
     */
    this.goToSlide = function(number, stopAuto) {
      if (!isWorking) {
        isWorking = true;
        // set current slide to argument
        currentSlide = number;
        options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
        // check if stopAuto argument is supplied
        if (typeof(stopAuto) == 'undefined') {
          var stopAuto = true;
        }
        if (stopAuto) {
          // if show is auto playing, stop it
          if (options.auto) {
            base.stopShow(true);
          }
        }
        slide = number;
        // check for first slide callback
        if (slide == firstSlide) {
          options.onFirstSlide(currentSlide, $children.length, $children.eq(currentSlide));
        }
        // check for last slide callback
        if (slide == lastSlide) {
          options.onLastSlide(currentSlide, $children.length, $children.eq(currentSlide));
        }
        // horizontal
        if (options.mode == 'horizontal') {
          $parent.animate({
            'left': '-' + getSlidePosition(slide, 'left') + 'px'
          }, options.speed, options.easing, function() {
            isWorking = false;
            // perform the callback function
            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
          });
          // vertical
        } else if (options.mode == 'vertical') {
          $parent.animate({
            'top': '-' + getSlidePosition(slide, 'top') + 'px'
          }, options.speed, options.easing, function() {
            isWorking = false;
            // perform the callback function
            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
          });
          // fade       
        } else if (options.mode == 'fade') {
          setChildrenFade();
        }
        // check to remove controls on last/first slide
        checkEndControls();
        // accomodate multi slides
        if (options.moveSlideQty > 1) {
          number = Math.floor(number / options.moveSlideQty);
        }
        // make the current slide active
        makeSlideActive(number);
        // display the caption
        showCaptions();
      }
    }

    /**
     * Go to next slide
     */
    this.goToNextSlide = function(stopAuto) {
      // check if stopAuto argument is supplied
      if (typeof(stopAuto) == 'undefined') {
        var stopAuto = true;
      }
      if (stopAuto) {
        // if show is auto playing, stop it
        if (options.auto) {
          base.stopShow(true);
        }
      }
      // makes slideshow finite
      if (!options.infiniteLoop) {
        if (!isWorking) {
          var slideLoop = false;
          // make current slide the old value plus moveSlideQty
          currentSlide = (currentSlide + (options.moveSlideQty));
          // if current slide has looped on itself
          if (currentSlide <= lastSlide) {
            checkEndControls();
            // next slide callback
            options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide));
            // move to appropriate slide
            base.goToSlide(currentSlide);
          } else {
            currentSlide -= options.moveSlideQty;
          }
        } // end if(!isWorking)         
      } else {
        if (!isWorking) {
          isWorking = true;
          var slideLoop = false;
          // make current slide the old value plus moveSlideQty
          currentSlide = (currentSlide + options.moveSlideQty);
          // if current slide has looped on itself
          if (currentSlide > lastSlide) {
            currentSlide = currentSlide % $children.length;
            slideLoop = true;
          }
          // next slide callback
          options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide));
          // slide before callback
          options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
          if (options.mode == 'horizontal') {
            // get the new 'left' property for $parent
            var parentLeft = (options.moveSlideQty * childrenOuterWidth);
            // animate to the new 'left'
            $parent.animate({
              'left': '-=' + parentLeft + 'px'
            }, options.speed, options.easing, function() {
              isWorking = false;
              // if its time to loop, reset the $parent
              if (slideLoop) {
                $parent.css('left', '-' + getSlidePosition(currentSlide, 'left') + 'px');
              }
              // perform the callback function
              options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
            });
          } else if (options.mode == 'vertical') {
            // get the new 'left' property for $parent
            var parentTop = (options.moveSlideQty * childrenMaxHeight);
            // animate to the new 'left'
            $parent.animate({
              'top': '-=' + parentTop + 'px'
            }, options.speed, options.easing, function() {
              isWorking = false;
              // if its time to loop, reset the $parent
              if (slideLoop) {
                $parent.css('top', '-' + getSlidePosition(currentSlide, 'top') + 'px');
              }
              // perform the callback function
              options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
            });
          } else if (options.mode == 'fade') {
            setChildrenFade();
          }
          // make the current slide active
          if (options.moveSlideQty > 1) {
            makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
          } else {
            makeSlideActive(currentSlide);
          }
          // display the caption
          showCaptions();
        } // end if(!isWorking)

      }
    } // end function

    /**
     * Go to previous slide
     */
    this.goToPreviousSlide = function(stopAuto) {
      // check if stopAuto argument is supplied
      if (typeof(stopAuto) == 'undefined') {
        var stopAuto = true;
      }
      if (stopAuto) {
        // if show is auto playing, stop it
        if (options.auto) {
          base.stopShow(true);
        }
      }
      // makes slideshow finite
      if (!options.infiniteLoop) {
        if (!isWorking) {
          var slideLoop = false;
          // make current slide the old value plus moveSlideQty
          currentSlide = currentSlide - options.moveSlideQty;
          // if current slide has looped on itself
          if (currentSlide < 0) {
            currentSlide = 0;
            // if specified, hide the control on the last slide
            if (options.hideControlOnEnd) {
              $('.bx-prev', $outerWrapper).hide();
            }
          }
          checkEndControls();
          // next slide callback
          options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide));
          // move to appropriate slide
          base.goToSlide(currentSlide);
        }
      } else {
        if (!isWorking) {
          isWorking = true;
          var slideLoop = false;
          // make current slide the old value plus moveSlideQty
          currentSlide = (currentSlide - (options.moveSlideQty));
          // if current slide has looped on itself
          if (currentSlide < 0) {
            negativeOffset = (currentSlide % $children.length);
            if (negativeOffset == 0) {
              currentSlide = 0;
            } else {
              currentSlide = ($children.length) + negativeOffset;
            }
            slideLoop = true;
          }
          // next slide callback
          options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide));
          // slide before callback
          options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
          if (options.mode == 'horizontal') {
            // get the new 'left' property for $parent
            var parentLeft = (options.moveSlideQty * childrenOuterWidth);
            // animate to the new 'left'
            $parent.animate({
              'left': '+=' + parentLeft + 'px'
            }, options.speed, options.easing, function() {
              isWorking = false;
              // if its time to loop, reset the $parent
              if (slideLoop) {
                $parent.css('left', '-' + getSlidePosition(currentSlide, 'left') + 'px');
              }
              // perform the callback function
              options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
            });
          } else if (options.mode == 'vertical') {
            // get the new 'left' property for $parent
            var parentTop = (options.moveSlideQty * childrenMaxHeight);
            // animate to the new 'left'
            $parent.animate({
              'top': '+=' + parentTop + 'px'
            }, options.speed, options.easing, function() {
              isWorking = false;
              // if its time to loop, reset the $parent
              if (slideLoop) {
                $parent.css('top', '-' + getSlidePosition(currentSlide, 'top') + 'px');
              }
              // perform the callback function
              options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
            });
          } else if (options.mode == 'fade') {
            setChildrenFade();
          }
          // make the current slide active
          if (options.moveSlideQty > 1) {
            makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
          } else {
            makeSlideActive(currentSlide);
          }
          // display the caption
          showCaptions();
        } // end if(!isWorking)                         
      }
    } // end function

    /**
     * Go to first slide
     */
    this.goToFirstSlide = function(stopAuto) {
      // check if stopAuto argument is supplied
      if (typeof(stopAuto) == 'undefined') {
        var stopAuto = true;
      }
      base.goToSlide(firstSlide, stopAuto);
    }

    /**
     * Go to last slide
     */
    this.goToLastSlide = function() {
      // check if stopAuto argument is supplied
      if (typeof(stopAuto) == 'undefined') {
        var stopAuto = true;
      }
      base.goToSlide(lastSlide, stopAuto);
    }

    /**
     * Get the current slide
     */
    this.getCurrentSlide = function() {
      return currentSlide;
    }

    /**
     * Get the total slide count
     */
    this.getSlideCount = function() {
      return $children.length;
    }

    /**
     * Stop the slideshow
     */
    this.stopShow = function(changeText) {
      clearInterval(interval);
      // check if changeText argument is supplied
      if (typeof(changeText) == 'undefined') {
        var changeText = true;
      }
      if (changeText && options.autoControls) {
        $autoControls.html($startContent).removeClass('stop').addClass('start');
        autoPlaying = false;
      }
    }

    /**
     * Start the slideshow
     */
    this.startShow = function(changeText) {
      // check if changeText argument is supplied
      if (typeof(changeText) == 'undefined') {
        var changeText = true;
      }
      setAutoInterval();
      if (changeText && options.autoControls) {
        $autoControls.html($stopContent).removeClass('start').addClass('stop');
        autoPlaying = true;
      }
    }

    /**
     * Stops the ticker
     */
    this.stopTicker = function(changeText) {
      $parent.stop();
      // check if changeText argument is supplied
      if (typeof(changeText) == 'undefined') {
        var changeText = true;
      }
      if (changeText && options.ticker) {
        $autoControls.html($startContent).removeClass('stop').addClass('start');
        autoPlaying = false;
      }
    }

    /**
     * Starts the ticker
     */
    this.startTicker = function(changeText) {
      if (options.mode == 'horizontal') {
        if (options.tickerDirection == 'next') {
          // get the 'left' property where the ticker stopped
          var stoppedLeft = parseInt($parent.css('left'));
          // calculate the remaining distance the show must travel until the loop
          var remainingDistance = (origShowWidth + stoppedLeft) + $children.eq(0).width();
        } else if (options.tickerDirection == 'prev') {
          // get the 'left' property where the ticker stopped
          var stoppedLeft = -parseInt($parent.css('left'));
          // calculate the remaining distance the show must travel until the loop
          var remainingDistance = (stoppedLeft) - $children.eq(0).width();
        }
        // calculate the speed ratio to seamlessly finish the loop
        var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowWidth;
        // call the show
        moveTheShow(tickerLeft, remainingDistance, finishingSpeed);
      } else if (options.mode == 'vertical') {
        if (options.tickerDirection == 'next') {
          // get the 'top' property where the ticker stopped
          var stoppedTop = parseInt($parent.css('top'));
          // calculate the remaining distance the show must travel until the loop
          var remainingDistance = (origShowHeight + stoppedTop) + $children.eq(0).height();
        } else if (options.tickerDirection == 'prev') {
          // get the 'left' property where the ticker stopped
          var stoppedTop = -parseInt($parent.css('top'));
          // calculate the remaining distance the show must travel until the loop
          var remainingDistance = (stoppedTop) - $children.eq(0).height();
        }
        // calculate the speed ratio to seamlessly finish the loop
        var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowHeight;
        // call the show
        moveTheShow(tickerTop, remainingDistance, finishingSpeed);
        // check if changeText argument is supplied
        if (typeof(changeText) == 'undefined') {
          var changeText = true;
        }
        if (changeText && options.ticker) {
          $autoControls.html($stopContent).removeClass('start').addClass('stop');
          autoPlaying = true;
        }
      }
    }

    /**
     * Initialize a new slideshow
     */
    this.initShow = function() {

      // reinitialize all variables
      // base = this;
      $parent = $(this);
      $origElement = $parent.clone();
      $children = $parent.children();
      $outerWrapper = '';
      $firstChild = $parent.children(':first');
      childrenWidth = $firstChild.width();
      childrenMaxWidth = 0;
      childrenOuterWidth = $firstChild.outerWidth();
      childrenMaxHeight = 0;
      wrapperWidth = getWrapperWidth();
      wrapperHeight = getWrapperHeight();
      isWorking = false;
      $pager = '';
      currentSlide = 0;
      origLeft = 0;
      origTop = 0;
      interval = '';
      $autoControls = '';
      $stopHtml = '';
      $startContent = '';
      $stopContent = '';
      autoPlaying = true;
      loaded = false;
      origShowWidth = 0;
      origShowHeight = 0;
      tickerLeft = 0;
      tickerTop = 0;

      firstSlide = 0;
      lastSlide = $children.length - 1;

      // get the largest child's height and width
      $children.each(function(index) {
        if ($(this).outerHeight() > childrenMaxHeight) {
          childrenMaxHeight = $(this).outerHeight();
        }
        if ($(this).outerWidth() > childrenMaxWidth) {
          childrenMaxWidth = $(this).outerWidth();
        }
      });

      // get random slide number
      if (options.randomStart) {
        var randomNumber = Math.floor(Math.random() * $children.length);
        currentSlide = randomNumber;
        origLeft = childrenOuterWidth * (options.moveSlideQty + randomNumber);
        origTop = childrenMaxHeight * (options.moveSlideQty + randomNumber);
        // start show at specific slide
      } else {
        currentSlide = options.startingSlide;
        origLeft = childrenOuterWidth * (options.moveSlideQty + options.startingSlide);
        origTop = childrenMaxHeight * (options.moveSlideQty + options.startingSlide);
      }

      // set initial css
      initCss();

      // check to show pager
      if (options.pager && !options.ticker) {
        if (options.pagerType == 'full') {
          showPager('full');
        } else if (options.pagerType == 'short') {
          showPager('short');
        }
      }

      // check to show controls
      if (options.controls && !options.ticker) {
        setControlsVars();
      }

      // check if auto
      if (options.auto || options.ticker) {
        // check if auto controls are displayed
        if (options.autoControls) {
          setAutoControlsVars();
        }
        // check if show should auto start
        if (options.autoStart) {
          // check if autostart should delay
          setTimeout(function() {
            base.startShow(true);
          }, options.autoDelay);
        } else {
          base.stopShow(true);
        }
        // check if show should pause on hover
        if (options.autoHover && !options.ticker) {
          setAutoHover();
        }
      }
      // make the starting slide active
      if (options.moveSlideQty > 1) {
        makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
      } else {
        makeSlideActive(currentSlide);
      }
      // check for finite show and if controls should be hidden
      checkEndControls();
      // show captions
      if (options.captions) {
        showCaptions();
      }
      // perform the callback function
      options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
    }

    /**
     * Destroy the current slideshow
     */
    this.destroyShow = function() {
      // stop the auto show
      clearInterval(interval);
      // remove any controls / pagers that have been appended
      $('.bx-next, .bx-prev, .bx-pager, .bx-auto', $outerWrapper).remove();
      // unwrap all bx-wrappers
      $parent.unwrap().unwrap().removeAttr('style');
      // remove any styles that were appended
      $parent.children().removeAttr('style').not('.pager').remove();
      // remove any childrent that were appended
      $children.removeClass('pager');

    }

    /**
     * Reload the current slideshow
     */
    this.reloadShow = function() {
      base.destroyShow();
      base.initShow();
    }

    // PRIVATE FUNCTIONS

    /**
     * Creates all neccessary styling for the slideshow
     */

    function initCss() {
      // layout the children
      setChildrenLayout(options.startingSlide);
      // CSS for horizontal mode
      if (options.mode == 'horizontal') {
        // wrap the <ul> in div that acts as a window and make the <ul> uber wide
        $parent
          .wrap('<div class="' + options.wrapperClass + '" style="width:' + wrapperWidth + 'px; position:relative;"></div>')
          .wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:' + wrapperWidth + 'px;"></div>')
          .css({
            width: '999999px',
            position: 'relative',
            left: '-' + (origLeft) + 'px'
          });
        $parent.children().css({
          width: childrenWidth,
          'float': 'left',
          listStyle: 'none'
        });
        $outerWrapper = $parent.parent().parent();
        $children.addClass('pager');
        // CSS for vertical mode
      } else if (options.mode == 'vertical') {
        // wrap the <ul> in div that acts as a window and make the <ul> uber tall
        $parent
          .wrap('<div class="' + options.wrapperClass + '" style="width:' + childrenMaxWidth + 'px; position:relative;"></div>')
          .wrap('<div class="bx-window" style="width:' + childrenMaxWidth + 'px; height:' + wrapperHeight + 'px; position:relative; overflow:hidden;"></div>')
          .css({
            height: '999999px',
            position: 'relative',
            top: '-' + (origTop) + 'px'
          });
        $parent.children().css({
          listStyle: 'none',
          height: childrenMaxHeight
        });
        $outerWrapper = $parent.parent().parent();
        $children.addClass('pager');
        // CSS for fade mode
      } else if (options.mode == 'fade') {
        // wrap the <ul> in div that acts as a window
        $parent
          .wrap('<div class="' + options.wrapperClass + '" style="width:' + childrenMaxWidth + 'px; position:relative;"></div>')
          .wrap('<div class="bx-window" style="height:' + childrenMaxHeight + 'px; width:' + childrenMaxWidth + 'px; position:relative; overflow:hidden;"></div>');
        $parent.children().css({
          listStyle: 'none',
          position: 'absolute',
          top: 0,
          left: 0,
          zIndex: 98
        });
        $outerWrapper = $parent.parent().parent();
        $children.not(':eq(' + currentSlide + ')').fadeTo(0, 0);
        $children.eq(currentSlide).css('zIndex', 99);
      }
      // if captions = true setup a div placeholder
      if (options.captions && options.captionsSelector == null) {
        $outerWrapper.append('<div class="bx-captions"></div>');
      }
    }

    /**
     * Depending on mode, lays out children in the proper setup
     */

    function setChildrenLayout() {
      // lays out children for horizontal or vertical modes
      if (options.mode == 'horizontal' || options.mode == 'vertical') {

        // get the children behind
        var $prependedChildren = getArraySample($children, 0, options.moveSlideQty, 'backward');

        // add each prepended child to the back of the original element
        $.each($prependedChildren, function(index) {
          $parent.prepend($(this));
        });

        // total number of slides to be hidden after the window
        var totalNumberAfterWindow = ($children.length + options.moveSlideQty) - 1;
        // number of original slides hidden after the window
        var pagerExcess = $children.length - options.displaySlideQty;
        // number of slides to append to the original hidden slides
        var numberToAppend = totalNumberAfterWindow - pagerExcess;
        // get the sample of extra slides to append
        var $appendedChildren = getArraySample($children, 0, numberToAppend, 'forward');

        if (options.infiniteLoop) {
          // add each appended child to the front of the original element
          $.each($appendedChildren, function(index) {
            $parent.append($(this));
          });
        }
      }
    }

    /**
     * Sets all variables associated with the controls
     */

    function setControlsVars() {
      // check if text or images should be used for controls
      // check "next"
      if (options.nextImage != '') {
        nextContent = options.nextImage;
        nextType = 'image';
      } else {
        nextContent = options.nextText;
        nextType = 'text';
      }
      // check "prev"
      if (options.prevImage != '') {
        prevContent = options.prevImage;
        prevType = 'image';
      } else {
        prevContent = options.prevText;
        prevType = 'text';
      }
      // show the controls
      showControls(nextType, nextContent, prevType, prevContent);
    }

    /**
     * Puts slideshow into auto mode
     *
     * @param int pause number of ms the slideshow will wait between slides
     * @param string direction 'forward', 'backward' sets the direction of the slideshow (forward/backward)
     * @param bool controls determines if start/stop controls will be displayed
     */

    function setAutoInterval() {
      if (options.auto) {
        // finite loop
        if (!options.infiniteLoop) {
          if (options.autoDirection == 'next') {
            interval = setInterval(function() {
              currentSlide += options.moveSlideQty;
              // if currentSlide has exceeded total number
              if (currentSlide > lastSlide) {
                currentSlide = currentSlide % $children.length;
              }
              base.goToSlide(currentSlide, false);
            }, options.pause);
          } else if (options.autoDirection == 'prev') {
            interval = setInterval(function() {
              currentSlide -= options.moveSlideQty;
              // if currentSlide is smaller than zero
              if (currentSlide < 0) {
                negativeOffset = (currentSlide % $children.length);
                if (negativeOffset == 0) {
                  currentSlide = 0;
                } else {
                  currentSlide = ($children.length) + negativeOffset;
                }
              }
              base.goToSlide(currentSlide, false);
            }, options.pause);
          }
          // infinite loop
        } else {
          if (options.autoDirection == 'next') {
            interval = setInterval(function() {
              base.goToNextSlide(false);
            }, options.pause);
          } else if (options.autoDirection == 'prev') {
            interval = setInterval(function() {
              base.goToPreviousSlide(false);
            }, options.pause);
          }
        }

      } else if (options.ticker) {

        options.tickerSpeed *= 10;

        // get the total width of the original show
        $('.pager', $outerWrapper).each(function(index) {
          origShowWidth += $(this).width();
          origShowHeight += $(this).height();
        });

        // if prev start the show from the last slide
        if (options.tickerDirection == 'prev' && options.mode == 'horizontal') {
          $parent.css('left', '-' + (origShowWidth + origLeft) + 'px');
        } else if (options.tickerDirection == 'prev' && options.mode == 'vertical') {
          $parent.css('top', '-' + (origShowHeight + origTop) + 'px');
        }

        if (options.mode == 'horizontal') {
          // get the starting left position
          tickerLeft = parseInt($parent.css('left'));
          // start the ticker
          moveTheShow(tickerLeft, origShowWidth, options.tickerSpeed);
        } else if (options.mode == 'vertical') {
          // get the starting top position
          tickerTop = parseInt($parent.css('top'));
          // start the ticker
          moveTheShow(tickerTop, origShowHeight, options.tickerSpeed);
        }

        // check it tickerHover applies
        if (options.tickerHover) {
          setTickerHover();
        }
      }
    }

    function moveTheShow(leftCss, distance, speed) {
      // if horizontal
      if (options.mode == 'horizontal') {
        // if next
        if (options.tickerDirection == 'next') {
          $parent.animate({
            'left': '-=' + distance + 'px'
          }, speed, 'linear', function() {
            $parent.css('left', leftCss);
            moveTheShow(leftCss, origShowWidth, options.tickerSpeed);
          });
          // if prev
        } else if (options.tickerDirection == 'prev') {
          $parent.animate({
            'left': '+=' + distance + 'px'
          }, speed, 'linear', function() {
            $parent.css('left', leftCss);
            moveTheShow(leftCss, origShowWidth, options.tickerSpeed);
          });
        }
        // if vertical          
      } else if (options.mode == 'vertical') {
        // if next
        if (options.tickerDirection == 'next') {
          $parent.animate({
            'top': '-=' + distance + 'px'
          }, speed, 'linear', function() {
            $parent.css('top', leftCss);
            moveTheShow(leftCss, origShowHeight, options.tickerSpeed);
          });
          // if prev
        } else if (options.tickerDirection == 'prev') {
          $parent.animate({
            'top': '+=' + distance + 'px'
          }, speed, 'linear', function() {
            $parent.css('top', leftCss);
            moveTheShow(leftCss, origShowHeight, options.tickerSpeed);
          });
        }
      }
    }

    /**
     * Sets all variables associated with the controls
     */

    function setAutoControlsVars() {
      // check if text or images should be used for controls
      // check "start"
      if (options.startImage != '') {
        startContent = options.startImage;
        startType = 'image';
      } else {
        startContent = options.startText;
        startType = 'text';
      }
      // check "stop"
      if (options.stopImage != '') {
        stopContent = options.stopImage;
        stopType = 'image';
      } else {
        stopContent = options.stopText;
        stopType = 'text';
      }
      // show the controls
      showAutoControls(startType, startContent, stopType, stopContent);
    }

    /**
     * Handles hover events for auto shows
     */

    function setAutoHover() {
      // hover over the slider window
      $outerWrapper.find('.bx-window').hover(function() {
        if (autoPlaying) {
          base.stopShow(false);
        }
      }, function() {
        if (autoPlaying) {
          base.startShow(false);
        }
      });
    }

    /**
     * Handles hover events for ticker mode
     */

    function setTickerHover() {
      // on hover stop the animation
      $parent.hover(function() {
        if (autoPlaying) {
          base.stopTicker(false);
        }
      }, function() {
        if (autoPlaying) {
          base.startTicker(false);
        }
      });
    }

    /**
     * Handles fade animation
     */

    function setChildrenFade() {
      // fade out any other child besides the current
      $children.not(':eq(' + currentSlide + ')').fadeTo(options.speed, 0).css('zIndex', 98);
      // fade in the current slide
      $children.eq(currentSlide).css('zIndex', 99).fadeTo(options.speed, 1, function() {
        isWorking = false;
        // ie fade fix
        if (jQuery.browser.msie) {
          $children.eq(currentSlide).get(0).style.removeAttribute('filter');
        }
        // perform the callback function
        options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
      });
    };

    /**
     * Makes slide active
     */

    function makeSlideActive(number) {
      if (options.pagerType == 'full' && options.pager) {
        // remove all active classes
        $('a', $pager).removeClass(options.pagerActiveClass);
        // assign active class to appropriate slide
        $('a', $pager).eq(number).addClass(options.pagerActiveClass);
      } else if (options.pagerType == 'short' && options.pager) {
        $('.bx-pager-current', $pager).html(currentSlide + 1);
      }
    }

    /**
     * Displays next/prev controls
     *
     * @param string nextType 'image', 'text'
     * @param string nextContent if type='image', specify a filepath to the image. if type='text', specify text.
     * @param string prevType 'image', 'text'
     * @param string prevContent if type='image', specify a filepath to the image. if type='text', specify text.
     */

    function showControls(nextType, nextContent, prevType, prevContent) {
      // create pager html elements
      var $nextHtml = $('<a href="" class="bx-next"></a>');
      var $prevHtml = $('<a href="" class="bx-prev"></a>');
      // check if next is 'text' or 'image'
      if (nextType == 'text') {
        $nextHtml.html(nextContent);
      } else {
        $nextHtml.html('<img src="' + nextContent + '" />');
      }
      // check if prev is 'text' or 'image'
      if (prevType == 'text') {
        $prevHtml.html(prevContent);
      } else {
        $prevHtml.html('<img src="' + prevContent + '" />');
      }
      // check if user supplied a selector to populate next control
      if (options.prevSelector) {
        $(options.prevSelector).append($prevHtml);
      } else {
        $outerWrapper.append($prevHtml);
      }
      // check if user supplied a selector to populate next control
      if (options.nextSelector) {
        $(options.nextSelector).append($nextHtml);
      } else {
        $outerWrapper.append($nextHtml);
      }
      // click next control
      $nextHtml.click(function() {
        base.goToNextSlide();
        return false;
      });
      // click prev control
      $prevHtml.click(function() {
        base.goToPreviousSlide();
        return false;
      });
    }

    /**
     * Displays the pager
     *
     * @param string type 'full', 'short'
     */

    function showPager(type) {
      // sets up logic for finite multi slide shows
      var pagerQty = $children.length;
      // if we are moving more than one at a time and we have a finite loop
      if (options.moveSlideQty > 1) {
        // if slides create an odd number of pages
        if ($children.length % options.moveSlideQty != 0) {
          // pagerQty = $children.length / options.moveSlideQty + 1;
          pagerQty = Math.ceil($children.length / options.moveSlideQty);
          // if slides create an even number of pages
        } else {
          pagerQty = $children.length / options.moveSlideQty;
        }
      }
      var pagerString = '';
      // check if custom build function was supplied
      if (options.buildPager) {
        for (var i = 0; i < pagerQty; i++) {
          pagerString += options.buildPager(i, $children.eq(i * options.moveSlideQty));
        }

        // if not, use default pager
      } else if (type == 'full') {
        // build the full pager
        for (var i = 1; i <= pagerQty; i++) {
          pagerString += '<a href="" class="pager-link pager-' + i + '">' + i + '</a>';
        }
      } else if (type == 'short') {
        // build the short pager
        pagerString = '<span class="bx-pager-current">' + (options.startingSlide + 1) + '</span> ' + options.pagerShortSeparator + ' <span class="bx-pager-total">' + $children.length + '</span>';
      }
      // check if user supplied a pager selector
      if (options.pagerSelector) {
        $(options.pagerSelector).append(pagerString);
        $pager = $(options.pagerSelector);
      } else {
        var $pagerContainer = $('<div class="bx-pager"></div>');
        $pagerContainer.append(pagerString);
        // attach the pager to the DOM
        if (options.pagerLocation == 'top') {
          $outerWrapper.prepend($pagerContainer);
        } else if (options.pagerLocation == 'bottom') {
          $outerWrapper.append($pagerContainer);
        }
        // cache the pager element
        $pager = $('.bx-pager', $outerWrapper);
      }
      $pager.children().click(function() {
        // only if pager is full mode
        if (options.pagerType == 'full') {
          // get the index from the link
          var slideIndex = $pager.children().index(this);
          // accomodate moving more than one slide
          if (options.moveSlideQty > 1) {
            slideIndex *= options.moveSlideQty;
          }
          base.goToSlide(slideIndex);
        }
        return false;
      });
    }

    /**
     * Displays captions
     */

    function showCaptions() {
      // get the title from each image
      var caption = $('img', $children.eq(currentSlide)).attr('title');
      // if the caption exists
      if (caption != '') {
        // if user supplied a selector
        if (options.captionsSelector) {
          $(options.captionsSelector).html(caption);
        } else {
          $('.bx-captions', $outerWrapper).html(caption);
        }
      } else {
        // if user supplied a selector
        if (options.captionsSelector) {
          $(options.captionsSelector).html('&nbsp;');
        } else {
          $('.bx-captions', $outerWrapper).html('&nbsp;');
        }
      }
    }

    /**
     * Displays start/stop controls for auto and ticker mode
     *
     * @param string type 'image', 'text'
     * @param string next [optional] if type='image', specify a filepath to the image. if type='text', specify text.
     * @param string prev [optional] if type='image', specify a filepath to the image. if type='text', specify text.
     */

    function showAutoControls(startType, startContent, stopType, stopContent) {
      // create pager html elements
      $autoControls = $('<a href="" class="bx-start"></a>');
      // check if start is 'text' or 'image'
      if (startType == 'text') {
        $startContent = startContent;
      } else {
        $startContent = '<img src="' + startContent + '" />';
      }
      // check if stop is 'text' or 'image'
      if (stopType == 'text') {
        $stopContent = stopContent;
      } else {
        $stopContent = '<img src="' + stopContent + '" />';
      }
      // check if user supplied a selector to populate next control
      if (options.autoControlsSelector) {
        $(options.autoControlsSelector).append($autoControls);
      } else {
        $outerWrapper.append('<div class="bx-auto"></div>');
        $('.bx-auto', $outerWrapper).html($autoControls);
      }

      // click start control
      $autoControls.click(function() {
        if (options.ticker) {
          if ($(this).hasClass('stop')) {
            base.stopTicker();
          } else if ($(this).hasClass('start')) {
            base.startTicker();
          }
        } else {
          if ($(this).hasClass('stop')) {
            base.stopShow(true);
          } else if ($(this).hasClass('start')) {
            base.startShow(true);
          }
        }
        return false;
      });

    }

    /**
     * Checks if show is in finite mode, and if slide is either first or last, then hides the respective control
     */

    function checkEndControls() {
      if (!options.infiniteLoop && options.hideControlOnEnd) {
        // check previous
        if (currentSlide == firstSlide) {
          $('.bx-prev', $outerWrapper).hide();
        } else {
          $('.bx-prev', $outerWrapper).show();
        }
        // check next
        if (currentSlide == lastSlide) {
          $('.bx-next', $outerWrapper).hide();
        } else {
          $('.bx-next', $outerWrapper).show();
        }
      }
    }

    /**
     * Returns the left offset of the slide from the parent container
     */

    function getSlidePosition(number, side) {
      if (side == 'left') {
        var position = $('.pager', $outerWrapper).eq(number).position().left;
      } else if (side == 'top') {
        var position = $('.pager', $outerWrapper).eq(number).position().top;
      }
      return position;
    }

    /**
     * Returns the width of the wrapper
     */

    function getWrapperWidth() {
      var wrapperWidth = $firstChild.outerWidth() * options.displaySlideQty;
      return wrapperWidth;
    }

    /**
     * Returns the height of the wrapper
     */

    function getWrapperHeight() {
      // if displaying multiple slides, multiple wrapper width by number of slides to display
      var wrapperHeight = $firstChild.outerHeight() * options.displaySlideQty;
      return wrapperHeight;
    }

    /**
     * Returns a sample of an arry and loops back on itself if the end of the array is reached
     *
     * @param array array original array the sample is derived from
     * @param int start array index sample will start
     * @param int length number of items in the sample
     * @param string direction 'forward', 'backward' direction the loop should travel in the array
     */

    function getArraySample(array, start, length, direction) {
      // initialize empty array
      var sample = [];
      // clone the length argument
      var loopLength = length;
      // determines when the empty array should start being populated
      var startPopulatingArray = false;
      // reverse the array if direction = 'backward'
      if (direction == 'backward') {
        array = $.makeArray(array);
        array.reverse();
      }
      // loop through original array until the length argument is met
      while (loopLength > 0) {
        // loop through original array
        $.each(array, function(index, val) {
          // check if length has been met
          if (loopLength > 0) {
            // don't do anything unless first index has been reached
            if (!startPopulatingArray) {
              // start populating empty array
              if (index == start) {
                startPopulatingArray = true;
                // add element to array
                sample.push($(this).clone());
                // decrease the length clone variable
                loopLength--;
              }
            } else {
              // add element to array
              sample.push($(this).clone());
              // decrease the length clone variable
              loopLength--;
            }
            // if length has been met, break loose
          } else {
            return false;
          }
        });
      }
      return sample;
    }

    this.each(function() {
      // make sure the element has children
      if ($(this).children().length > 0) {
        base.initShow();
      }
    });

    return this;
  }

  jQuery.fx.prototype.cur = function() {
    if (this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null)) {
      return this.elem[this.prop];
    }

    var r = parseFloat(jQuery.css(this.elem, this.prop));
    // return r && r > -10000 ? r : 0;
    return r;
  }


})(jQuery);