jQuery(document).ready(function() {

  /*
   * Initialize the Zenderoverview
   */
  Zenderoverzicht.init();
  jQuery('#list1 .content').append( '<div class="clear"><!-- --></div>' + '<p>' + jQuery('#after1').html() + '</p>' );

});


var Zenderoverzicht = {

  /*
   * hd
   * Stores the current hd status (on|off) (1|0)
   */
  hd: 0,

  /*
   * tab
   * Stores the current tab number (1|2|3|4)
   */
  tab: 1,

  /*
   * refresh
   * A list of numbers which refers to the tabs and holds their update status
   * this prevents tabs from loading the same content more then once if there
   * are no filter changes
   */
  refresh: {
    1: 1, // @development 1, live = 0
    2: 1,
    3: 1,
    4: 1
  },

  /*
   * filters
   * A list of filters which are used to filter the xml of the "zenderoverzicht"
   * 1: filter is active
   * 2: filter is inactive
   */
  filters: {
    'Alles' : 1,
    'Alg. & Entertainment' : 0,
    'Film' : 0,
    'Sport' : 0,
    'Kinderen' : 0,
    'Muziek' : 0,
    'Nieuws' : 0,
    'Kennis & Cultuur' : 0,
    'Regionaal' : 0,
    'Erotiek' : 0
  },

  /*
   * init
   * bind clicks to:
   *  tabs          ( toggle tabs )
   *  list heads    ( toggle lists )
   *  hd            ( toggle hd)
   *  filters       ( add / remove filters )
   *  reset filter  ( clear all filters )
   *
   * bind popups
   *
   * force the "ALL" filter to be active
   */
  init: function() {
    jQuery('#tabs li a').bind('click',function() {
      Zenderoverzicht.tabSwitch( jQuery(this).parent().attr('id').replace('tab','') );
      return false;
    });
    jQuery('.list .head .opener').bind('click',function() {
      Zenderoverzicht.toggle( jQuery(this) );
      return false;
    });
    jQuery('#hd a').bind('click',function() {
      Zenderoverzicht.hdSwitch( jQuery(this) );
      return false;
    });
    jQuery('.filter').bind('click',function(){
      Zenderoverzicht.filterClick( jQuery(this).attr('id'), jQuery(this).attr('checked') );
    });
    jQuery('#Alles').bind('click',function(){
      Zenderoverzicht.filterReset();
    });
    Zenderoverzicht.bindPopup();

    jQuery('#Alles').attr('checked',true);
    jQuery('.filter').attr('checked',false);

    Zenderoverzicht.parseUrl();
  },

  /*
   * urlParser
   */
  parseUrl: function() {
    var timer = 0;
    var url = document.location.toString();
    var anchors = url.split('?');
    if( anchors.length >= 2 && anchors[1] != '') {
      var items = anchors[1].split('&');
      for( var i = 0; i < items.length; i++ ){
         var item = items[i].split('=');
         switch( item[0] ) {
           case 'tab': // last one
             if( item[1] != '' ){
               setTimeout('jQuery( \'#tab' + item[1] + ' a\' ).click()',timer); /* timer for response errors */
               timer = timer + 500;
               //jQuery('#tab' + item[1] + ' a').click();
             }
             break;
           case 'filter': // in between
             if( item[1] != '' ){
               //Zenderoverzicht.filters[ filter ] = 1;
               //setTimeout('jQuery( \'.f' + parseInt( item[1] ) + '\' ).click()',timer); /* timer for response errors */
               //timer = timer + 500;
               //jQuery('.f' + item[1] ).click();
               jQuery('.f' + item[1] ).attr('checked',true);
               Zenderoverzicht.filterClick( jQuery('.f' + item[1]).attr('id') ,true );
             }
             break;
           case 'hd': // first one
             if( item[1] == 'on' ){
               setTimeout('jQuery( \'#on\' ).click()',0); /* timer for response errors */
             }
             break;
         }
       }
    }
  },

  /*
   * bindPopup
   * Binds clicks to the ".zender" blocks to open a popup
   */
  bindPopup: function() {
    jQuery('.zender').unbind('click').bind('click',function(){
      Zenderoverzicht.popup( jQuery(this) );
      return false;
    });
  },

  /*
   * refreshFilters
   * Set all the tab refresh values to 1 to force an update of the tabbed content on tab switch
   */
  refreshFilters: function() {
    for( var item in Zenderoverzicht.refresh ) {
      Zenderoverzicht.refresh[ item ] = 1;
    }
  },

  /*
   * checkFilter
   * checks if a tab needs to be refreshed
   */
  checkFilter: function( tab ) {
    if( Zenderoverzicht.refresh[ tab ] == 1 ) {
      return true;
    }
    return false;
  },

  /*
   * filterClick
   * Sets the refresh status of the tabs to 1
   * Updates the clicked filter status to the new status
   * If there are no filters active, it activates the "ALL" button ( Alles )
   * Updates the current tabs content
   */
  filterClick: function( filter, checked ) {

    Zenderoverzicht.refreshFilters();

    if( !checked ) { // !filter.attr('checked')
      Zenderoverzicht.filters[ filter ] = 0; // filter.attr('id')
      var unreset = true;
      for( var filterr in Zenderoverzicht.filters ) {
        if( Zenderoverzicht.filters[filterr] == 1 ) {
          unreset = false;
        }
      }
      if( unreset ) {
        jQuery('#Alles').attr('checked',true);
        Zenderoverzicht.filters['Alles'] = 1;
      }
    } else {
      Zenderoverzicht.filters[ filter ] = 1;
    }

    if( !unreset ) {
      jQuery('#Alles').attr('checked',false);
      Zenderoverzicht.filters['Alles'] = 0;
    }

    Zenderoverzicht.tabSwitch( Zenderoverzicht.tab );
  },

  /*
   * filterReset
   * Sets the refresh status of the tabs to 1
   * Clears all the filters
   * Updates the current tabs content
   */
  filterReset: function() {

    Zenderoverzicht.refreshFilters();

    for( var filter in Zenderoverzicht.filters ) {
      Zenderoverzicht.filters[filter] = 0;
    }
    Zenderoverzicht.filters['Alles'] = 1;
    jQuery('.filter').attr('checked',false);
    jQuery('#Alles').attr('checked',true);
    Zenderoverzicht.tabSwitch( Zenderoverzicht.tab );
  },

  /*
   * adjust
   * Stores the position of the zender overview div for positioning of the popup
   */
  adjust: jQuery('#zenderoverzicht').offset(),

  /*
   * popup
   * Hide the current popup
   * Reads the position of the "zender" that is clicked | jquery('.zender').click(function(){});
   * If the position is to the left of the overview, show the left div, else show the right div.
   * bind a hover function so the "zender" hides on mouseout.
   */
  popup: function( zender ) {

    if( jQuery('.overlay').css('display') == 'block') {
      jQuery('.overlay').hide();
    }

    var offset = zender.offset();

    var left = offset.left - Zenderoverzicht.adjust.left;
    if( left < 350 ) {
      jQuery('#overlay-left').css('top',offset.top - 195);
    } else {
      jQuery('#overlay-right').css('top',offset.top - 195);
    }

    if( zender.children("p").length < 1 ) {
      return false; // Dit zijn de lege zender blokken
    }

    var html = "<p>" + zender.children("p").html();

    if( html == '<p>' ) {
      return false;
    }

    var hd = '';
    if( zender.hasClass('hd') ) {
      hd = ' class="hd"';
    }
    var href = zender.children("a").attr('href');
    if( href == '' ) {
      href = '#';
    }

    var link = "<br/><a " + hd + " href='" + href + "'>" + zender.children("a").html() + "</a>";

    var more = "";
    if( zender.children("a").attr('href') != '' ) {
      more = "<br/><br/><a href='" + zender.children("a").attr('href') + "'>Meer informatie over " + zender.children("a").html() + "</a>";
    }

    var logo = "<div>" + zender.children("span").html() + link + "</div>";

    if( left < 350 ) {
      html = logo + html;
      jQuery('#overlay-left .content').html( html + more + '</p><br class="clear"/>');
      jQuery('#overlay-left').css('left',left - 8);
      jQuery('#overlay-left').fadeIn();
    } else {
      html = html + logo;
      jQuery('#overlay-right .content').html( html + more + '</p><br class="clear"/>');
      jQuery('#overlay-right').css('left',left - 333);
      jQuery('#overlay-right').fadeIn();
    }

    jQuery('.overlay').hover(function(){	},function(){
			jQuery('.overlay').fadeOut();
		});

  },

  /*
   * hdSwitch
   * Updates the refresh status of the tabs ( tabs now need refresh )
   * Toggles the HD on click of any of the HD buttons
   * Updates the current tab content
   */
  hdSwitch: function( button ) {

    Zenderoverzicht.refreshFilters();

    if( button.hasClass('on') ) {
      return false;
    }

    if( button.attr('id') == 'on' ) {
      Zenderoverzicht.hd = 1;
    } else {
      Zenderoverzicht.hd = 0;
    }

    jQuery('.on').removeClass('on');

    button.addClass('on');

    Zenderoverzicht.tabSwitch( Zenderoverzicht.tab );

  },

  /*
   * tabSwitch
   * Shows a loading div
   * Stores the current tab in the "Zenderoverzicht.tab" var
   * Update the tabs look by adding and removing classes
   * According to the clicked tab, show/hide lists and their content
   * If the tab needs a refresh, refresh the content and update the refresh status
   * Else return
   *
   */
  tabSwitch: function( tab ) {

    jQuery('#loading').show();

    Zenderoverzicht.tab = tab;

    var applyFilters = Zenderoverzicht.checkFilter( tab );

    /* Activate the current tab
     */
    jQuery('#tabs li').removeClass('active');
    jQuery('.pretab').removeClass('pretab');

    /* 1. Hide all lists
     * 2. Open lists depending on the current tab
     */
    jQuery('.list').addClass('hidden');
    switch( parseInt( tab ) ) {
      case 1:
        Zender.filter.useFilter = 1;

        jQuery('#list1').removeClass('hidden');
        jQuery('#list1').addClass('open');
        jQuery('#list1 .content').removeClass('hidden');
        jQuery('#list1 .content').css('display','block');
        break;
      case 2:
        Zender.filter.useFilter = 2;

        jQuery('#list2 .content').css('display','block');
        jQuery('#list2').addClass('open');
        jQuery('#list2').removeClass('hidden');

        //jQuery('#list1').removeClass('hidden');

        jQuery('#tab1 a').addClass('pretab');

        jQuery('#list5').removeClass('hidden');
        jQuery('#list5').addClass('open');
        jQuery('#list5 .content').removeClass('hidden');
        jQuery('#list5 .content').css('display','block');

        break;
      case 3:
        Zender.filter.useFilter = 3;

        jQuery('#list3 .content').css('display','block');
        jQuery('#list3').addClass('open');
        jQuery('#list3').removeClass('hidden');

        //jQuery('#list1').removeClass('hidden');

        jQuery('#tab2 a').addClass('pretab');

        jQuery('#list6').removeClass('hidden');
        jQuery('#list6').addClass('open');
        jQuery('#list6 .content').removeClass('hidden');
        jQuery('#list6 .content').css('display','block');

        break;
      case 4:
        Zender.filter.useFilter = 4;

        jQuery('#list4 .content').css('display','block');
        jQuery('#list4').addClass('open');
        jQuery('#list4').removeClass('hidden');

        jQuery('#tab3 a').addClass('pretab');
        break;
    }

    jQuery('#tab' + tab ).addClass('active');

    /*
     * If none of the filters changed, we can just do the tab effect
     */
    if( !applyFilters ) {
      jQuery('#loading').hide();
      return;
    }

    Zenderoverzicht.filter( tab );

    Zenderoverzicht.refresh[ tab ] = 0;

    return;

  },

  /*
   * toggle
   * According to the bar status, open or close the content below the bar
   */
  toggle: function( bar ) {
    var list = bar.parent().parent();
    if( list.hasClass('open') ) {
      list.removeClass('open');
      list.find('.content').slideUp();
    } else {
      list.addClass('open');
      list.find('.content').slideDown();
    }
  },

  /*
   * filter
   * Filter the XML according to the current tab and the filters.
   * if there is a special tab (2|3), also update the bottom list content
   */
  filter: function( tab ) {

    var url = '/xml/zenderoverzicht.xml';
    var total = 0;
    var counter = 0;

    Zenderoverzicht.html = '';

    xmlParser.parseXml( url, "zender", Zender, function( data ) {
      jQuery('#list' + tab + ' .content').html('');
      total = data.length;
      if( total < 1 ) {
        jQuery('#list' + tab + ' .content').html('<p>' + jQuery('#empty' + tab ).html() + '</p>');
        jQuery('#loading').fadeOut("slow");

      }
      jQuery( data ).each(function() {
        Zender.create( jQuery(this), tab );
        counter++;
        if( counter == total ) {
          jQuery('#loading').fadeOut("slow");
		  var max = ( Math.ceil( total /8 ) * 8 ) - total;
		  for( var i = 0; i < max; i++ ) {
			jQuery('#list' + tab + ' .content').append('<div class="zender">&nbsp;</div>');
		  }
          jQuery('#list' + tab + ' .content').append( '<div class="clear"><!-- --></div>' + '<p>' + jQuery('#after' + tab ).html() + '</p>' );
          Zenderoverzicht.bindPopup();

          /*
           * If tab is 2 or 3, we also want to update the bottom list
           */
          if( tab == 2 ) {
            Zender.filter.useFilter = 5;
            Zenderoverzicht.filter( 5 );
          }
          if( tab == 3 ) {
            Zender.filter.useFilter = 6;
            Zenderoverzicht.filter( 6 );
          }
        }
      });
    });
  },

  html: ''

}

