window.addEvent('domready', function(){
    
    // set up the instance
    var slideshow = new SlideShow('latest_slides',{
        delay: 7000,
        duration: 1000,
        transition: 'fadeThroughBackground',
        autoplay: true
    });

    var manualPaused = false;
    // add play / pause elements are hovered
    var hoverEvents = {
        mouseenter: function(){ slideshow.pause(); },
        mouseleave: function(){
            if (!manualPaused) slideshow.play();
        }
    };
    
    $$('#latest_navigation  ul').addEvents(hoverEvents);

    // create navigation controls
    var navs = $$('#latest_navigation  ul li ');
    navs.each(function(element, index){
        element.addEvents({
            click: function(){
                // index of list items match index of slides
                slideshow.show(index, {transition: 'fadeThroughBackground', duration: 500});
            },
            mouseenter: function(){
                element.tween('background-color','#559CBE');
            },
            mouseleave: function(){
                if (!element.hasClass('current'))
                    element.tween('background-color','#aaa');
            }
        });
    });

    slideshow.addEvent('show', function(slideData){
        // args of the show event are the previous/next slides and their index
        // again, nav index matches slide index so this is cake
        navs[slideData.previous.index].tween('background-color','#aaa').removeClass('current');
        navs[slideData.next.index].tween('background-color','#559CBE').addClass('current');
    });
    
    var left = $$('#latest_navigation  #left');
    left.addEvents({
        click: function(){
            // index of list items match index of slides
            slideshow.showPrevious({transition: 'pushRight', duration: 1000});
        }
    });
    
    var right = $$('#latest_navigation  #right');
    right.addEvents({
        click: function(){
            // index of list items match index of slides
            slideshow.showNext({transition: 'pushLeft', duration: 1000});
        }
    });
});