// What's on listings via ajax

$(function() {

  var whatsOnEffectSpeed = 500;
  
  $('.whatsOnNavCategories a').click(function(event) {
    event.preventDefault();
    $('.whatsOnNavCategories li').removeClass('active');
    $(this).parent().addClass('active');
    var href = $(this).attr('href');
    var p = href.indexOf('?');
    var q = (p > -1 ? href.substring(p) : '');
    loadWhatsOn('service.aspx'+q);    
  });
  
  $('.viewall').click(function(event) {
    event.preventDefault();
    loadWhatsOn('service.aspx?filter=all');   
  });
  
  
  $('.whatsOnNavBrands select').change(function(event) {
    event.preventDefault();
    loadWhatsOn('service.aspx?brand='+$(this).val());
  });
  
  function loadWhatsOn(href) { 
  
    var htmlLoaded = false;
    var fadeComplete = false;
    var loadHtml = '';
    
    $('#whatsonTopLandingPod').slideUp(whatsOnEffectSpeed/2);
    
    $('.whatsOnListOverlay')
      .height(300)
      .width($('.whatsOnListContainer').width())
      .fadeIn(whatsOnEffectSpeed)
    ;
    
    $('.whatsOnListContainer div.whatsOnListItem')
      .slideUp(whatsOnEffectSpeed)
      .fadeOut(whatsOnEffectSpeed, onFadeComplete);
       
    
    $.ajax({
      async: true,
      type: "GET",
      url: href,
      success: onLoadComplete
     });
    

    function onFadeComplete() {
      fadeComplete = true;
      if(htmlLoaded) show();
    }
    
    function onLoadComplete(html, status) {
      loadHtml = html;
      htmlLoaded = true;
      if(fadeComplete) show();
    }
    
    function show() { 
      $('.whatsOnListContainer div.whatsOnListItem')
        .empty()
        .append(loadHtml)
        .fadeIn(whatsOnEffectSpeed);      
      $('.whatsOnListOverlay').fadeOut(whatsOnEffectSpeed);
    }
    
  }
  
});