@extends('page')

@section('title') 
  @if($title) {{$title}} - Nieuws @endif
@endsection

@section('content')
  <h1>Nieuwsarchief 6FM</h1>
  @if($title) <h2> <a href="{{url('nieuws')}}" title="Terug naar het nieuwsoverzicht" class="btn btn-primary"><i class="icon-arrow-small-left"></i></a> {{$title}} </h2> @endif

  <section class="page-content col-lg-8 col-md-12">
    <div id="items">
      @include('newslistitems', ['news' => $news])
    </div>
  
    <div id="loading" style="display: none">
      <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
          <b>Meer nieuwsberichten ophalen...</b>
        </div>
      </div>
    </div>
  </section>

  <script>
    var page = 1;
    var isLoading = 0;
    var $items = $('#items');  
    var $isLoading = $('#loading');  
    $(function() {
      $(window).scroll(function () {
        var $this = $(this);       
        var tweak = 10;
        
        if(!isLoading && (page > 0) && ($this.scrollTop() >= $items.height() - $this.height() - tweak))
        {
          isLoading = 1; 
          $isLoading.show();
          $.ajax({ url: document.location.pathname + '?pagina=' + (++page) })
            .always(function() { isLoading = 0; $isLoading.hide(); })
            .done(function(data) { 
              if(!data) { 
                page = -1;  
                return;
              }
              $items.append(data); if(!data) alert( "No more data"); 
            });
        }
      });
    });
  </script>

@endsection