$(document).ready( function () {
    var $previous = $('<a href="#" id="indexImagePrevious" class="slideButton"></a>');
    var $next = $('<a href="#" id="indexImageNext" class="slideButton"></a>');
    var $buttons = $($previous).add($next).fadeTo(0,0);
    var $container = $('#indexImage');
    var slideshow = $container
        .after($buttons)
        .slideygal({
            width:  '550px',
            height: '350px',
            displayTime:    7000,
            caption:    '#indexImageCaption',
            next:       '#indexImageNext',
            previous:   '#indexImagePrevious',
            transitionBefore: transitionBefore,
            transitionAfter: transitionAfter
        })
    ;
    
    // Call up to add extra images
    if (window.boxoffice_init) {
        window.boxoffice_init(slideshow);
    }
    if (!slideshow.isEnabled()) {
        transitionBefore(slideshow, 0, 0);
    }
    
    function showButtons(e) {
        $buttons.fadeTo('fast', 0.5);
    }
    function hoverPrevious(e) {
        $previous.fadeTo('fast', 0.9);
    }
    function hoverNext(e) {
        $next.fadeTo('fast', 0.9);
    }
    function hideButtons(e) {
        $buttons.fadeTo('fast', 0);
    }
    
    function hoverOver(e) {
        slideshow.pause();
        showButtons(e);
    }
    function hoverOut(e) {
        slideshow.play();
        hideButtons(e);
    }
    
    $('#indexTop')
        .hover(hoverOver, hoverOut)
    ;
    $previous.hover(hoverPrevious, showButtons);
    $next.hover(hoverNext, showButtons);
    
    // Sidebar control
    var $caption = $('#indexImageCaption');
    function transitionBefore(thisControl, fromId, toId) {
        resetSidebar();
        var url = thisControl.transition.main.$elements[toId].attr('href');
        
        // Make sure it's relative, not absolute
        if (url.indexOf('http://') == 0) {
            url = url.replace(/^http:\/\/[^\/]+\//, '/');
        }
        
        highlightSidebar(url);
    }
    function transitionAfter(thisControl, fromId, toId) {
    }
    
    var $sidebar = $('.activity .event');
    function resetSidebar(speed) {
        if (!speed) {
            speed = 'fast';
        }
        $sidebar.fadeTo(speed, 0.7);
    }
    function highlightSidebar(url) {
        $sidebar.find('.title [href$='+url+']').closest('.event').fadeTo('fast', 1);
    }
    
    // Reset and highlight the first
    resetSidebar(0);
    highlightSidebar($sidebar.find('.title [href]').attr('href'));
    
    $sidebar.hover(
        function (e) {
            slideshow.pause();
            
            $sidebar.stop(true, true);

            /*
            resetSidebar(0);
            $(this).fadeTo(0, 1);
            */
            var url = $(this).find('.title [href]').attr('href');
            var elId = 0;
            var elements = slideshow.transition.main.$elements;
            for (var i=0; i<elements.length; i++) {
                var href = elements[i].attr('href');
                if (href.indexOf(url) == href.length - url.length) {
                    elId = i;
                }
            }
            slideshow.show(elId);
        },
        function (e) {
            slideshow.play();
        }
    );
});