$(document).ready(function(){
  var crossfade_duration = 300;
  
  // Set up tabs
  var tab_button_container = $("#tab_container");
  tab_button_container.css({
    display: "block"
  });
  
  var buttons = tab_button_container.children("a");
  var tab_container = $(".tab_content_container");
  var tabs = $(".tab");
  var tab_headers = $(".tab_header");
  
  if ((tab_container.length <= 0) || (tabs.length != buttons.length) || (tab_headers.length != buttons.length))
    return;
  
  var activate_button = function(button, activate) {
    var class_name = button.className;
    var str = "_inactive";
    var index = class_name.indexOf(str);
    if (activate) {
      if (index >= 0)
        button.className = class_name.substr(0, index);
    } else {
      if (index < 0)
        button.className = class_name + str;
    }
  };
  
  var navigate_callback = function(button, destination_index) {
    return function() {
      button[0].blur();
      
      if (destination_index == current_index || destination_index < 0 || destination_index >= tabs.length)
        return;
      
      // Animate headers
      var header_dst = $(tab_headers[destination_index]);
      var header_src = $(tab_headers[current_index]);
      
      header_dst.stop();
      header_src.stop();
      header_dst.css("opacity", 0.0);
      header_src.css("opacity", 1.0);
      header_dst.appendTo(header_dst.parent());
      header_dst.animate(
        {opacity: 1.0},
        crossfade_duration
      );
      
      var height_to = tab_heights[destination_index];
      var height_curr = tab_heights[current_index];
      var tab_dst = $(tabs[destination_index]);
      var tab_src = $(tabs[current_index]);
      
      tab_dst.stop();
      tab_src.stop();
      
      if (height_to >= height_curr) {
        tab_container.css({
          height: height_to
        });
        
        tab_src.css({
          position: "absolute",
          opacity: 1.0,
          display: "block"
        });
        
        tab_dst.css({
          position: "absolute",
          opacity: 0.0,
          display: "block"
        });
        
        tab_dst.appendTo(tab_container);
        
        activate_button(buttons[current_index], false);
        current_index = destination_index;
        activate_button(button[0], true);
        
        tab_dst.animate(
          {opacity: 1.0},
          crossfade_duration,
          function() {
            tab_src.css({
              display: "none"
            });
            
            tab_dst.css({
              position: "relative"
            });
            
            tab_container.css({
              height: "auto"
            });
          }
        );
      } else {
        tab_container.css({
          height: height_curr
        });
        
        tab_src.css({
          position: "absolute",
          opacity: 1.0,
          display: "block"
        });
        
        tab_dst.css({
          position: "absolute",
          opacity: 1.0,
          display: "block"
        });
        
        tab_src.appendTo(tab_container);
        
        activate_button(buttons[current_index], false);
        current_index = destination_index;
        activate_button(button[0], true);
        
        tab_src.animate(
          {opacity: 0.0},
          crossfade_duration,
          function() {
            tab_src.css({
              display: "none"
            });
            
            tab_dst.css({
              position: "relative"
            });
            
            tab_container.css({
              height: "auto"
            });
          }
        );
      }
      
      return false;
    }
  };
  
  var current_index = 0;
  
  // Make sure container uses relative positioning
  tab_container.css({
    position: "relative"
  });
  
  // Set up array to record each tab's default height
  var tab_heights = new Array();
  
  for (var i=0; i<tabs.length; i++) {
    var tab = $(tabs[i]);
    var button = $(buttons[i]);
    var header = $(tab_headers[i]);
    
    // Record content height
    tab_heights.push(tab.innerHeight());
    
    // Setup CSS & classes
    if (i == current_index) {
      tab.css({
        position: "relative"/*,
        height: tab_heights[i]*/
      });
      
      header.appendTo(header.parent());
      header.css("opacity", 1.0);
    } else {
      tab.css({
        display: "none"
      });
      
      header.css("opacity", 0.0);
      
      activate_button(button[0], false);
    }
    
    // Events
    button.click(navigate_callback(button, i));
  }
});