var tabblock = {
  s: {
    animlen: 200
  },
  
  init: function() {
    tabblock.binduiactions();
    tabblock.hideinactive();
  },
  
  binduiactions: function() {
    $('.tabblock-tabs').on('click', '.tabblock-tab', function(){
      tabblock.switchtab($(this));
    });
  },
  
  hideinactive: function() {
    var $tabblocks = $('.tabblock');
    
    $tabblocks.each(function(i) {
      var 
        $tabblock = $($tabblocks[i]),
        $panes = $tabblock.find('.tabblock-pane'),
        $activetab = $tabblock.find('.tabblock-tab.is-active');
      
      $panes.hide();
      $($panes[$activetab.index()]).show();
    });
  },
  
  switchtab: function($tab) {
    var $context = $tab.closest('.tabblock');
    
    if (!$tab.hasclass('is-active')) {
      $tab.siblings().removeclass('is-active');
      $tab.addclass('is-active');
   
      tabblock.showpane($tab.index(), $context);
    }
   },
  
  showpane: function(i, $context) {
    var $panes = $context.find('.tabblock-pane');
   
    // normally i'd frown at using jquery over css animations, but we can't transition between unspecified variable heights, right? if you know a better way, i'd love a read it in the comments or on twitter @johndjameson
    $panes.slideup(tabblock.s.animlen);
    $($panes[i]).slidedown(tabblock.s.animlen);
  }
};

$(function() {
  tabblock.init();
});