gistfile1.js

Slideshow = function () {

    var _public = {
        init : function () {
            images = $('div.slideshow ul li a');
            State.curimage = $(images[0]).attr('href');
            $('div.slideshow ul li a').click(Events.click);
            if ( images.length > 1 ) {
                cycle(1); 
            }
        }
    };
    
    var Config = {
        viewers : ['.viewer-0','.viewer-1']
    };
    
    var State = {
        curviewer : 1,
        curimage : '',
        animating : true
    };
    
    var Events = {
        click : function (e) {
            e.preventDefault();
            State.animating = false;
            clearTimeout(timerid);
            
            var $this = $(this);
            if ($this.attr('href') !== State.curimage) {
                //stopAnimation();
                var src = $this.attr('href');
                
                $('<img />').load(function () {
                    var $img = $(this);
                    var target = Config.viewers[(Config.viewers.length - 1) - State.curviewer];
                    $('div.slideshow ' + target).html($img);     
                    State.curimage = src;                   
                    swapViewer();
                }).error(function () {
                    
                }).attr('src', src);  
            }            
        }
    };
    
    var images = [];
    
    var timerid;
    var cycle = function (i) {
        if (State.animating) {
            timerid = setTimeout(function(){
                var src = $(images[i]).attr('href');
                $('<img />').load(function () {
                    var $img = $(this);
                    var target = Config.viewers[(Config.viewers.length - 1) - State.curviewer];
                    $('div.slideshow ' + target).html($img);                        
                    swapViewer(onFade = function(){
                        i = i + 1 < images.length ? i + 1 : 0;
                        cycle(i);
                    });    
                    State.curimage = src;                
                }).error(function () {
                            
                }).attr('src', src);  
            }, 1000);
        }
    };

    var swapViewer = function (onFade) {   
        if (State.curviewer === 1) {
            $('div.slideshow ' + Config.viewers[1]).fadeOut(500,onFade);
            State.curviewer = 0;
        } else {
            $('div.slideshow ' + Config.viewers[1]).fadeIn(500,onFade);  
            State.curviewer = 1;          
        }
    };
    
    return _public;
    
}();