var zoomerIsRunning = false; // Indicated whether the zoomer is running (some actions depend on this)

// Zoom on a frame
var zoomOnFrame = function(source) {
    zoomerIsRunning = true;

    // Stop the slideshow so that it does not run in the background
    stopSlideshow();

    // Show the loading indicator
    $('loading').show();

    // Fade out the page and fade in the zoomed image when it has finished loading, and only if the zoom action has not been cancelled in the meantime

    // If the image has not changed since the last zoom, simply display it
    if ($('zoomer_image').readAttribute('src') == source) {
        // Do nothing if the zoomer is not running - This test should not be necessary since there is no delay due to a potential image loading
        if (zoomerIsRunning) {
            // Cancel all running effects
            var scope = Effect.Queues.get('zoom');
            scope.each(function(effect) {effect.cancel();});

            // Fade out the page and fade in the zoomed image
            $('loading').hide();
            new Effect.Fade('page', {
                queue: {scope: 'zoom'}
            });
            new Effect.Appear('zoomer', {
                queue: {scope: 'zoom'}
            });
        }
    // If the image has changed since the last zoom, load it and display it when it has finished loading, via an observer
    } else {
        $('zoomer_image').observe('load', function() {
            // Do nothing if the zoomer is not running
            if (zoomerIsRunning) {
                $('zoomer_image').stopObserving('load');

                // Cancel all running effects
                var scope = Effect.Queues.get('zoom');
                scope.each(function(effect) {effect.cancel();});

            // Fade out the page and fade in the zoomed image
                $('loading').hide();
                new Effect.Fade('page', {
                    queue: {scope: 'zoom'}
                });
                new Effect.Appear('zoomer', {
                    queue: {scope: 'zoom'}
                });
            }
        });
        $('zoomer_image').writeAttribute('src', source);
    }
}

// Zoom back
var zoomBack = function() {

    // Cancel all running effects
    var scope = Effect.Queues.get('zoom');
    scope.each(function(effect) {effect.cancel();});

    zoomerIsRunning = false;

    // Fade out the zoomed image and fade in the page
    new Effect.Fade('zoomer', {
                queue: {scope: 'zoom'}
            });
    new Effect.Appear('page', {
                queue: {scope: 'zoom'},
                afterFinish: function(effect) {
                    // Automatically restart the slideshow
                    startSlideshow();
                }
            });
}

// Stop the zoomer instantaneously
var stopZoom = function() {
    // Cancel all running effects
    var scope = Effect.Queues.get('zoom');
    scope.each(function(effect) {effect.cancel();});

    if ($('zoomer')) {
        $('zoomer').hide();
    }
    if ($('page')) {
        $('page').show();
    }
    zoomerIsRunning = false;
}

document.observe('dom:loaded', function() {
    // Create containers to display the zoomed image and a return link
    var zoomer = new Element('div').hide().setStyle({
        'position'          : 'absolute',
        'top'               : '5px',
        'left'              : '0px',
        'width'             : '99%', // Cannot set to 100%, otherwise a horizontal slider appears
        'height'            : '99%', // Cannot set to 100%, otherwise a vertical slider appears
        'backgroundColor'   : '#2e2e2e',
        'textAlign'         : 'center'
    });
    zoomer.writeAttribute('id', 'zoomer');

    var zoomerBack = new Element('div').setStyle({
        'position'          : 'absolute',
        'top'               : '20px',
        'left'              : '20px',
        'width'             : '20px',
        'height'            : '20px'
    });
    var zoomerBackLink = new Element('a').writeAttribute('href', '#');
    //var zoomerBackImage = new Element('img').writeAttribute('src', 'zoomer_back.gif');
    zoomer.observe('click', function() {
        zoomBack();
    });
    zoomer.observe('mouseover', function() {
        zoomer.setStyle({cursor: 'pointer'});
    });
    zoomer.observe('mouseout', function() {
        zoomer.setStyle({cursor: 'default'});
    });
    zoomerBackLink.observe('click', function() {
        zoomBack();
    });
    //zoomerBackLink.insert(zoomerBackImage);
    zoomerBack.insert(zoomerBackLink);

    var zoomerImageContainer = new Element('div');
    var zoomerImage = new Element('img');
    zoomerImage.observe('click', function() {
        zoomBack();
    });
    zoomerImage.writeAttribute('id', 'zoomer_image');
    zoomerImageContainer.insert(zoomerImage);

    zoomer.insert(zoomerBack);
    zoomer.insert(zoomerImageContainer);

    $$('body')[0].insert(zoomer);

    // Modify the zoom link for the initial frames so that they call the zoom function when clicked
    $('frame_contents').childElements().each(function(element) {
        var zoomImage = element.down('span');
        var zoomImageSrc = '';
        if (zoomImage) {
            zoomImageSrc = zoomImage.innerHTML;
        }
        var zoomLink = element.down('a');
        if (zoomLink) {
            zoomLink.href = '#';
            zoomLink.observe('click', function() {
                zoomOnFrame(zoomImageSrc);
            });
        }
    })

});