var  images = [
  {ident: "slide-1", url: "/images/sp20/beachwood_sparks-frame.gif"},
  {ident: "slide-2", url: "/images/sp20/david_cross-frame.gif"},
  {ident: "slide-3", url: "/images/sp20/erics_trip-frame.gif"},
  {ident: "slide-4", url: "/images/sp20/fleet_foxes-frame.gif"},
  {ident: "slide-5", url: "/images/sp20/flight_of_the_conchords-frame.gif"},
  {ident: "slide-6", url: "/images/sp20/iron_and_wine-frame.gif"},
  {ident: "slide-7", url: "/images/sp20/les_thugs-frame.gif"},
  {ident: "slide-8", url: "/images/sp20/low-frame.gif"},
  {ident: "slide-9", url: "/images/sp20/mudhoney-frame.gif"},
  {ident: "slide-10", url: "/images/sp20/pissed_jeans-frame.gif"},
  {ident: "slide-11", url: "/images/sp20/comets_on_fire-frame.jpg"},
  {ident: "slide-12", url: "/images/sp20/foals-frame.jpg"},
  {ident: "slide-13", url: "/images/sp20/grand_archives-frame.jpg"},
  {ident: "slide-14", url: "/images/sp20/green_river-frame.jpg"},
  {ident: "slide-15", url: "/images/sp20/kinski-frame.jpg"},
  {ident: "slide-16", url: "/images/sp20/no_age-frame.jpg"},
  {ident: "slide-17", url: "/images/sp20/red_red_meat-frame.jpg"},
  {ident: "slide-18", url: "/images/sp20/the_ruby_suns-frame.jpg"},
  {ident: "slide-19", url: "/images/sp20/wolf_parade-frame.jpg"},
];

var docImages = $A(document.images)

function rotate() {
  images.push(images.shift());
  // create and append our upcoming slide if doesn't exist
  if (! $(images[1].ident)) {
    var element = $(document.createElement('img'));
    element.id    = images[1].ident;
    element.src   = images[1].url;
    element.setStyle('display:none');
    $(images[0].ident).up().appendChild(element);
  }
  Effect.Appear(images[0].ident);
  nextSlide.delay(4);
}

function nextSlide() {
  Effect.Fade(images[0].ident, {
    afterFinish: rotate
  });
}

document.observe('dom:loaded', function () {
  // the image is done in the style, but we want it to behave as
  // a link as expected
  // head = $('header')
  // head.observe('mouseover', function() {
  //   this.style.cursor='pointer';
  // }.bind(head));
  // head.observe('click', function() {
  //   window.location.href = '/sp20';
  // }.bind(head));

  // set-up nav link hovers
  $$('.nav-link').each(function(s) {
    // get the link and extend it to the whole block element
    var link = s.down('a').href;
    s.observe('click', function() {window.location.href = link;}.bind(s));
    // UGLY HACK!!! IE wouldn't update with just a style change
    s.observe('mouseover', function() {
      // this.className ='over'; this.style.cursor='pointer';
      this.setStyle('background-image: url(/images/sp20/horiz-'+this.id+'-over.gif)');
      this.style.cursor='pointer';
    }.bind(s));
    s.observe('mouseout', function() {
      // this.className ='out';
      this.setStyle('background-image: url(/images/sp20/horiz-'+this.id+'.gif)');
    }.bind(s));
  });

  if ($('slide-1'))
    Effect.Appear.delay(6, 'slide-1', {afterFinish: nextSlide});
    
  load();
});