$(document).ready(function() {
    
    function startCycle(){
        $('#slideshow').after('<ul id="slidenav">').cycle({
            fx:     'turnDown',
            speed:  'medium',
            timeout: 0,
            pager:  '#slidenav',
            
            // callback fn that creates a thumbnail to use as pager anchor
            pagerAnchorBuilder: function(idx, slide) {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="30" /></a></li>';
            }
        });
        //end cycle initialization
        
        $(this).fadeIn('fast');
    }
    
    var initial = $('#worklist li:first-child a').attr('href');
    $('#replace').load(initial,startCycle);
    
	
	$("#worklist li:first-child a").addClass("active");
	
    // page loading
    $("#worklist li a").click(
    function() {
        
        if ($(':animated').length == 0) {
			
			$("#worklist li a.active").removeClass("active");
			$(this).addClass("active");
            
            var page = $(this).attr('href');
            $('#replace').fadeOut('fast', function() {
                $('#replace').load(page,startCycle);
            });
            
        }
        
        else {
            
            return false;
            
        }
        
        return false;
    });
	
	
	var perPage = 11;
    // show page 1 when page is first loaded
	$("#pages li:first-child a").addClass("active");
    changePage(1);
    $("#pages li a").click(function(){
	   $("#pages li a.active").removeClass("active");
	   $(this).addClass("active");
       page = parseInt($(this).text());
       changePage(page);
    });


    function changePage(page) {
       start = (page - 1) * perPage;
       end = start + perPage 
       // hide all pages
       $('#worklist li').hide();

       // show the current page
       $('#worklist li').slice(start, end).show();    
    }
    
});