//

Event.observe(window, 'load', function() {
  // if we have these 3, we can init a WhirlyBanner
  if($('banners') && $('bannerurls') && $('rotatebanner') && $('rotatelink') && $('bannerbuttons')){
     var ticker = new WhirlyBanner($('banners').value.split(':'), $('bannerurls').value.split('~~~~'), $('rotatebanner'), $('bannerbuttons'), $('rotatelink'), 10000);
  }
});

var WhirlyBanner = Class.create();
WhirlyBanner.prototype = {
   initialize: function(ids, urls, viewport, buttonContainer, link, interval) {
      this.imageIDs = ids;
      this.imageURLs = urls;
      this.images = [];
      this.buttons = [];
      this.buttonContainer = buttonContainer;
      this.link = link;
      this.viewport = viewport;
      this.timer = 0;
      this.idx = 0;
      this.interval = interval;
      this.setup();
   },
   setup: function(){
      // start preloading images and building buttons
      for(var i=0; i < this.imageIDs.length; i++){
         this.images.push(new Image())
         this.images[this.images.length - 1].src = '/sd-images/' + this.imageIDs[i];
         var newBut = $(document.createElement('DIV'));
         // begin by highlighting the first button
         if(i == 0)
            newBut.addClassName('clicked');
         newBut.update(i + 1);
         
         // set up button event handers
         Event.observe(newBut, 'mousedown', this.setImg.bind(this));
         Event.observe(newBut, 'mouseover', this.mouseover.bind(this));
         Event.observe(newBut, 'mouseout', this.mouseout.bind(this));
         
         this.buttons.push(newBut);
      }
      // attach buttons
      for(var i = this.buttons.length - 1; i >= 0; i--)
         this.buttonContainer.appendChild(this.buttons[i]);
      // set first image
      this.viewport.src = this.images[this.idx].src;
      this.setLink(this.imageURLs[this.idx]);
      // start the interval timer counting.
      this.start();
   },
   setLink: function(str){
      if(str == '')
         str = '#';
      this.link.setAttribute('href', str);
   },
   start: function(){
      this.timer = window.setInterval(function(){this.nextImg()}.bind(this), this.interval);
   },
   stop: function(){
      window.clearInterval(this.timer);
   },
   // called when the user clicks a button
   setImg: function(e){
      var tar = $(e.target || e.srcElement);
      this.idx = parseInt(tar.innerHTML) - 1;
      // set new image
      this.viewport.src = this.images[this.idx].src;
      this.setLink(this.imageURLs[this.idx]);
      // reset button styles
      for(var i = 0; i < this.buttons.length; i++)
         this.buttons[i].removeClassName('clicked');
      // apply clicked style to the button we just clicked
      this.buttons[this.idx].addClassName('clicked');
      // restart the timer
      this.stop();
      this.start();
   },
   // a few mouse events
   mouseover: function(e){
      var tar = $(e.target || e.srcElement);
      tar.addClassName('hovering');
   },
   mouseout: function(e){
      var tar = $(e.target || e.srcElement);
      tar.removeClassName('hovering');
   },
   // called by the interval timer
   nextImg: function(){
      // increment index
      this.idx ++;
      // if we've gone too far, pull back to the start
      if(this.idx >= this.images.length)
         this.idx = 0;
      // set our new image
      this.viewport.src = this.images[this.idx].src;
      this.setLink(this.imageURLs[this.idx]);
      // reset the button styles
      for(var i = 0; i < this.buttons.length; i++)
          this.buttons[i].removeClassName('clicked');
      // apply clicked style to the button that represents the new image on screen
      this.buttons[this.idx].addClassName('clicked');
   }
};