shuttle.js

/* 
   The shuttle is a 1-5 paged slideshow of elements with pagination and small dots
   to indicate what page you are on. The slideshow auto-advances when you're not
   using it, and a few other minor features.
   Implemented with Prototype and Low Pro. 
*/

Shuttle = {};
Shuttle.CurrentPage = 1;
Shuttle.AutoAdvanceTime = 0;
Shuttle.AdvanceTimeoutId = null;

Shuttle.showPage = function(page) {
  if (page < 1 || page > Shuttle.Size) return;
  $('shuttlePage' + Shuttle.CurrentPage).hide();
  $('shuttlePage' + page).show();
  $('shuttleDot' + Shuttle.CurrentPage).src = "/images/shuttleDotOff.gif";
  $('shuttleDot' + page).src = "/images/shuttleDotOn.gif";
  Shuttle.CurrentPage = page;
};

Shuttle.nextPage = function() {
  Shuttle.showPage(Shuttle.CurrentPage < Shuttle.Size ? Shuttle.CurrentPage + 1 : 1);
};

Shuttle.previousPage = function() {
  Shuttle.showPage(Shuttle.CurrentPage > 1 ? Shuttle.CurrentPage - 1 : Shuttle.Size);
};

Shuttle.startAutoAdvance = function() {
  if (Shuttle.AutoAdvanceTime <= 0) return;
  Shuttle.AdvanceTimeoutId = window.setTimeout(function() { Shuttle.nextPage(); Shuttle.startAutoAdvance(); },
                                               Shuttle.AutoAdvanceTime * 1000);
};

Shuttle.stopAutoAdvance = function() {
  if (Shuttle.AdvanceTimeoutId == null) return;
  window.clearTimeout(Shuttle.AdvanceTimeoutId);
  Shuttle.AdvanceTimeoutId = null;
};

Shuttle.pauseAdvanceOnEntry = Behavior.create({
  onmouseover : Shuttle.stopAutoAdvance,
  onmouseout : Shuttle.startAutoAdvance
});

Shuttle.displayTeaser = Behavior.create({
  onmouseover : function(event) {
    var target = $(event.target);
    while(!target.id.startsWith('shuttleArticle') && target != null) target = target.parentNode;
    if (target == null) return;
    $('shuttleTeaser').innerHTML = Shuttle.Teasers[parseInt(target.id.sub('shuttleArticle', ''))];
  },
  onmouseout : function() {
    $('shuttleTeaser').innerHTML = null;
  }
});

Behavior.toggleClassOnMouseover = Behavior.create({
  initialize : function(classname, target) { this.ClassName = classname; this.Target = target },
  onmouseover : function(event) { event.findElement(this.Target).addClassName(this.ClassName) },
  onmouseout : function(event) { event.findElement(this.Target).removeClassName(this.ClassName) }
})

Event.addBehavior({ 
  'img.shuttleLeftArrow' : Behavior.create({ onclick : Shuttle.previousPage }),
  'img.shuttleRightArrow' : Behavior.create({ onclick : Shuttle.nextPage }),
  'div.homeShuttle' : Shuttle.pauseAdvanceOnEntry,
  'div.shuttleStoryBlock' : Shuttle.displayTeaser,
  'div.shuttleStoryBlock' : Behavior.toggleClassOnMouseover('shuttleStoryBlockSelected', 'div')
});