// JavaScript Document

			
/*var links = $$('a');
			
links.addEvent("click",click_handler);
			
function click_handler(e) {
}*/
		
window.addEvent('domready',function() {
  /* settings */
  var showDuration = 5000;
  var container = $('slideshow');
  var images = container.getElements('img');
  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, this, 'auto'); };
  var stop = function() { $clear(interval); };
  /* worker */
  var show = function(to) {
	
    images[currentIndex].fade('out');
    toc[currentIndex].removeClass(tocActive);
	
	if($defined(to) && to != 'auto') {
		currentIndex = to;
	}
	else {
		if(currentIndex < (images.length - 1)) {
			currentIndex = currentIndex + 1;
		}
		else {
			currentIndex = 0;
		}
	}
	//console.log(currentIndex + " : " + to);
	images[currentIndex].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();
  });
});