$(function(){
    var length = 0;
    var current = 0;
    var $prevnext = $('<p id="prev-next"></p>').prependTo('#slideshow');
    var $pager = $('<p id="pager"></p>').appendTo('#slideshow');

    $('#summer-2011 li').hide().each(function(i){
        length++;
        $img = $(this).find('img').eq(0);
        var oldSrc = $img.attr('src');
        $img.attr('src', oldSrc.replace('/s/', '/'));
        $pager.append(' <a href="#' + i + '"><img src="' + oldSrc + '" alt="' + (i + 1)+ '"></a>');
    }).eq(0).show();

    $pager.find('a').eq(0).addClass('active');

    $('<a href="#next" class="prev-next">Next &gt;</a>')
    .appendTo($prevnext)
    .click(function(e){
        e.preventDefault();
        show(current + 1);
    });

    $('<a href="#prev" class="prev-next">&lt; Prev</a>')
    .prependTo($prevnext)
    .click(function(e){
        e.preventDefault();
        show(current - 1);
    });

    $pager
    .click(function(e){
        e.preventDefault();
        var target = e.target.nodeName === 'A' ? e.target : e.target.parentNode;
        var id = target.href.split('#').slice(-1)[0];
        show(parseInt(id, 10));
    });

    var showNext = function(){
        show(current + 1);
    };

    var show = function(index){
        index = index % length;
        current = index < 0 ? length + index : index;
        var $visible = $('#summer-2011 li:visible');
        var $toShow = $visible.parent().children().eq(current);
        $visible.hide();
        $pager.find('a.active').removeClass('active');
        $pager.find('a').eq(current).addClass('active');
        $toShow.show();
    };
});