var Zender = {

  /*
   * create
   * Create a piece of HTML to insert in to the list of zenders
   * and append it to the list
   */
  create: function( zender, tab ) {
    var hd = '';
    if( zender.attr('hd') == 1 ) {
      hd = ' hd';
    }
    var html = "<div class='zender" + hd + "'> \
                  <span><img src='" + zender.attr('logo') + "' alt='" + zender.attr('label') + "' title='" + zender.attr('label') + "' /></span> \
                  <a href='" + zender.attr('url') + "'>" + zender.attr('label') + "</a> \
                  <p>" + zender.attr('div_text') + "</p> \
                </div>";
    jQuery('#list' + tab + ' .content').append( html );
  },

  /*
   * holder
   * A representation of a single zender node from the zender XML
   * this we can use to match our filters
   */
  holder : {
    standard: 0,
    starter: 0,
    royaal: 0,
    premium: 0,
    hd: 0,
    label: '',
    logo: '',
    channel: '',
    div_text: '',
    url: '',
    categorie: ''
  },

  /*
   * applyFilter
   * According to the tab filter vars ( hd, filters object ),  return true or false
   */
  applyFilter: function( tab, elementHolder ) {

    /* Als HD uit is, en de holder heeft HD, niet toevoegen
     */
    if( Zenderoverzicht.hd == 0 && elementHolder.hd == 1 ) {
      return false;
    }

    /* Filter according to current tab
     */
    var tabResult = false;
    switch( tab ) {
      case 1:
        if( parseInt( elementHolder.standard ) == 1 ) {
          tabResult = true;
        }
        break;
      case 2:
        if( parseInt( elementHolder.starter ) == 1 && parseInt( elementHolder.standard ) == 0 ) {
          tabResult = true;
        }
        break;
      case 3:
        if( parseInt( elementHolder.royaal ) == 1 && parseInt( elementHolder.standard ) == 0 ) {
          tabResult = true;
        }
        break;
      case 4:
        if( parseInt( elementHolder.premium ) == 1 ) {
          tabResult = true;
        }
        break;
      case 5:
        if( parseInt( elementHolder.starter ) == 1 && parseInt( elementHolder.standard ) == 1 ) {
          tabResult = true;
        }
        break;
      case 6:
        if( parseInt( elementHolder.royaal ) == 1 && parseInt( elementHolder.standard ) == 1 ) {
          tabResult = true;
        }
        break;
      default:
        tabResult = false;
        break;
    }
    if( !tabResult ) {
      return false;
    }
    if( Zenderoverzicht.filters['Alles'] == 1 ) {
      return true;
    } else {
      for( var filter in Zenderoverzicht.filters ) {
        if( filter == elementHolder.categorie && Zenderoverzicht.filters[ filter ] == 1 ) {
          return true;
        }
      }
    }
    return false;
  },

  /*
   * filter
   * Use the xmlparser to apply the filter.
   */
  filter: {
    useFilter: 1,
    test: function( elementHolder ) {
      return Zender.applyFilter( this.useFilter, elementHolder );
    }
  }
}