<?php
// Template Name: Older Issues
get_header(); ?>

<div id="content" role="main"><!-- Start content -->
    <h3><?php the_title(); ?></h3>

    <?php get_template_part( 'loop', 'older' ); ?>

</div><!-- End content -->
<div id="pagination" class="margin4"><?php paginate(); ?></div>
<div id="inifiniteLoader" class="margin4">Loading more covers...</div>
</div><!-- End container -->
<script src="<?php bloginfo('template_directory'); ?>/js/lazy.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {

    $("img.lazy").show().lazyload();

    $("img.lazy").lazyload({
        threshold : 50,
        effect : "fadeIn"
    }).removeClass("lazy");

    $(document).ajaxStop(function(){

        $("img.lazy").show().lazyload();

        $("img.lazy").lazyload({
            threshold : 50,
            effect : "fadeIn"
        }).removeClass("lazy");
    });

    $('div#pagination').hide();
    var inProgress = false;
    var count = 2;
    var total = <?php echo $wp_query->max_num_pages; ?>;

    $(window).scroll(function(){
            if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
              if (!inProgress) {
                inProgress = true;
               if (count > total){
                    return false;
               }else{
                    loadArticle(count);
               }
               count++;
            }
    }}

    );

    function loadArticle(pageNumber){
            $('div#inifiniteLoader').show();
            $.ajax({
                url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                type:'POST',
                data: "action=infinite_scroll&page_no="+ count +"&loop_file=loop-older", // Change this for different loops
                success: function(html){
                    $(html).hide().appendTo("#content").fadeIn(200);
                    $('div#inifiniteLoader').hide();
                    inProgress = false;
                    return;
                }
            });
        return false;
    }

});
</script>
</body>
</html>