var SimpleSlideshow = new Class({
        options: {
            showControls: true,
            showDuration: 4000,
            showTOC: true,
            tocWidth: 20,
            tocClass: 'toc',
            tocActiveClass: 'toc-active'
        },
        Implements: [Options, Events],
        initialize: function(container, elements, options) {
            //settings
            myElement = $('slideshow')
            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))
                        }
                    }).inject(myElement));
                }
                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: 'Siguiente',
                'Class': 'nextc',
                events: {
                    click: function(e) {
                        if (e) e.stop();
                        this.stop();
                        this.show();
                    } .bind(this)
                }
            }).inject(myElement);

            var previous = new Element('a', {
                href: '#',
                id: 'previous',
                text: 'Anterior',
                'Class': 'previousc',
                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(myElement);
        }
    });

    /* usage */
    window.addEvent('domready', function() {
        $('slideshow-container').setStyle('display','block')
        var slideshow = new SimpleSlideshow('slideshow-container', '#slideshow-container img');
        slideshow.start();

    });