window.addEvent('domready', function() {
    /* settings */
    var showDuration = 8000;
    var container = $('HomeImageMain');
    var TocContainer = $('tocBg');
    var images = container.getElements('img');
    var currentIndex = 0;
    var interval;
    var toc = [];
    var tocWidth = 0;
    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 + 2) * (tocWidth + 16))
            }
        }).inject(TocContainer));
        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(TocContainer);
    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(TocContainer);

    /* new: control: start/stop on mouseover/mouseout */
    container.addEvents({
        click: function() { stop(); }
        //mouseleave: function() { start();}
    });

    /* start once the page is finished loading */
    window.addEvent('load', function() {
        start();
    });
});