var gDirection = 'down';
    var gInterval;
    var timeInterval = 7000;
    var prevIndex = 0;
    var toggleIndexer = 1;

    $(document).ready(doReady);
    function doReady() {

        setupFloat($('#slideshow IMG[class=active]'));
        
        resetInterval();
    }    

    function slideIndex(index) {

        if ((prevIndex - 0) == index) {
            resetInterval();
            return;
        }

        if (toggleIndexer == 0) return;
        
        clearInterval(gInterval); // stop any changes due to timer

        var $active = $('#slideshow IMG[index=' + prevIndex + ']');
        var $next = $('#slideshow IMG[index=' + index + ']');

        prevIndex = index;      
       
        doSlide($active, $next);
    }


    function slideSwitch(direction) {

        gDirection = direction == undefined ? gDirection : direction;
               
        var $active = $('#slideshow IMG[index=' + prevIndex + ']');

        //if ($active.length == 0) $active = $('#slideshow IMG:last');

        if (gDirection == 'down') {
            var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
        }
        else {
            var $next = $active.prev().length ? $active.prev() : $('#slideshow IMG:last');
        }
        
        doSlide($active, $next);
        
        /*
        if (gDirection == 'down') {
            var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
        }
        else {
            var $next = $active.prev().length ? $active.prev() : $('#slideshow IMG:last');
        }

        $active.addClass('last-active');

        $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1500, function() {
            $active.removeClass('active last-active');
        });

        resetInterval()
        */
    }

    function doSlide(active, next) {
        
        // disable indexer until animation complete
        toggleIndexer = 0;
        
        active.addClass('last-active');

        next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 750, function() {
            active.removeClass('active last-active');
            toggleIndexer = 1;
        });

        $('#selector DIV[class=active]').removeClass('active');
        $('#selector DIV[index=' + next.attr('index') + ']').addClass('active');

        prevIndex = next.attr('index');

        setupFloat(next);
       
        resetInterval()        
    }

    function setupFloat(control) {
        
        $('#selector').removeClass('left');
        if (control.attr('float') == 'left')
            $('#selector').addClass('left');
            
    }
    
    function resetInterval() {
        clearInterval(gInterval);
        gInterval = setInterval("slideSwitch(gDirection)", timeInterval);
    }