var rotator =
{
    click: function( event )
    {
        event.stop();
        var link = event.element();
        if ( !link.hasClassName( 'navlink' ) )
        {
            link = link.up( '.navlink' );
        }
        if ( !link.slide )
        {
            return;
        }

        var instance = link.slide.up( "div.rotator" );
        if ( instance.interval )
        {
            clearInterval( instance.interval );
            instance.interval = false;
        }

        rotator.next( instance, link.slide );
    },

    next: function( instance, next )
    {
        instance = $(instance);

        if ( instance.blockChange )
        {
            return;
        }

        var active = instance.select( "div.slide.active" )[0];
        if ( !next )
        {
            var next = active.next( "div.slide" );
            if ( !next )
            {
                next = instance.down( "div.slide" );
            }
        }

        if ( active == next )
        {
            return;
        }

        instance.blockChange = true;
        active.setStyle( { zIndex: 1 } );
        next.setStyle( { zIndex: 0 } );
        next.show();
        Effect.Fade( active, { duration: 0.5, from: 1.0, to: 0.0, afterFinish: function()
        {
            active.removeClassName( 'active' );
            active.navigatorLink.removeClassName( 'active' );
            next.addClassName( 'active' );
            next.navigatorLink.addClassName( 'active' );
            instance.blockChange = false;
        } } );
    },

    rotatorInit: function( instance )
    {
        var instanceID = instance.identify();
        var number = 0;
        var slides = instance.select( 'div.slide' );
        var startWith = Math.floor( Math.random() * slides.length );
        slides.each( function( slide )
        {
            var navigatorLink = $( 'ref-thumb-' + number );
            navigatorLink.addClassName( 'navlink' );
            navigatorLink.observe( 'click', rotator.click );
            slide.navigatorLink = navigatorLink;
            navigatorLink.slide = slide;
            if ( number == startWith )
            {
                slide.show();
                slide.addClassName( 'active' );
                navigatorLink.addClassName( 'active' );
            }
            else
            {
                slide.hide();
                slide.removeClassName( 'active' );
            }
            slide.removeClassName( 'hide' );
            number++;
        } );

        instance.blockChange = false;
        instance.interval = setInterval( "rotator.next('" + instanceID + "')", 10000 );
    },

    init: function()
    {
        $$( 'div.rotator' ).each( function( instance ) { rotator.rotatorInit( instance ); } );
    }
}

document.observe( 'dom:loaded', rotator.init );