window.addEvent('domready', function()
{
    var items = $$('#slideshow div.item');
    var itemsNav = $$('#slideshow ul.nav li');
    var currentIndex = 0;
    var periodical;
    
    // Initialization
    items.each(function(element, index) {
        if (index != 0) {
            element.setStyle('display', 'none');
            element.setStyle('opacity', '0');
        }
    });
    if (itemsNav.length > 0) {
        itemsNav[0].addClass('selected');
    }
    
    // Add events on each link in the navigation
    itemsNav.each(function(element, index) {
        element.addEvent('mousedown', function() {
            $clear(periodical);
            displayItem(index);
        });
        element.addEvent('click', function(event) {
            event = new Event(event);
            event.stop();
            return false;
        });
    });
    
    var displayItem = function(index) {
        items[currentIndex].setStyle('display', 'none');
        itemsNav[currentIndex].removeClass('selected');
        items[index].setStyle('display', 'block');
        items[index].setStyle('opacity', '1');
        itemsNav[index].addClass('selected');
        currentIndex = index;
    }
    
    var displayNextItem = function() {
        var nextIndex = (currentIndex + 1) % items.length;
        var currentItem = items[currentIndex];
        var nextItem = items[nextIndex];
        
        var currentItemEffect = new Fx.Tween(currentItem, {duration: 750, transition: Fx.Transitions.linear});

        var nextItemEffect = new Fx.Tween(nextItem, {duration: 750, transition: Fx.Transitions.linear});
        
        currentItemEffect.start('opacity', 1, 0).chain(
            function() {
                currentItem.setStyle('display', 'none');
                itemsNav[currentIndex].removeClass('selected');
                itemsNav[nextIndex].addClass('selected');
                nextItem.setStyle('display', 'block');
                nextItemEffect.start('opacity', 0, 1);
                currentIndex = nextIndex;
            }
        );
    }
    
    // Launch the slideshow timer
    if (items.length > 0) {
        periodical = displayNextItem.periodical(6000);
    }
});