@extends('page')

@section('title') 
  Radioprogrammering
@endsection

@section('content')
  @parent

  <nav>
    <ul class="pager">
      <li class="previous-week"><a href="#">&larr; Week eerder</a></li>
      <li class="current-week"><a href="#">Deze week</a></li>
      <li class="next-week"><a href="#">Week later &rarr;</a></li>
    </ul>
  </nav>
  
  <div id="loading" style="display: none; height: 300px;">
    <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>Programmaschema ophalen...</b>
      </div>
    </div>
  </div>

  <div id='schedule'>
    @include('radioscheduleweek', ['schedule' => $schedule])
  </div>

  <style type="text/css">
    #schedule table {
      margin-left: 10px;
    }

    #schedule table tr {
    }

    #schedule table td {
      height: 70px;
      vertical-align: top;
    }

    #schedule table td.time {
      min-width: 150px;
    }

    #schedule table td.title {
      width: auto;
    }

    #schedule table td a { 
      display: block; 
      width: 100%; 
    }

    #schedule .current-marker {
      margin-left: 3px;
      padding: 5px !important;
    }
  </style>

  <nav>
    <ul class="pager">
      <li class="previous-week"><a href="#">&larr; Week eerder</a></li>
      <li class="current-week"><a href="#">Deze week</a></li>
      <li class="next-week"><a href="#">Week later &rarr;</a></li>
    </ul>
  </nav>
  
  <script type="text/javascript">
    var week = 0;
    var $loading = $("#loading");  
    var $schedule = $("#schedule");

    function gotoPage(week) {
      $loading.css('height', $schedule.height() + 'px').show();
      $schedule.hide();
      window.location.hash = (!week) ? "deze-week" 
                             : (week < 0) ? (week == -1 ? "1-week-geleden" : (-week) + "-weken-geleden")
                             : "over-" + (week == 1 ? "1-week" : week + "-weken");
      $.ajax({
        'url': '{{url('gids')}}/' + week,
        'success': function(html, status, xhr) { 
          $schedule.hide().html(html).fadeIn(); 
          scrollToMiddle($(".current-marker"));
        }
      }).done(function(data) { $loading.hide(); });
    }

    $(".pager .previous-week").click(function(e) { gotoPage(--week); e.preventDefault(); });
    $(".pager .current-week").click(function(e) { gotoPage(week = 0); e.preventDefault(); });
    $(".pager .next-week").click(function(e) { gotoPage(++week); e.preventDefault(); });

    window.onhashchange = function() { 
      if(window.location.hash == "#deze-week") { 
        newWeek = 0;
      } else if(window.location.hash.endsWith("1-week-geleden")) {
        newWeek = -1;
      } else if(window.location.hash.endsWith("over-1-week")) {
        newWeek = 1;
      } else if(window.location.hash.endsWith("weken-geleden")) {
        newWeek = -parseInt(window.location.hash.substr(1));
      } else if(window.location.hash.startsWith("#over-")) {
        newWeek = parseInt(window.location.hash.substr(6));
      }

      if(newWeek != week) { 
        gotoPage(newWeek); 
      }
    }

    function scrollToMiddle($elt) {
      if($elt.length == 0) { return; }
      var elem_position = $elt.offset().top;
      var window_height = $(window).height();
      var y = elem_position - window_height / 2;
      window.scrollTo(0,y);
    }

    scrollToMiddle($(".current-marker"));

  </script>
@endsection