var SimpleSlideshow = new Class({
  Implements: [Options,Events],
  options: {
   showControls: false,
   showDuration: 3000,
   showTOC: true,
   tocWidth: 20,
   tocClass: 'toc',
   tocActiveClass: 'toc-active'
  },
  initialize: function(container,elements,options) {
   this.setOptions(options);
   //settings
   this.container = $(container);
   this.elements = $$(elements);
   this.currentIndex = 0;
   this.interval = '';
   if(this.options.showTOC) this.toc = [];
   //assign
   this.elements.each(function(el,i){
    if(this.options.showTOC) {
     this.toc.push(new Element('a',{
      text: i+1,
      href: '#',
      'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
      events: {
       click: function(e) {
        if(e) e.stop();
        this.stop();
        this.show(i);
       }.bind(this)
      },
      styles: {
       left: ((i + 1) * (this.options.tocWidth + 10)) - 8
      }
     }).inject(this.container));
    }
    if(i > 0) el.set('opacity',0);
   },this);
   
   //next,previous links
   if(this.options.showControls) {
    this.createControls();
   }
   //events
   this.container.addEvents({
    mouseenter: function() { this.stop(); }.bind(this),
    mouseleave: function() { this.start(); }.bind(this)
   });

  },
  show: function(to) {
   this.elements[this.currentIndex].fade('out');
   if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
   this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex + 1 : 0));
   this.elements[this.currentIndex].fade('in');
   if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
  },
  start: function() {
   this.interval = this.show.bind(this).periodical(this.options.showDuration);
  },
  stop: function() {
   $clear(this.interval);
  },
  //"private"
  createControls: function() {
   var next = new Element('a',{
    href: '#',
    id: 'next',
    text: '>>',
    events: {
     click: function(e) {
      if(e) e.stop();
      this.stop(); 
      this.show();
     }.bind(this)
    }
   }).inject(this.container);
   var previous = new Element('a',{
    href: '#',
    id: 'previous',
    text: '<<',
    events: {
     click: function(e) {
      if(e) e.stop();
      this.stop(); 
      this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
     }.bind(this)
    }
   }).inject(this.container);
  }
 });


window.addEvent('domready',function() {
 var prjslide = new SimpleSlideshow('prjslides', '#prjslides div', {
  //tocWidth: 16,
  showDuration: 6000
 });
 prjslide.start();
});