Automating animation/click in JavaScript
<p>I'm trying to automate the slideshow on my site: <a href="http://madampil.smugmug.com/Portfolio/Test/20010684_VfrstB" rel="nofollow">Test Site</a></p>

<p>I found this awesome jquery template online: <a href="http://tympanus.net/codrops/2011/08/...ge-navigation/" rel="nofollow">http://tympanus.net/codrops/2011/08/...ge-navigation/</a>. I modified the html/css and got it to look the way I want but now need JavaScript help!</p>

<p>The slideshow currently progresses when you click on the arrows but I was wondering if there was a way to automate the clicking function so that the slideshow animation automatically starts when the webpage is loaded. I still want the user to be able to control the slideshow with the arrows. I also wanted the slideshow to go back to the first image when it's reaches the last image. </p>

<pre><code>(function($){
$.fn.portfolio = function(options) {
    var d = {
            image: {
                width: 760,
                height: 507,
                margin: 10
            },
            path: {
                width: 10,
                height: 10,
                marginTop: 5,
                marginLeft: 5
            },
            animationSpeed: 400
    }; // default settings

    var s = $.extend({}, d, options); 

    return this.each(function(){
        var $t = $(this),
            plugin = {
                init: function(){
                    this.set.position();
                    this.paths.draw();
                    this.paths.go();
                    this.animate.item();
                },
                set: {
                    position: function(){
                        $t.find('.item').each(function(i){
                            var t = $(this);
                            t.css({ left: (s.image.width+s.image.margin)*i+'px' });
                            t.find('div').each(function(j){
                                var t = $(this);
                                t.css({ top: (s.image.height+s.image.margin)*j+'px' });
                            });
                        });
                    }
                },
                paths: {
                    draw: function(){
                        $t.append($('&lt;div /&gt;').addClass('paths'));
                        var path = $t.find('.paths'),
                            items = $t.find('.item');
                        items.each(function(i){
                            var t = $(this), div = t.find('div');
                            path.append($('&lt;div /&gt;').addClass('path'+i).css({
                                    width: s.path.width+'px', 
                                    left: (s.path.width+s.path.marginLeft)*i+'px' 
                                })
                            );
                            div.each(function(j){
                                $('&lt;a /&gt;').attr({ href: '#', rel: j }).css({ 
                                    width: s.path.width+'px',
                                    height: s.path.height+'px',
                                    top: (s.path.height+s.path.marginTop)*j+'px'  
                                }).appendTo(path.find('.path'+i))
                            });
                        });
                        path.find('.path0').find('a').eq(0).addClass('active');
                    },
                    go: function(){
                        $t.find('.paths').find('a').click(function(){
                            var t = $(this), all = $t.find('.paths').find('a'), column = t.parent('div').attr('class').split('path')[1], row = t.attr('rel'), 
                                inside = $t.find('.inside'),
                                top = row*(s.image.height+s.image.margin),
                                left = column*(s.image.width+s.image.margin);
                            inside.animate({
                                top: -top+'px',
                                left: -left+'px'
                            }, s.animationSpeed, function(){
                                plugin.position.get(inside);
                            }); 
                            return false;
                        });
                    },
                    classes: function(column, row){
                        var anchors = $t.find('.paths').find('a'), anchor = anchors.filter(function(){
                            var t = $(this),
                                col = t.parent('div').attr('class').split('path')[1], 
                                r = t.attr('rel');
                            return col == column &amp;&amp; r == row;
                        });
                        anchors.removeClass('active');
                        anchor.addClass('active');
                    }
                },
                animate: {
                    item: function(){
                        var down = { top: '-='+(s.image.height+s.image.margin)+'px' },
                            up = { top: '+='+(s.image.height+s.image.margin)+'px' },
                            next = { top: 0, left: '-='+(s.image.width+s.image.margin)+'px' },
                            prev = { top: 0, left: '+='+(s.image.width+s.image.margin)+'px' }
                        plugin.animate.img('.down', down, 40);
                        plugin.animate.img('.up', up, 38);
                        plugin.animate.img('.next', next, 39);
                        plugin.animate.img('.prev', prev, 37);
                    },
                    img: function(element, object, key){
                        var inside = $t.find('.inside'), type = $.browser.mozilla ? 'keypress' : 'keydown';
                        $(element).click(function(){
                            var t = $(this);
                            if (!t.hasClass('active')){
                                inside.animate(object, s.animationSpeed, function(){
                                    plugin.position.get(inside);
                                    t.removeClass('active');
                                }); 
                            }
                            t.addClass('active');
                            return false;
                        });
                        $(document).bind(type, function(e) {
                            var code = e.keyCode ? e.keyCode : e.which;
                            if(code == key &amp;&amp; $(element).is(':visible')) { 
                                if (!inside.is(':animated')) {
                                    inside.animate(object, s.animationSpeed, function(){
                                        plugin.position.get(inside);
                                    });
                                }
                            }
                            return false;
                        }); 

                    }
                },
                position: {
                    get: function(element){
                        var top = element.position().top,
                            left = element.position().left;
                        plugin.position.check(top, left);
                    },
                    check: function(top, left){
                        top = ($.browser.msie &amp;&amp; parseInt($.browser.version) == 8 &amp;&amp; top != 0) ? top-1 : top;
                        var items = $t.find('.item'),
                            size_left = items.length-1,
                            max_left = -size_left*(s.image.width+s.image.margin),
                            column = left*size_left/max_left,
                            current = items.filter(function(){
                                return parseInt($(this).css('left')) == -left;
                            }),
                            size_top = current.find('div').length-1,
                            max_top = -size_top*(s.image.height+s.image.margin),
                            row = top*size_top/max_top,
                            arrows = $t.find('.arrows'), 
                            up = arrows.find('.up'), down = arrows.find('.down'),
                            next = arrows.find('.next'), prev = arrows.find('.prev');
                        if (left==max_left){ next.hide(); } else { next.show(); }
                        if (left&lt;0) { prev.show(); } else { prev.hide(); }
                        if (top==max_top){ down.hide(); } else { down.show(); }
                        if (top&lt;0) { up.show(); } else { up.hide(); }
                        plugin.paths.classes(column, row);
                    }
                }
            }
        plugin.init();
    });
};}(jQuery));
</code></pre>
