timeline-setter.js

(function($, undefined){

  var TimelineSetter = window.TimelineSetter = (window.TimelineSetter || {});

  TimelineSetter.VERSION = "0.3.2";

  var observable = function(obj){

    obj.bind = function(e, cb){
      var callbacks = (this._callbacks = this._callbacks || {});
      var list = (callbacks[e] = callbacks[e] || []);
      list.push(cb);
    };

    obj.trigger = function(e){
      if(!this._callbacks) return;
      var list = this._callbacks[e];
      if(!list) return;
      for(var i = 0; i < list.length; i++) list[i].apply(this, arguments);
    };
  };

  var transformable = function(obj){

    obj.move = function(evtName, e){
      if (!e.deltaX) return;
      if (_.isUndefined(this.currOffset)) this.currOffset = 0;
      this.currOffset += e.deltaX;
      this.el.css({"left" : this.currOffset});
    };

    obj.zoom = function(evtName, e){
      if (!e.width) return;
      this.el.css({ "width": e.width });
    };
  };

  var queryable = function(obj, container) {
    obj.$ = function(query) {
      return window.$(query, container);
    };
  };

  var touchInit = 'ontouchstart' in document;
  if (touchInit) $.event.props.push("touches");

  var draggable = function(obj){
    var drag;

    function mousedown(e){
      e.preventDefault();
      drag = {x: e.pageX};
      e.type = "dragstart";
      obj.el.trigger(e);
    }

    function mousemove(e){
      if (!drag) return;
      e.preventDefault();
      e.type = "dragging";
      e = _.extend(e, {
        deltaX: (e.pageX || e.touches[0].pageX) - drag.x
      });
      drag = { x: (e.pageX || e.touches[0].pageX) };
      obj.el.trigger(e);
    }

    function mouseup(e){
      if (!drag) return;
      drag = null;
      e.type = "dragend";
      obj.el.trigger(e);
    }

    if (!touchInit) {

      obj.el.bind("mousedown", mousedown);

      $(document).bind("mousemove", mousemove);
      $(document).bind("mouseup", mouseup);
    } else {

      var last;
      obj.el.bind("touchstart", function(e) {
        var now = Date.now();
        var delta = now - (last || now);
        var type = delta > 0 && delta <= 250 ? "doubletap" : "tap";
        drag = {x: e.touches[0].pageX};
        last = now;
        obj.el.trigger($.Event(type));
      });

      obj.el.bind("touchmove", mousemove);
      obj.el.bind("touchend", mouseup);
    }
  };

  var safari = /WebKit\/533/.test(navigator.userAgent);

  var wheel = function(obj){
    function mousewheel(e){
      e.preventDefault();
      var delta = (e.wheelDelta || -e.detail);
      if (safari){
        var negative = delta < 0 ? -1 : 1;
        delta = Math.log(Math.abs(delta)) * negative * 2;
      }
      e.type = "scrolled";
      e.deltaX = delta;
      obj.el.trigger(e);
    }

    obj.el.bind("mousewheel DOMMouseScroll", mousewheel);
  };

  var Bounds = function(){
    this.min = +Infinity;
    this.max = -Infinity;
  };

  Bounds.prototype.extend = function(num){
    this.min = Math.min(num, this.min);
    this.max = Math.max(num, this.max);
  };

  Bounds.prototype.width = function(){
    return this.max - this.min;
  };

  Bounds.prototype.project = function(num, max){
    return (num - this.min) / this.width() * max;
  };

  var Intervals = function(bounds, interval) {
    this.max = bounds.max;
    this.min = bounds.min;

    if(!interval || !this.INTERVALS[interval]) {
      var i = this.computeMaxInterval();
      this.maxInterval = this.INTERVAL_ORDER[i];
      this.idx = i;
    } else {
      this.maxInterval = interval;
      this.idx = _.indexOf(this.INTERVAL_ORDER, interval);
    }
  };

  Intervals.dateFormats = function(timestamp) {
    var d = new Date(timestamp);
    var defaults = {};
    var months   = ['Jan.', 'Feb.', 'March', 'April', 'May', 'June', 'July', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];
    var bigHours = d.getHours() > 12;
    var ampm     = " " + (d.getHours() >= 12 ? 'p.m.' : 'a.m.');


    defaults.month = months[d.getMonth()];
    defaults.year  = d.getFullYear();
    defaults.date  = defaults.month + " " + d.getDate() + ', ' + defaults.year;

    var hours;
    if(bigHours) {
      hours = d.getHours() - 12;
    } else {
      hours = d.getHours() > 0 ? d.getHours() : "12";
    }

    hours += ":" + padNumber(d.getMinutes());
    defaults.hourWithMinutes = hours + ampm;
    defaults.hourWithMinutesAndSeconds = hours + ":" + padNumber(d.getSeconds()) + ampm;

    return Intervals.formatter(d, defaults) || defaults;
  };

  Intervals.dateStr = function(timestamp, interval) {
    var d = new Intervals.dateFormats(timestamp);
    switch (interval) {
      case "Millennium":
        return d.year;
      case "Quincentenary":
        return d.year;
      case "Century":
        return d.year;
      case "HalfCentury":
        return d.year;
      case "Decade":
        return d.year;
      case "Lustrum":
        return d.year;
      case "FullYear":
        return d.year;
      case "Month":
        return d.month + ', ' + d.year;
      case "Week":
        return d.date;
      case "Date":
        return d.date;
      case "Hours":
        return d.hourWithMinutes;
      case "HalfHour":
        return d.hourWithMinutes;
      case "QuarterHour":
        return d.hourWithMinutes;
      case "Minutes":
        return d.hourWithMinutes;
      case "Seconds":
        return d.hourWithMinutesAndSeconds;
    }
  };

  Intervals.prototype = {

    INTERVALS : {
      Millennium    : 69379200000000,  // 2200 years is the trigger
      Quincentenary : 34689600000000, // 1100 years is the trigger
      Century       : 9460800000000,  // 300 years is the trigger
      HalfCentury   : 3153600000000,  // 100 years is the trigger
      Decade        : 315360000000,
      Lustrum       : 157680000000,
      FullYear      : 31536000000,
      Month         : 2592000000,
      Week          : 604800000,
      Date          : 86400000,
      Hours         : 3600000,
      HalfHour      : 1800000,
      QuarterHour   : 900000,
      Minutes       : 60000,
      Seconds       : 1000 // 1,000 millliseconds equals on second
    },

    INTERVAL_ORDER : [
        'Seconds',
        'Minutes',
        'QuarterHour',
        'HalfHour',
        'Hours',
        'Date',
        'Week',
        'Month',
        'FullYear',
        'Lustrum',
        'Decade',
        'HalfCentury',
        'Century',
        'Quincentenary',
        'Millennium'
    ],

    YEAR_FRACTIONS : {
      Millenium     : 1000,
      Quincentenary : 500,
      Century       : 100,
      HalfCentury   : 50,
      Decade        : 10,
      Lustrum       : 5
    },

    isAtLeastA : function(interval) {
      return ((this.max - this.min) > this.INTERVALS[interval]);
    },

    computeMaxInterval : function() {
      for (var i = 0; i < this.INTERVAL_ORDER.length; i++) {
        if (!this.isAtLeastA(this.INTERVAL_ORDER[i])) break;
      }
      return i - 1;
    },

    getMaxInterval : function() {
      return this.INTERVALS[this.INTERVAL_ORDER[this.idx]];
    },

    getYearFloor : function(date, intvl){
      var fudge = this.YEAR_FRACTIONS[intvl] || 1;
      return (date.getFullYear() / fudge | 0) * fudge;
    },

    getYearCeil : function(date, intvl){
      if(this.YEAR_FRACTIONS[intvl]) return this.getYearFloor(date, intvl) + this.YEAR_FRACTIONS[intvl];
      return date.getFullYear();
    },

    getWeekFloor: function(date) {
      thisDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      thisDate.setDate(date.getDate() - date.getDay());
      return thisDate;
    },

    getWeekCeil: function(date) {
      thisDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      thisDate.setDate(thisDate.getDate() + (7 - date.getDay()));
      return thisDate;
    },

    getHalfHour: function(date) {
      return date.getMinutes() > 30 ? 30 : 0;
    },

    getQuarterHour: function(date) {
      var minutes = date.getMinutes();
      if (minutes < 15) return 0;
      if (minutes < 30) return 15;
      if (minutes < 45) return 30;
      return 45;
    },

    floor : function(ts){
      var date  = new Date(ts);
      var intvl = this.INTERVAL_ORDER[this.idx];
      var idx   = this.idx > _.indexOf(this.INTERVAL_ORDER,'FullYear') ?
                  _.indexOf(this.INTERVAL_ORDER,'FullYear') :
                  idx;

      date.setFullYear(this.getYearFloor(date, intvl));
      switch(intvl){
        case 'Week':
          date.setDate(this.getWeekFloor(date).getDate());
          idx = _.indexOf(this.INTERVAL_ORDER, 'Week');
        case 'HalfHour':
          date.setMinutes(this.getHalfHour(date));
        case 'QuarterHour':
          date.setMinutes(this.getQuarterHour(date));
      }

      while(idx--){
        intvl = this.INTERVAL_ORDER[idx];
        if (!(_.include(['Week', 'HalfHour', 'QuarterHour'].concat(_.keys(this.YEAR_FRACTIONS)), intvl)))
          date["set" + intvl](intvl === "Date" ? 1 : 0);
      }

      return date.getTime();
    },

    ceil : function(ts){
      var date = new Date(this.floor(ts));
      var intvl = this.INTERVAL_ORDER[this.idx];

      date.setFullYear(this.getYearCeil(date, intvl));
      switch(intvl){
        case 'Week':
          date.setTime(this.getWeekCeil(date).getTime());
          break;
        case 'HalfHour':
          date.setMinutes(this.getHalfHour(date) + 30);
          break;
        case 'QuarterHour':
          date.setMinutes(this.getQuarterHour(date) + 15);
          break;
        default:
          if (!(_.include(['Week', 'HalfHour', 'QuarterHour'].concat(_.keys(this.YEAR_FRACTIONS)), intvl)))
            date["set" + intvl](date["get" + intvl]() + 1);
      }
      return date.getTime();
    },

    span : function(ts){
      return this.ceil(ts) - this.floor(ts);
    },

    getRanges : function() {
      if (this.intervals) return this.intervals;
      this.intervals = [];
      for (var i = this.floor(this.min); i <= this.ceil(this.max); i += this.span(i)) {
        this.intervals.push({
          human     : Intervals.dateStr(i, this.maxInterval),
          timestamp : i
        });
      }
      return this.intervals;
    }
  };

  var sync = function(origin, listener){
    var events = Array.prototype.slice.call(arguments, 2);
    _.each(events, function(ev){
      origin.bind(ev, function(){ listener[ev].apply(listener, arguments); });
    });
  };

  var cleanNumber = function(str){
    return parseInt(str.replace(/^[^+\-\d]?([+\-]?\d+)?.*$/, "$1"), 10);
  };

  var padNumber = function(number) {
    return (number < 10 ? '0' : '') + number;
  };

  var hashStrip = /^#*/;
  var history = {
    get : function(){
      return window.location.hash.replace(hashStrip, "");
    },

    set : function(url){
      window.location.hash = url;
    }
  };

  var curColor = 1;
  var color = function(){
    var chosen;
    if (curColor < 10) {
      chosen = curColor;
      curColor += 1;
    } else {
      chosen = "default";
    }
    return chosen;
  };

  var Timeline = TimelineSetter.Timeline = function(data, config) {
    _.bindAll(this, 'render', 'setCurrentTimeline');
    this.data = data.sort(function(a, b){ return a.timestamp - b.timestamp; });
    this.bySid    = {};
    this.cards    = [];
    this.series   = [];
    this.config   = config;
    this.config.container = this.config.container || "#timeline";

    Intervals.formatter = this.config.formatter || function(d, defaults) { return defaults; };
  };
  observable(Timeline.prototype);

  Timeline.prototype = _.extend(Timeline.prototype, {

    render : function() {
      var that = this;

      queryable(this, this.config.container);

      $(this.config.container).html(JST.timeline());

      this.bounds   = new Bounds();
      this.bar      = new Bar(this);
      this.cardCont = new CardScroller(this);
      this.createSeries(this.data);
      var range = new Intervals(this.bounds, this.config.interval);
      this.intervals = range.getRanges();
      this.bounds.extend(this.bounds.min - range.getMaxInterval() / 2);
      this.bounds.extend(this.bounds.max + range.getMaxInterval() / 2);
      this.bar.render();
      sync(this.bar, this.cardCont, "move", "zoom");
      this.trigger('render');

      new Zoom("in", this);
      new Zoom("out", this);
      this.chooseNext = new Chooser("next", this);
      this.choosePrev = new Chooser("prev", this);
      if (!this.$(".TS-card_active").is("*")) this.chooseNext.click();

      $(this.config.container).bind('click', this.setCurrentTimeline);

      this.trigger('load');
    },

    setCurrentTimeline : function() {
      TimelineSetter.currentTimeline = this;
    },

    createSeries : function(series){
      for(var i = 0; i < series.length; i++)
        this.add(series[i]);
    },

    add : function(card){
      if (!(card.series in this.bySid)){
        this.bySid[card.series] = new Series(card, this);
        this.series.push(this.bySid[card.series]);
      }
      var series = this.bySid[card.series];
      var crd = series.add(card);

      this.bounds.extend(series.max());
      this.bounds.extend(series.min());

      this.trigger('cardAdd', card, crd);
    }
  });

  var Bar = function(timeline) {
    var that = this;
    this.timeline = timeline;

    this.el = this.timeline.$(".TS-notchbar");
    this.el.css({ "left": 0 });
    draggable(this);
    wheel(this);
    _.bindAll(this, "moving", "doZoom");
    this.el.bind("dragging scrolled", this.moving);
    this.el.bind("doZoom", this.doZoom);
    this.el.bind("dblclick doubletap", function(e){
      e.preventDefault();
      that.timeline.$(".TS-zoom_in").click();
    });
  };
  observable(Bar.prototype);
  transformable(Bar.prototype);

  Bar.prototype = _.extend(Bar.prototype, {

    moving : function(e){
      var parent  = this.el.parent();
      var pOffset = parent.offset().left;
      var offset  = this.el.offset().left;
      var width   = this.el.width();
      if (_.isUndefined(e.deltaX)) e.deltaX = 0;

      if (offset + width + e.deltaX < pOffset + parent.width())
        e.deltaX = (pOffset + parent.width()) - (offset + width);
      if (offset + e.deltaX > pOffset)
        e.deltaX = pOffset - offset;

      this.trigger("move", e);
      this.timeline.trigger("move", e); // for API
      this.move("move", e);
    },

    doZoom : function(e, width){
      var that = this;
      var notch = this.timeline.$(".TS-notch_active");
      var getCur = function() {
        return notch.length > 0 ? notch.position().left : 0;
      };
      var curr = getCur();

      this.el.animate({"width": width + "%"}, {
        step: function(current, fx) {
          var e = $.Event("dragging");
          var delta = curr - getCur();
          e.deltaX = delta;
          that.moving(e);
          curr = getCur();
          e = $.Event("zoom");
          e.width = current + "%";
          that.trigger("zoom", e);
        }
      });
    },

    render : function(){
      var intervals = this.timeline.intervals;
      var bounds    = this.timeline.bounds;

      for (var i = 0; i < intervals.length; i++) {
        var html = JST.year_notch({'timestamp' : intervals[i].timestamp, 'human' : intervals[i].human });
        this.el.append($(html).css("left", bounds.project(intervals[i].timestamp, 100) + "%"));
      }
    }
  });

  var CardScroller = function(timeline){
    this.el = timeline.$(".TS-card_scroller_inner");
  };
  observable(CardScroller.prototype);
  transformable(CardScroller.prototype);

  var Series = function(series, timeline) {
    this.timeline = timeline;
    this.name     = series.series;
    this.color    = this.name.length > 0 ? color() : "default";
    this.cards    = [];
    _.bindAll(this, "render", "showNotches", "hideNotches");
    this.timeline.bind("render", this.render);
  };
  observable(Series.prototype);

  Series.prototype = _.extend(Series.prototype, {

    add : function(card){
      var crd = new Card(card, this);
      this.cards.push(crd);
      return crd;
    },

    _comparator : function(crd){
      return crd.timestamp;
    },

    hideNotches : function(e){
      if(e) e.preventDefault();
      this.el.addClass("TS-series_legend_item_inactive");
      this.trigger("hideNotch");
    },

    showNotches : function(e){
      if(e) e.preventDefault();
      this.el.removeClass("TS-series_legend_item_inactive");
      this.trigger("showNotch");
    },

    render : function(e){
      if (this.name.length === 0) return;
      this.el = $(JST.series_legend(this));
      this.timeline.$(".TS-series_nav_container").append(this.el);
      var counter = 0, that = this;
      this.el.on("click", function(){
        counter++;
        if(counter % 2)
          that.hideNotches();
        else
          that.showNotches();
      });
    }
  });

  _(["min", "max"]).each(function(key){
    Series.prototype[key] = function() {
      return _[key].call(_, this.cards, this._comparator).get("timestamp");
    };
  });

  var Card = function(card, series) {
    this.series = series;
    this.timeline = this.series.timeline;
    card = _.clone(card);
    this.timestamp = card.timestamp;
    this.attributes = card;
    this.attributes.topcolor = series.color;
    _.bindAll(this, "render", "activate", "flip", "setPermalink", "toggleNotch");
    this.series.bind("hideNotch", this.toggleNotch);
    this.series.bind("showNotch", this.toggleNotch);
    this.timeline.bind("render", this.render);
    this.timeline.bar.bind("move", this.flip);
    this.id = [
      this.get('timestamp'),
      this.get('description').split(/ /)[0].replace(/[^a-zA-Z\-]/g,"")
    ].join("-");
    this.timeline.cards.push(this);
    this.template = window.JST.card;
  };

  Card.prototype = _.extend(Card.prototype, {

    get : function(key){
      return this.attributes[key];
    },

    render : function(){
      this.offset = this.timeline.bounds.project(this.timestamp, 100);
      var html = JST.notch(this.attributes);
      this.notch = $(html).css({"left": this.offset + "%"});
      this.timeline.$(".TS-notchbar").append(this.notch);
      this.notch.click(this.activate);
      if (history.get() === this.id) this.activate();
    },

    flip : function() {
      if (!this.el || !this.el.is(":visible")) return;
      var rightEdge   = this.$(".TS-item").offset().left + this.$(".TS-item").width();
      var tRightEdge  = this.timeline.$(".timeline_setter").offset().left + this.timeline.$(".timeline_setter").width();
      var margin      = this.el.css("margin-left") === this.originalMargin;
      var flippable   = this.$(".TS-item").width() < this.timeline.$(".timeline_setter").width() / 2;
      var offTimeline = (this.el.offset().left - this.el.parent().offset().left) - this.$(".TS-item").width() < 0;

      if (tRightEdge - rightEdge < 0 && margin && !offTimeline) {
        this.el.css({"margin-left": -(this.$(".TS-item").width() + 7)});
        this.$(".TS-css_arrow").css({"left" : this.$(".TS-item").width()});

      } else if (this.el.offset().left - this.timeline.$(".timeline_setter").offset().left < 0 && !margin && flippable) {
        this.el.css({"margin-left": this.originalMargin});
        this.$(".TS-css_arrow").css({"left": 0});
      }
    },

    activate : function(e){
      var that = this;
      this.hideActiveCard();
      if (!this.el) {
        this.el = $(this.template({card: this}));

        queryable(this, this.el);

        this.el.css({"left": this.offset + "%"});
        this.timeline.$(".TS-card_scroller_inner").append(this.el);
        this.originalMargin = this.el.css("margin-left");
        this.el.delegate(".TS-permalink", "click", this.setPermalink);

        this.timeline.$("img").load(this.activate);
      }

      this.el.show().addClass(("TS-card_active"));
      this.notch.addClass("TS-notch_active");
      this.setWidth();

      this.flip();
      this.move();
      this.series.timeline.trigger("cardActivate", this.attributes);
    },

    setWidth : function(){
      var that = this;
      var max = _.max(_.toArray(this.$(".TS-item_user_html").children()), function(el){ return that.$(el).width(); });
      if (this.$(max).width() > this.$(".TS-item_year").width()) {
        this.$(".TS-item_label").css("width", this.$(max).width());
      } else {
        this.$(".TS-item_label").css("width", this.$(".TS-item_year").width());
      }
    },

    move : function() {
      var e = $.Event('moving');
      var offset  = this.$(".TS-item").offset();
      var toffset = this.timeline.$(".timeline_setter").offset();
      if (offset.left < toffset.left) {
        e.deltaX = toffset.left - offset.left + cleanNumber(this.$(".TS-item").css("padding-left"));
        this.timeline.bar.moving(e);
      } else if (offset.left + this.$(".TS-item").outerWidth() > toffset.left + this.timeline.$(".timeline_setter").width()) {
        e.deltaX = toffset.left + this.timeline.$(".timeline_setter").width() - (offset.left + this.$(".TS-item").outerWidth());
        this.timeline.bar.moving(e);
      }
    },

    setPermalink : function() {
      history.set(this.id);
    },

    hideActiveCard : function() {
      this.timeline.$(".TS-card_active").removeClass("TS-card_active").hide();
      this.timeline.$(".TS-notch_active").removeClass("TS-notch_active");
    },

    toggleNotch : function(e){
      switch (e) {
        case "hideNotch":
          this.notch.hide().removeClass("TS-notch_active").addClass("TS-series_inactive");
          if (this.el) this.el.hide();
          return;
        case "showNotch":
          this.notch.removeClass("TS-series_inactive").show();
      }
    }

  });

  var ctor = function(){};
  var inherits = function(child, parent){
    ctor.prototype  = parent.prototype;
    child.prototype = new ctor();
    child.prototype.constructor = child;
  };

  var Control = function(direction, timeline){
    this.timeline = timeline;
    this.direction = direction;
    this.el = this.timeline.$(this.prefix + direction);
    var that = this;
    this.el.bind('click', function(e) { e.preventDefault(); that.click(e);});
  };

  var curZoom = 100;
  var Zoom = function(direction, timeline) {
    Control.apply(this, arguments);
  };
  inherits(Zoom, Control);

  Zoom.prototype = _.extend(Zoom.prototype, {
    prefix : ".TS-zoom_",

    click : function() {
      curZoom += (this.direction === "in" ? +100 : -100);
      if (curZoom >= 100) {
        this.timeline.$(".TS-notchbar").trigger('doZoom', [curZoom]);
      } else {
        curZoom = 100;
      }
    }
  });

  var Chooser = function(direction, timeline) {
    Control.apply(this, arguments);
    this.notches = this.timeline.$(".TS-notch");
  };
  inherits(Chooser, Control);

  Chooser.prototype = _.extend(Control.prototype, {
    prefix: ".TS-choose_",

    click: function(e){
      var el;
      var notches    = this.notches.not(".TS-series_inactive");
      var curCardIdx = notches.index(this.timeline.$(".TS-notch_active"));
      var numOfCards = notches.length;
      if (this.direction === "next") {
        el = (curCardIdx < numOfCards ? notches.eq(curCardIdx + 1) : false);
      } else {
        el = (curCardIdx > 0 ? notches.eq(curCardIdx - 1) : false);
      }
      if (!el) return;
      el.trigger("click");
    }
  });

  TimelineSetter.Api = function(timeline) {
    this.timeline = timeline;
  };

  TimelineSetter.Api.prototype = _.extend(TimelineSetter.Api.prototype, {

    onLoad : function(cb) {
      this.timeline.bind('load', cb);
    },

    onCardAdd : function(cb) {
      this.timeline.bind('cardAdd', cb);
    },

    onCardActivate : function(cb) {
      this.timeline.bind('cardActivate', cb);
    },

    onBarMove : function(cb) {

      this.timeline.bind('move', cb);
    },

    activateCard : function(timestamp) {
      _(this.timeline.cards).detect(function(card) { return card.timestamp === timestamp; }).activate();
    }
  });

  TimelineSetter.bindKeydowns = function() {
    $(document).bind('keydown', function(e) {
      if (e.keyCode === 39) {
         TimelineSetter.currentTimeline.chooseNext.click();
      } else if (e.keyCode === 37) {
        TimelineSetter.currentTimeline.choosePrev.click();
      } else {
        return;
      }
    });
  };

  Timeline.boot = function(data, config) {
    var timeline = TimelineSetter.timeline = new Timeline(data, config || {});
    var api      = new TimelineSetter.Api(timeline);

    if (!TimelineSetter.pageTimelines) {
      TimelineSetter.currentTimeline = timeline;
      TimelineSetter.bindKeydowns();
    }

    TimelineSetter.pageTimelines = TimelineSetter.pageTimelines ? TimelineSetter.pageTimelines += 1 : 1;

    $(timeline.render);

    return {
      timeline : timeline,
      api      : api
    };
  };

})(jQuery);