/**
 * This plugin can be used in 4 ways, this is only 1. Make sure to check
 * the other 3 links as well to see all the Modes.
 */
jQuery(function($){
    $('#summary').fadeIn('slow');
    
    /**
     * All the functions below, are used to update the summary div
     * That is not the objective of the plugin, the really important part
     * is the one right below. The option placeholder, and threshold.
     */
    $.preload('#all-slideshows img', {//the first argument is a selector to the images
        onRequest: request,
        onComplete: complete,
        onFinish: finish,
        placeholder: '../images/image_loading.jpg',//this is the really important option
        notFound: '../images/notfound.jpg',//optional image if an image wasn't found
        threshold: 2 //'2' is the default, how many at a time, to load.
    });
    
    function update(data){
        var pct = data.done / data.total * 100;
        $('#done').css('width', '' + pct + '%');
    };
    function complete(data){
        update(data);
        $('#image-next').html('none');//reset the "loading: xxxx"
        $('#image-loaded').html(data.image);
    };
    function request(data){
        update(data);
        $('#image-next').html(data.image);//set the "loading: xxxx"
    };
    function finish(){//hide the summary
        $('#summary').fadeOut('slow');
        
        $(function(){
            $('#rackslides').before('<ul id="racknav" class="nav">').cycle({
                fx: 'fade',
                speed: 'slow',
                timeout: 0,
                pager: '#racknav',
                pagerAnchorBuilder: function(idx, div){
                    slide = $(div).children("img")[0];
                    return '<li><a href="#" title="' + slide.alt + '"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
                }
            });
            $('#micslides').before('<ul id="micnav" class="nav">').cycle({
                fx: 'fade',
                speed: 'slow',
                timeout: 0,
                pager: '#micnav',
                pagerAnchorBuilder: function(idx, div){
                    slide = $(div).children("img")[0];
                    return '<li><a href="#" title="' + slide.alt + '"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
                }
            });
            $('#instrumentslides').before('<ul id="instrumentnav" class="nav">').cycle({
                fx: 'fade',
                speed: 'slow',
                timeout: 0,
                pager: '#instrumentnav',
                pagerAnchorBuilder: function(idx, div){
                    slide = $(div).children("img")[0];
                    return '<li><a href="#" title="' + slide.alt + '"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
                }
            });
            $('#miscslides').before('<ul id="miscnav" class="nav">').cycle({
                fx: 'fade',
                speed: 'slow',
                timeout: 0,
                pager: '#miscnav',
                pagerAnchorBuilder: function(idx, div){
                    slide = $(div).children("img")[0];
                    return '<li><a href="#" title="' + slide.alt + '"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
                }
            });
        });
    };
    });