// JavaScript Document

window.addEvent('domready',function() {
  /* settings */
  var showDuration = 6000;
  var container = $('slideshow-container');
  var images = container.getElements('div.slide');
  var currentIndex = 0;
  var interval;
  var toc = [];
  var tocWidth = 20;
  var tocActive = 'toc-active';
  
  /* new: starts the show */
  var start = function() { interval = show.periodical(showDuration); };
  var stop = function() { $clear(interval); };
  /* worker */
  var show = function(to) {
    images[currentIndex].fade('out');
    toc[currentIndex].removeClass(tocActive);
    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
    toc[currentIndex].addClass(tocActive);
  };
  
  /* new: control: table of contents */
  images.each(function(img,i){
    toc.push(new Element('a',{
      text: i+1,
      href: '#',
      'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
      events: {
        click: function(e) {
          if(e) e.stop();
          stop();
          show(i);
        }
      },
      styles: {
        left: ((i + 1) * (tocWidth + 10))
      }
    }).inject(container));
    if(i > 0) { img.set('opacity',0); }
  });
  
  /* new: control: next and previous */
  var next = new Element('a',{
    href: '#',
    id: 'next',
    text: '>>',
    events: {
      click: function(e) {
        if(e) e.stop();
        stop(); show();
      }
    }
  }).inject(container);
  var previous = new Element('a',{
    href: '#',
    id: 'previous',
    text: '<<',
    events: {
      click: function(e) {
        if(e) e.stop();
        stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
      }
    }
  }).inject(container);
  
  /* new: control: start/stop on mouseover/mouseout */
  container.addEvents({
    mouseenter: function() { stop(); },
    mouseleave: function() { start(); }
  });
  
  /* start once the page is finished loading */
  window.addEvent('load',function(){
    start();
  });
});